@paypal/checkout-components 5.0.222 → 5.0.225

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@paypal/checkout-components",
-    "version": "5.0.222",
+    "version": "5.0.225",
     "description": "PayPal Checkout components, for integrating checkout products.",
     "main": "index.js",
     "engines": {

package/src/funding/funding.js

@@ -6,7 +6,7 @@ import { SUPPORTED_FUNDING_SOURCES } from '@paypal/funding-components/src';
 
 import type { Wallet, Experiment } from '../types';
 import { BUTTON_LAYOUT, BUTTON_FLOW } from '../constants';
-import type { OnShippingChange } from '../ui/buttons/props';
+import type { OnShippingChange, OnShippingAddressChange, OnShippingOptionsChange } from '../ui/buttons/props';
 
 import { getFundingConfig } from './config';
 
@@ -18,6 +18,8 @@ type IsFundingEligibleOptions = {|
     fundingEligibility : FundingEligibilityType,
     components : $ReadOnlyArray<$Values<typeof COMPONENTS>>,
     onShippingChange : ?Function,
+    onShippingAddressChange : ?Function,
+    onShippingOptionsChange : ?Function,
     wallet? : ?Wallet,
     applePaySupport : boolean,
     supportsPopups : boolean,
@@ -26,7 +28,7 @@ type IsFundingEligibleOptions = {|
 |};
 
 export function isFundingEligible(source : $Values<typeof FUNDING>,
-    { layout, platform, fundingSource, fundingEligibility, components, onShippingChange, flow, wallet, applePaySupport, supportsPopups, supportedNativeBrowser, experiment } : IsFundingEligibleOptions) : boolean {
+    { layout, platform, fundingSource, fundingEligibility, components, onShippingChange, onShippingAddressChange, onShippingOptionsChange, flow, wallet, applePaySupport, supportsPopups, supportedNativeBrowser, experiment } : IsFundingEligibleOptions) : boolean {
 
     if (!fundingEligibility[source] || !fundingEligibility[source].eligible) {
         return false;
@@ -78,7 +80,7 @@ export function isFundingEligible(source : $Values<typeof FUNDING>,
         }
     }
 
-    if (fundingConfig.shippingChange === false && onShippingChange) {
+    if (fundingConfig.shippingChange === false && (onShippingChange || onShippingAddressChange || onShippingOptionsChange)) {
         return false;
     }
 
@@ -89,17 +91,17 @@ export function isFundingEligible(source : $Values<typeof FUNDING>,
     return true;
 }
 
-export function determineEligibleFunding({ fundingSource, layout, platform, fundingEligibility, components, onShippingChange, flow, wallet, applePaySupport, supportsPopups, supportedNativeBrowser, experiment } :
+export function determineEligibleFunding({ fundingSource, layout, platform, fundingEligibility, components, onShippingChange, onShippingAddressChange, onShippingOptionsChange, flow, wallet, applePaySupport, supportsPopups, supportedNativeBrowser, experiment } :
     {| fundingSource : ?$Values<typeof FUNDING>, remembered : $ReadOnlyArray<$Values<typeof FUNDING>>, layout : $Values<typeof BUTTON_LAYOUT>,
     platform : $Values<typeof PLATFORM>, fundingEligibility : FundingEligibilityType, components : $ReadOnlyArray<$Values<typeof COMPONENTS>>,
-    onShippingChange? : ?Function, flow : $Values<typeof BUTTON_FLOW>, wallet? : ?Wallet, applePaySupport : boolean, supportsPopups : boolean, supportedNativeBrowser : boolean, experiment : Experiment |}) : $ReadOnlyArray<$Values<typeof FUNDING>> {
+    onShippingChange? : ?Function, onShippingAddressChange? : ?Function, onShippingOptionsChange? : ?Function, flow : $Values<typeof BUTTON_FLOW>, wallet? : ?Wallet, applePaySupport : boolean, supportsPopups : boolean, supportedNativeBrowser : boolean, experiment : Experiment |}) : $ReadOnlyArray<$Values<typeof FUNDING>> {
 
     if (fundingSource) {
         return [ fundingSource ];
     }
 
     let eligibleFunding = SUPPORTED_FUNDING_SOURCES.filter(source =>
-        isFundingEligible(source, { layout, platform, fundingSource, fundingEligibility, components, onShippingChange, flow, wallet, applePaySupport, supportsPopups, supportedNativeBrowser, experiment }));
+        isFundingEligible(source, { layout, platform, fundingSource, fundingEligibility, components, onShippingChange, onShippingAddressChange, onShippingOptionsChange, flow, wallet, applePaySupport, supportsPopups, supportedNativeBrowser, experiment }));
 
     if (layout === BUTTON_LAYOUT.HORIZONTAL) {
         eligibleFunding = eligibleFunding.slice(0, 2);
@@ -110,12 +112,12 @@ export function determineEligibleFunding({ fundingSource, layout, platform, fund
     return eligibleFunding;
 }
 
-export function isWalletFundingEligible({ wallet, onShippingChange } : {| wallet : ?Wallet, onShippingChange : ?OnShippingChange |}) : boolean {
+export function isWalletFundingEligible({ wallet, onShippingChange, onShippingAddressChange, onShippingOptionsChange } : {| wallet : ?Wallet, onShippingChange : ?OnShippingChange, onShippingAddressChange : ?OnShippingAddressChange, onShippingOptionsChange : ?OnShippingOptionsChange |}) : boolean {
     if (!wallet) {
         return false;
     }
 
-    if (onShippingChange) {
+    if (onShippingChange || onShippingAddressChange || onShippingOptionsChange) {
         return false;
     }
 

package/src/marks/component.jsx

@@ -8,7 +8,7 @@ import { PLATFORM, FUNDING } from '@paypal/sdk-constants/src';
 import { getRememberedFunding } from '@paypal/funding-components/src';
 import { getComponents, getFundingEligibility, getEnv } from '@paypal/sdk-client/src';
 
-import type { OnShippingChange } from '../ui/buttons/props';
+import type { OnShippingChange, OnShippingAddressChange, OnShippingOptionsChange } from '../ui/buttons/props';
 import { BUTTON_LAYOUT, BUTTON_FLOW } from '../constants';
 import { determineEligibleFunding, isFundingEligible } from '../funding';
 import { isSupportedNativeBrowser, getVenmoExperiment } from '../zoid/buttons/util';
@@ -24,13 +24,15 @@ type MarksInstance = {|
 
 type MarksProps = {|
     fundingSource? : ?$Values<typeof FUNDING>,
-    onShippingChange? : OnShippingChange
+    onShippingChange? : OnShippingChange,
+    onShippingAddressChange? : OnShippingAddressChange,
+    onShippingOptionsChange? : OnShippingOptionsChange
 |};
 
 export type MarksComponent = (MarksProps) => MarksInstance;
 
 export const getMarksComponent : () => MarksComponent = memoize(() => {
-    function Marks({ fundingSource, onShippingChange } : MarksProps = {}) : MarksInstance {
+    function Marks({ fundingSource, onShippingChange, onShippingAddressChange, onShippingOptionsChange } : MarksProps = {}) : MarksInstance {
 
         const height = DEFAULT_HEIGHT;
         const fundingEligibility = getFundingEligibility();
@@ -51,7 +53,7 @@ export const getMarksComponent : () => MarksComponent = memoize(() => {
                 return true;
             }
 
-            return isFundingEligible(fundingSource, { layout, platform, fundingSource, fundingEligibility, components, onShippingChange, flow, applePaySupport, supportsPopups, supportedNativeBrowser, experiment });
+            return isFundingEligible(fundingSource, { layout, platform, fundingSource, fundingEligibility, components, onShippingChange, onShippingAddressChange, onShippingOptionsChange, flow, applePaySupport, supportsPopups, supportedNativeBrowser, experiment });
         };
 
         const render = (container) => {

package/src/ui/buttons/button.jsx

@@ -13,7 +13,7 @@ import { getFundingConfig } from '../../funding';
 import { DesignExperimentLabel } from '../../funding/paypal/template';
 
 import { getButtonDesign } from './buttonDesigns';
-import type { ButtonStyle, Personalization, OnShippingChange } from './props';
+import type { ButtonStyle, Personalization, OnShippingChange, OnShippingAddressChange, OnShippingOptionsChange } from './props';
 import { Spinner } from './spinner';
 import { MenuButton } from './menu-button';
 
@@ -27,6 +27,8 @@ type IndividualButtonProps = {|
     wallet? : ?Wallet,
     fundingEligibility : FundingEligibilityType,
     onShippingChange : ?OnShippingChange,
+    onShippingAddressChange : ?OnShippingAddressChange,
+    onShippingOptionsChange : ?OnShippingOptionsChange,
     i : number,
     nonce : string,
     userIDToken : ?string,

package/src/ui/buttons/buttons.jsx

@@ -12,7 +12,7 @@ import { ValidationError } from '../../lib';
 
 import { getButtonDesign } from './buttonDesigns';
 import { ButtonDesignExperimentScriptWrapper } from './buttonDesigns/script';
-import { normalizeButtonProps, type ButtonPropsInputs, type OnShippingChange } from './props';
+import { normalizeButtonProps, type ButtonPropsInputs, type OnShippingChange, type OnShippingAddressChange, type OnShippingOptionsChange } from './props';
 import { Style } from './style';
 import { Button } from './button';
 import { TagLine } from './tagline';
@@ -22,11 +22,13 @@ import { PoweredByPayPal } from './poweredBy';
 type GetWalletInstrumentOptions = {|
     wallet : ?Wallet,
     fundingSource : $Values<typeof FUNDING>,
-    onShippingChange : ?OnShippingChange
+    onShippingChange : ?OnShippingChange,
+    onShippingAddressChange : ?OnShippingAddressChange,
+    onShippingOptionsChange : ?OnShippingOptionsChange
 |};
 
-function getWalletInstrument({ wallet, fundingSource, onShippingChange } : GetWalletInstrumentOptions) : ?WalletInstrument {
-    if (!isWalletFundingEligible({ wallet, onShippingChange })) {
+function getWalletInstrument({ wallet, fundingSource, onShippingChange, onShippingAddressChange, onShippingOptionsChange } : GetWalletInstrumentOptions) : ?WalletInstrument {
+    if (!isWalletFundingEligible({ wallet, onShippingChange, onShippingAddressChange, onShippingOptionsChange })) {
         return;
     }
 
@@ -48,14 +50,16 @@ type GetWalletInstrumentsOptions = {|
     wallet : ?Wallet,
     fundingSources : $ReadOnlyArray<$Values<typeof FUNDING>>,
     onShippingChange : ?OnShippingChange,
+    onShippingAddressChange : ?OnShippingAddressChange,
+    onShippingOptionsChange : ?OnShippingOptionsChange,
     layout : $Values<typeof BUTTON_LAYOUT>
 |};
 
-function getWalletInstruments({ wallet, layout, fundingSources, onShippingChange } : GetWalletInstrumentsOptions) : {| [$Values<typeof FUNDING>] : WalletInstrument |} {
+function getWalletInstruments({ wallet, layout, fundingSources, onShippingChange, onShippingAddressChange, onShippingOptionsChange } : GetWalletInstrumentsOptions) : {| [$Values<typeof FUNDING>] : WalletInstrument |} {
 
     const instruments = {};
     for (const source of fundingSources) {
-        const instrument = getWalletInstrument({ wallet, fundingSource: source, onShippingChange });
+        const instrument = getWalletInstrument({ wallet, fundingSource: source, onShippingChange, onShippingAddressChange, onShippingOptionsChange });
 
         if (instrument) {
             instruments[source] = instrument;
@@ -99,10 +103,11 @@ export function validateButtonProps(props : ButtonPropsInputs) {
 export function Buttons(props : ButtonsProps) : ElementNode {
     const { onClick = noop } = props;
     const { wallet, fundingSource, style, locale, remembered, env, fundingEligibility, platform, commit, vault,
-        nonce, components, onShippingChange, personalization, userIDToken, content, flow, experiment, applePaySupport,
+        nonce, components, onShippingChange, onShippingAddressChange, onShippingOptionsChange, personalization, userIDToken, content, flow, experiment, applePaySupport,
         supportsPopups, supportedNativeBrowser, experience } = normalizeButtonProps(props);
     const { custom, layout, shape, tagline } = style;
-    const inlineExperience = experience === EXPERIENCE.INLINE && custom && custom.label;
+ 
+    const inlineExperience = experience === EXPERIENCE.INLINE && custom && custom.label && custom.label.length !== 0;
 
     let fundingSources = determineEligibleFunding({ fundingSource, layout, remembered, platform, fundingEligibility, components, onShippingChange, flow, wallet, applePaySupport, supportsPopups, supportedNativeBrowser, experiment });
     const multiple = fundingSources.length > 1;
@@ -119,7 +124,7 @@ export function Buttons(props : ButtonsProps) : ElementNode {
         }
     }
 
-    const instruments = getWalletInstruments({ wallet, fundingSources, layout, onShippingChange });
+    const instruments = getWalletInstruments({ wallet, fundingSources, layout, onShippingChange, onShippingAddressChange, onShippingOptionsChange });
 
     const isWallet = (
         flow === BUTTON_FLOW.PURCHASE &&
@@ -171,6 +176,8 @@ export function Buttons(props : ButtonsProps) : ElementNode {
                         fundingEligibility={ fundingEligibility }
                         wallet={ wallet }
                         onShippingChange={ onShippingChange }
+                        onShippingAddressChange={ onShippingAddressChange }
+                        onShippingOptionsChange={ onShippingOptionsChange }
                         onClick={ onClick }
                         userIDToken={ userIDToken }
                         personalization={ personalization }

package/src/ui/buttons/props.js

@@ -5,7 +5,7 @@ import { ZalgoPromise } from '@krakenjs/zalgo-promise/src';
 import { values, uniqueID } from '@krakenjs/belter/src';
 import { type OrderCreateRequest, type FundingEligibilityType,
     type OrderGetResponse, type OrderCaptureResponse, type OrderAuthorizeResponse } from '@paypal/sdk-client/src';
-import { FUNDING, PLATFORM, INTENT, COMMIT, VAULT,
+import { CURRENCY, FUNDING, PLATFORM, INTENT, COMMIT, VAULT,
     ENV, COUNTRY, LANG, COUNTRY_LANGS, type LocaleType, CARD, COMPONENTS } from '@paypal/sdk-constants/src';
 import { type CrossDomainWindowType } from '@krakenjs/cross-domain-utils/src';
 import { LOGO_COLOR } from '@paypal/sdk-logos/src';
@@ -81,7 +81,8 @@ type OnShippingChangeAddress = {|
     postal_code : string
 |};
 
-type OnShippingChangeMethod = {|
+type OnShippingChangeOption = {|
+    id? : string,
     label : string,
     type : string,
     amount : {|
@@ -90,12 +91,98 @@ type OnShippingChangeMethod = {|
     |}
 |};
 
+export type ON_SHIPPING_CHANGE_EVENT = 'add' | 'replace';
+
+export type ShippingOption = {|
+    id? : string,
+    label : string,
+    selected : boolean,
+    type : string,
+    amount : {|
+        currency_code : string,
+        value : string
+    |}
+|};
+
+export type Query = {|
+    op : ON_SHIPPING_CHANGE_EVENT,
+    path : string,
+    value : mixed
+|};
+
+export type Breakdown = {|
+    item_total? : {|
+        currency_code : $Values<typeof CURRENCY>,
+        value : string
+    |},
+    shipping? : {|
+        currency_code : $Values<typeof CURRENCY>,
+        value : string
+    |},
+    handling? : {|
+        currency_code : $Values<typeof CURRENCY>,
+        value : string
+    |},
+    tax_total? : {|
+        currency_code : $Values<typeof CURRENCY>,
+        value : string
+    |},
+    insurance? : {|
+        currency_code : $Values<typeof CURRENCY>,
+        value : string
+    |},
+    shipping_discount? : {|
+        currency_code : $Values<typeof CURRENCY>,
+        value : string
+    |},
+    discount? : {|
+        currency_code : $Values<typeof CURRENCY>,
+        value : string
+    |}
+|};
+
+export type ShippingAmount = {|
+    breakdown? : {|
+        item_total? : {|
+            currency_code : $Values<typeof CURRENCY>,
+            value : string
+        |},
+        shipping? : {|
+            currency_code : $Values<typeof CURRENCY>,
+            value : string
+        |},
+        handling? : {|
+            currency_code : $Values<typeof CURRENCY>,
+            value : string
+        |},
+        tax_total? : {|
+            currency_code : $Values<typeof CURRENCY>,
+            value : string
+        |},
+        insurance? : {|
+            currency_code : $Values<typeof CURRENCY>,
+            value : string
+        |},
+        shipping_discount? : {|
+            currency_code : $Values<typeof CURRENCY>,
+            value : string
+        |},
+        discount? : {|
+            currency_code : $Values<typeof CURRENCY>,
+            value : string
+        |}
+    |},
+    currency_code : $Values<typeof CURRENCY>,
+    value : string
+|};
+
 export type OnShippingChangeData = {|
     orderID : string,
     payerID : string,
     paymentID? : string,
     shipping_address : OnShippingChangeAddress,
-    selected_shipping_method : OnShippingChangeMethod
+    selected_shipping_option : OnShippingChangeOption,
+    amount? : ShippingAmount,
 |};
 
 export type OnShippingChangeActions = {|
@@ -106,6 +193,41 @@ export type OnShippingChangeActions = {|
 
 export type OnShippingChange = (data : OnShippingChangeData, actions : OnShippingChangeActions) => ZalgoPromise<void> | void;
 
+export type OnShippingAddressChangeData = {|
+    orderID : string,
+    payerID? : string,
+    paymentID? : string,
+    amount? : ShippingAmount,
+    event? : ON_SHIPPING_CHANGE_EVENT,
+    shipping_address : OnShippingChangeAddress
+|};
+
+export type OnShippingAddressChangeActions = {|
+    patch : () => ZalgoPromise<OrderGetResponse>,
+    query : () => $ReadOnlyArray<Query>,
+    updateShippingDiscount : ({| discountAmount : string |}) => ZalgoPromise<void> | void,
+    updateShippingOptions : ({| shippingOptions : $ReadOnlyArray<ShippingOption> |}) => ZalgoPromise<void> | void,
+    updateTax : ({| taxAmount : string |})
+|};
+
+export type OnShippingAddressChange = (data : OnShippingAddressChangeData, actions : OnShippingAddressChangeActions) => ZalgoPromise<void> | void;
+
+export type OnShippingOptionsChangeData = {|
+    orderID : string,
+    payerID : string,
+    paymentID? : string,
+    selected_shipping_option : OnShippingChangeOption
+|};
+export type OnShippingOptionsChangeActions = {|
+    patch : () => ZalgoPromise<OrderGetResponse>,
+    query : () => string,
+    updateShippingDiscount : ({| discountAmount : string |}) => ZalgoPromise<void> | void,
+    updateShippingOptions : ({| shippingOptions : $ReadOnlyArray<ShippingOption> |}) => ZalgoPromise<void> | void,
+    updateTax : ({| taxAmount : string |})
+|};
+
+export type OnShippingOptionsChange = (data : OnShippingOptionsChangeData, actions : OnShippingOptionsChangeActions) => ZalgoPromise<void> | void;
+
 export type OnCancelData = {|
     orderID : string,
     paymentID? : string
@@ -257,6 +379,8 @@ export type RenderButtonProps = {|
     nonce : string,
     components : $ReadOnlyArray<$Values<typeof COMPONENTS>>,
     onShippingChange : ?OnShippingChange,
+    onShippingAddressChange : ?OnShippingAddressChange,
+    onShippingOptionsChange : ?OnShippingOptionsChange,
     personalization : ?Personalization,
     clientAccessToken : ?string,
     content? : ContentType,
@@ -306,6 +430,8 @@ export type ButtonProps = {|
     sessionID : string,
     buttonSessionID : string,
     onShippingChange : ?OnShippingChange,
+    onShippingAddressChange : ?OnShippingAddressChange,
+    onShippingOptionsChange : ?OnShippingOptionsChange,
     clientAccessToken? : ?string,
     nonce : string,
     merchantID? : $ReadOnlyArray<string>,
@@ -344,6 +470,8 @@ export type ButtonPropsInputs = {
     nonce : string,
     components : $ReadOnlyArray<$Values<typeof COMPONENTS>>,
     onShippingChange : ?Function,
+    onShippingAddressChange : ?Function,
+    onShippingOptionsChange : ?Function,
     personalization? : Personalization,
     clientAccessToken? : ?string,
     wallet? : ?Wallet,
@@ -515,6 +643,8 @@ export function normalizeButtonProps(props : ?ButtonPropsInputs) : RenderButtonP
         components = [ COMPONENTS.BUTTONS ],
         nonce,
         onShippingChange,
+        onShippingAddressChange,
+        onShippingOptionsChange,
         personalization,
         clientAccessToken,
         content,
@@ -561,7 +691,7 @@ export function normalizeButtonProps(props : ?ButtonPropsInputs) : RenderButtonP
             throw new Error(`Invalid funding source: ${ fundingSource }`);
         }
 
-        if (!isFundingEligible(fundingSource, { platform, fundingSource, fundingEligibility, components, onShippingChange, flow, wallet, applePaySupport, supportsPopups, supportedNativeBrowser })) {
+        if (!isFundingEligible(fundingSource, { platform, fundingSource, fundingEligibility, components, onShippingChange, onShippingAddressChange, onShippingOptionsChange, wallet, flow, applePaySupport, supportsPopups, supportedNativeBrowser })) {
             throw new Error(`Funding Source not eligible: ${ fundingSource }`);
         }
     }
@@ -569,6 +699,6 @@ export function normalizeButtonProps(props : ?ButtonPropsInputs) : RenderButtonP
     style = normalizeButtonStyle(props, style);
 
     return { clientID, fundingSource, style, locale, remembered, env, fundingEligibility, platform, clientAccessToken,
-        buttonSessionID, commit, sessionID, nonce, components, onShippingChange, personalization, content, wallet, flow,
+        buttonSessionID, commit, sessionID, nonce, components, onShippingChange, onShippingAddressChange, onShippingOptionsChange, personalization, content, wallet, flow,
         experiment, vault, userIDToken, applePay, applePaySupport, supportsPopups, supportedNativeBrowser, experience };
 }

package/src/zoid/buttons/component.jsx

@@ -107,6 +107,8 @@ export const getButtonsComponent : () => ButtonsComponent = memoize(() => {
             const {
                 fundingSource,
                 onShippingChange,
+                onShippingAddressChange,
+                onShippingOptionsChange,
                 style = {},
                 fundingEligibility = getRefinedFundingEligibility(),
                 supportsPopups = userAgentSupportsPopups(),
@@ -133,7 +135,7 @@ export const getButtonsComponent : () => ButtonsComponent = memoize(() => {
             const platform           = getPlatform();
             const components         = getComponents();
 
-            if (isFundingEligible(fundingSource, { layout, platform, fundingSource, fundingEligibility, components, onShippingChange, flow, applePaySupport, supportsPopups, supportedNativeBrowser, experiment })) {
+            if (isFundingEligible(fundingSource, { layout, platform, fundingSource, fundingEligibility, components, onShippingChange, onShippingAddressChange, onShippingOptionsChange, flow, applePaySupport, supportsPopups, supportedNativeBrowser, experiment })) {
                 return {
                     eligible: true
                 };
@@ -163,7 +165,7 @@ export const getButtonsComponent : () => ButtonsComponent = memoize(() => {
                 required:   false,
 
                 validate: ({ props }) => {
-                    const { fundingSource, onShippingChange, style = {}, fundingEligibility = getRefinedFundingEligibility(),
+                    const { fundingSource, onShippingChange, onShippingAddressChange, onShippingOptionsChange, style = {}, fundingEligibility = getRefinedFundingEligibility(),
                         applePaySupport, supportsPopups, supportedNativeBrowser, createBillingAgreement, createSubscription } = props;
 
                     const flow = determineFlow({ createBillingAgreement, createSubscription });
@@ -172,7 +174,7 @@ export const getButtonsComponent : () => ButtonsComponent = memoize(() => {
                     const platform           = getPlatform();
                     const components         = getComponents();
 
-                    if (fundingSource && !isFundingEligible(fundingSource, { layout, platform, fundingSource, fundingEligibility, components, onShippingChange, flow, applePaySupport, supportsPopups, supportedNativeBrowser })) {
+                    if (fundingSource && !isFundingEligible(fundingSource, { layout, platform, fundingSource, fundingEligibility, components, onShippingChange, onShippingAddressChange, onShippingOptionsChange, flow, applePaySupport, supportsPopups, supportedNativeBrowser })) {
                         throw new Error(`${ fundingSource } is not eligible`);
                     }
                 }
@@ -258,6 +260,24 @@ export const getButtonsComponent : () => ButtonsComponent = memoize(() => {
                 }
             },
 
+            onShippingAddressChange: {
+                type:     'function',
+                required: false,
+                queryParam: true,
+                queryValue: ({ value }) => {
+                    return value ? QUERY_BOOL.TRUE : QUERY_BOOL.FALSE;
+                }
+            },
+
+            onShippingOptionsChange: {
+                type:     'function',
+                required: false,
+                queryParam: true,
+                queryValue: ({ value }) => {
+                    return value ? QUERY_BOOL.TRUE : QUERY_BOOL.FALSE;
+                }
+            },
+
             onCancel: {
                 type:     'function',
                 required: false
@@ -651,12 +671,45 @@ export const getButtonsComponent : () => ButtonsComponent = memoize(() => {
                 required:   false,
                 type:       'string',
                 value:      ({ props }) => {
-                    const { commit, createBillingAgreement, currency, disableFunding = [], fundingEligibility, locale, merchantID = [], style: { layout }, vault } = props || {};
+                    const { env, clientID, merchantID, commit, createBillingAgreement, currency, disableFunding = [], experience, fundingEligibility, locale, style: { layout }, vault } = props || {};
+
+                    if (experience === 'inline') {
+                        return EXPERIENCE.INLINE;
+                    }
 
                     const inlineCheckoutEligibility : InlineXOEligibilityType = __INLINE_CHECKOUT_ELIGIBILITY__ || {
                         eligible: false
                     };
-                    return inlineCheckoutEligibility &&  inlineCheckoutEligibility.eligible && isInlineXOEligible({ props: {
+
+                    let alphaEligible = true;
+                    if (env === 'sandbox') {
+                        const validMerchantIDs = [
+                            'PJEHAEK4YBEDJ',
+                            'RMADGM9SZGSPJ',
+                            '5AZBQ2LU7HVE6',
+                            'SMJKX2JD3V27L',
+                            'RB28JB2TP9RA4'
+                        ];
+                        const eligibleMerchantID = merchantID && merchantID.length && merchantID.reduce((acc, id) => {
+                            return acc && validMerchantIDs.indexOf(id) !== -1;
+                        }, true);
+
+                        alphaEligible = clientID === 'AbUf2xGyVtp8HedZjyx9we1V2eRV9-Q7bLTVfr9Y-FFpG8dbWAaQ0AFqeh2dq_HYHrV_1GUPXGv6GMKp'
+                            && eligibleMerchantID;
+                    } else if (env === 'production') {
+                        const validMerchantIDs = [
+                            'G4Z8SJD6PEZ2G'
+                        ];
+
+                        const eligibleMerchantID = merchantID && merchantID.length && merchantID.reduce((acc, id) => {
+                            return acc && validMerchantIDs.indexOf(id) !== -1;
+                        }, true);
+
+                        alphaEligible = clientID === 'AT2hsh6PFa_pvqYVni64Ik2Ojaluh_l9DU3KwXuHb-sgj8q9zZrmob2TUsmvu4rjJ869oHUAlIAqJf9R'
+                            && eligibleMerchantID;
+                    }
+
+                    return inlineCheckoutEligibility &&  inlineCheckoutEligibility.eligible && alphaEligible && isInlineXOEligible({ props: {
                         commit,
                         createBillingAgreement,
                         currency,
@@ -664,7 +717,6 @@ export const getButtonsComponent : () => ButtonsComponent = memoize(() => {
                         fundingEligibility,
                         layout,
                         locale,
-                        merchantID,
                         vault
                     } }) ? EXPERIENCE.INLINE : '';
                 }

package/src/zoid/buttons/util.js

@@ -151,7 +151,7 @@ export function getVenmoAppLabelExperiment() : EligibilityExperiment  {
 }
 
 export function getRenderedButtons(props : ButtonProps) : $ReadOnlyArray<$Values<typeof FUNDING>> {
-    const { fundingSource, onShippingChange, style = {}, fundingEligibility = getRefinedFundingEligibility(),
+    const { fundingSource, onShippingChange, onShippingAddressChange, onShippingOptionsChange, style = {}, fundingEligibility = getRefinedFundingEligibility(),
         experiment = getVenmoExperiment(), applePaySupport, supportsPopups = userAgentSupportsPopups(),
         supportedNativeBrowser = isSupportedNativeBrowser(), createBillingAgreement, createSubscription } = props;
 
@@ -161,7 +161,7 @@ export function getRenderedButtons(props : ButtonProps) : $ReadOnlyArray<$Values
     const platform           = getPlatform();
     const components         = getComponents();
 
-    const renderedButtons = determineEligibleFunding({ fundingSource, remembered, layout, platform, fundingEligibility, components, onShippingChange, flow, applePaySupport, supportsPopups, supportedNativeBrowser, experiment });
+    const renderedButtons = determineEligibleFunding({ fundingSource, remembered, layout, platform, fundingEligibility, components, onShippingChange, onShippingAddressChange, onShippingOptionsChange, flow, applePaySupport, supportsPopups, supportedNativeBrowser, experiment });
     return renderedButtons;
 }
 
@@ -306,11 +306,12 @@ type InlineCheckoutEligibilityProps = {|
     layout : $Values<typeof BUTTON_LAYOUT>,
     locale : LocaleType,
     merchantID? : $ReadOnlyArray<string>,
+    onComplete? : Function,
     vault : boolean
 |};
 
 export function isInlineXOEligible({ props } : {| props : InlineCheckoutEligibilityProps |}) : boolean {
-    const { commit, currency, createBillingAgreement, disableFunding, fundingEligibility, layout, locale, merchantID, vault } = props;
+    const { commit, currency, createBillingAgreement, disableFunding, fundingEligibility, layout, locale, vault } = props;
 
     const isEligible = (
         locale.country === COUNTRY.US &&
@@ -320,7 +321,6 @@ export function isInlineXOEligible({ props } : {| props : InlineCheckoutEligibil
         (disableFunding?.indexOf(FUNDING.CARD) === -1) &&
         (fundingEligibility?.card?.eligible || false) &&
         layout === BUTTON_LAYOUT.VERTICAL &&
-        merchantID?.length === 0 &&
         vault === false
     );
 

package/src/zoid/checkout/component.jsx

@@ -201,6 +201,16 @@ export function getCheckoutComponent() : CheckoutComponent {
                     type:     'function',
                     required: false
                 },
+        
+                onShippingAddressChange: {
+                    type:     'function',
+                    required: false
+                },
+        
+                onShippingOptionsChange: {
+                    type:     'function',
+                    required: false
+                },
 
                 clientMetadataID: {
                     type:       'string',