@paypal/checkout-components 5.0.297-alpha.0 → 5.0.297

package/src/zoid/buttons/component.jsx

@@ -39,6 +39,7 @@ import {
   getDisableSetCookie,
   getExperimentation,
   getSDKAttribute,
+  getSDKIntegrationSource,
 } from "@paypal/sdk-client/src";
 import {
   rememberFunding,
@@ -251,124 +252,121 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
     },
 
     props: {
-      /**
-       * Version of the SDK used in first render.
-       * This is passed to the `/smart/buttons` endpoint in order for the second render
-       * to be aware of what sdk version to load during SSR of the buttons
-       */
-      sdkVersion: {
-        type: "string",
+      // allowBillingPayments prop is used by Honey Extension to render the one-click button
+      // with payment methods & to use the payment methods instead of the Billing Agreement
+      allowBillingPayments: {
+        type: "boolean",
         queryParam: true,
-        sendToChild: false,
-        value: getVersion,
+        required: false,
+        default: () => true,
       },
-      fundingSource: {
+
+      amount: {
         type: "string",
-        queryParam: true,
         required: false,
+        queryParam: true,
+        value: getAmount,
+      },
 
-        validate: ({ props }) => {
-          const {
-            fundingSource,
-            onShippingChange,
-            onShippingAddressChange,
-            onShippingOptionsChange,
-            style = {},
-            fundingEligibility = getRefinedFundingEligibility(),
-            enableFunding = getEnableFunding(),
-            applePaySupport,
-            supportsPopups,
-            supportedNativeBrowser,
-            createBillingAgreement,
-            createSubscription,
-            createVaultSetupToken,
-          } = props;
-
-          const flow = determineFlow({
-            createBillingAgreement,
-            createSubscription,
-            createVaultSetupToken,
-          });
-          const { layout } = style;
+      apiStageHost: {
+        type: "string",
+        value: getAPIStageHost,
+        required: false,
+      },
 
-          const platform = getPlatform();
-          const components = getComponents();
+      applePay: {
+        type: "function",
+        required: false,
+        value: applePaySession,
+      },
 
-          if (
-            fundingSource &&
-            !isFundingEligible(fundingSource, {
-              layout,
-              platform,
-              fundingSource,
-              fundingEligibility,
-              enableFunding,
-              components,
-              onShippingChange,
-              onShippingAddressChange,
-              onShippingOptionsChange,
-              flow,
-              applePaySupport,
-              supportsPopups,
-              supportedNativeBrowser,
-            })
-          ) {
-            throw new Error(`${fundingSource} is not eligible`);
-          }
+      applePaySupport: {
+        type: "boolean",
+        value: ({ props }) => {
+          return props?.fundingEligibility?.applepay?.eligible
+            ? isApplePaySupported()
+            : false;
         },
+        queryParam: true,
       },
 
-      style: {
-        type: "object",
+      branded: {
+        type: "boolean",
         queryParam: true,
         required: false,
-        decorate: ({ props, value }) => {
-          // $FlowFixMe
-          return normalizeButtonStyle(props, value);
-        },
+      },
 
-        validate: ({ props, value = {} }) => {
-          // $FlowFixMe
-          normalizeButtonStyle(props, value);
-        },
+      buttonLocation: {
+        type: "string",
+        value: () => window.location.hostname,
+        queryParam: false,
+      },
 
-        default: () => ({}),
+      buttonSessionID: {
+        type: "string",
+        value: uniqueID,
+        queryParam: true,
       },
 
-      storageState: {
-        type: "object",
-        value: () => storageState,
+      buttonSize: {
+        type: "string",
+        required: false,
+        value: ({ props, container }) => {
+          return getButtonSize(props, container);
+        },
+        queryParam: true,
       },
 
-      sessionState: {
-        type: "object",
-        value: () => sessionState,
+      buyerCountry: {
+        type: "string",
+        queryParam: true,
+        required: false,
+        value: getBuyerCountry,
       },
 
-      components: {
-        type: "array",
+      clientAccessToken: {
+        type: "string",
+        required: false,
         queryParam: true,
-        value: getComponents,
+        value: getClientAccessToken,
       },
 
-      locale: {
-        type: "object",
+      clientID: {
+        type: "string",
+        value: getClientID,
         queryParam: true,
-        value: getLocale,
       },
 
-      sdkMeta: {
+      clientMetadataID: {
         type: "string",
+        required: false,
+        default: () => {
+          const clientMetadataId = getClientMetadataID();
+          const sessionID = getSessionID();
+
+          return clientMetadataId || sessionID;
+        },
         queryParam: true,
-        sendToChild: false,
-        value: getSDKMeta,
       },
 
-      createOrder: {
+      commit: {
+        type: "boolean",
+        queryParam: true,
+        value: getCommit,
+      },
+
+      components: {
+        type: "array",
+        queryParam: true,
+        value: getComponents,
+      },
+
+      createBillingAgreement: {
         type: "function",
         required: false,
       },
 
-      createBillingAgreement: {
+      createOrder: {
         type: "function",
         required: false,
       },
@@ -378,51 +376,185 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
         required: false,
       },
 
-      onApprove: {
+      createVaultSetupToken: {
         type: "function",
         required: false,
       },
 
-      onComplete: {
-        type: "function",
+      csp: {
+        type: "object",
         required: false,
+        value: () => {
+          return {
+            nonce: getCSPNonce(),
+          };
+        },
       },
 
-      onShippingChange: {
-        type: "function",
+      currency: {
+        type: "string",
+        queryParam: true,
+        value: getCurrency,
+      },
+
+      debug: {
+        type: "boolean",
+        value: getDebug,
+        queryParam: true,
+      },
+
+      disableCard: {
+        type: "array",
+        queryParam: true,
+        value: getDisableCard,
+      },
+
+      disableFunding: {
+        type: "array",
+        queryParam: true,
+        value: getDisableFunding,
+      },
+
+      disableSetCookie: {
+        type: "boolean",
+        queryParam: true,
         required: false,
+        value: getDisableSetCookie,
+      },
+
+      displayOnly: {
+        type: "array",
         queryParam: true,
-        queryValue: ({ value }) => {
-          return value ? QUERY_BOOL.TRUE : QUERY_BOOL.FALSE;
+        required: false,
+        value: ({ props }) => {
+          return props?.displayOnly || [];
         },
       },
 
-      onShippingAddressChange: {
-        type: "function",
-        required: false,
+      enableFunding: {
+        type: "array",
+        queryParam: true,
+        value: getEnableFunding,
       },
 
-      onShippingOptionsChange: {
-        type: "function",
+      enableThreeDomainSecure: {
+        type: "boolean",
+        value: getEnableThreeDomainSecure,
+      },
+
+      enableVault: {
+        type: "boolean",
         required: false,
+        queryParam: true,
       },
 
-      onCancel: {
-        type: "function",
+      env: {
+        type: "string",
+        queryParam: true,
+        value: getEnv,
+      },
+
+      experiment: {
+        type: "object",
+        queryParam: true,
+        value: () => {
+          const experiments = getButtonExperiments();
+          return experiments;
+        },
+      },
+
+      experimentation: {
+        type: "object",
+        queryParam: true,
         required: false,
+        value: getExperimentation,
       },
 
-      onClick: {
-        type: "function",
+      flow: {
+        type: "string",
+        queryParam: true,
+        value: ({ props }) => {
+          const {
+            createBillingAgreement,
+            createSubscription,
+            createVaultSetupToken,
+          } = props;
+          return determineFlow({
+            createBillingAgreement,
+            createSubscription,
+            createVaultSetupToken,
+          });
+        },
+      },
+
+      fundingEligibility: {
+        type: "object",
+        default: getRefinedFundingEligibility,
+        value: __ENV__ === ENV.LOCAL ? undefined : getRefinedFundingEligibility,
+        queryParam: true,
+        serialization: "base64",
+      },
+
+      fundingSource: {
+        type: "string",
+        queryParam: true,
         required: false,
+
+        validate: ({ props }) => {
+          const {
+            fundingSource,
+            onShippingChange,
+            onShippingAddressChange,
+            onShippingOptionsChange,
+            style = {},
+            fundingEligibility = getRefinedFundingEligibility(),
+            enableFunding = getEnableFunding(),
+            applePaySupport,
+            supportsPopups,
+            supportedNativeBrowser,
+            createBillingAgreement,
+            createSubscription,
+            createVaultSetupToken,
+          } = props;
+
+          const flow = determineFlow({
+            createBillingAgreement,
+            createSubscription,
+            createVaultSetupToken,
+          });
+          const { layout } = style;
+
+          const platform = getPlatform();
+          const components = getComponents();
+
+          if (
+            fundingSource &&
+            !isFundingEligible(fundingSource, {
+              layout,
+              platform,
+              fundingSource,
+              fundingEligibility,
+              enableFunding,
+              components,
+              onShippingChange,
+              onShippingAddressChange,
+              onShippingOptionsChange,
+              flow,
+              applePaySupport,
+              supportsPopups,
+              supportedNativeBrowser,
+            })
+          ) {
+            throw new Error(`${fundingSource} is not eligible`);
+          }
+        },
       },
 
-      getPrerenderDetails: {
+      getPageUrl: {
         type: "function",
-        value:
-          ({ state }) =>
-          () =>
-            state.prerenderDetails,
+        value: () => {
+          return () => window.location.href;
+        },
       },
 
       getPopupBridge: {
@@ -451,28 +583,12 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
         },
       },
 
-      onInit: {
+      getPrerenderDetails: {
         type: "function",
-        required: false,
-        default: () => noop,
-        decorate: ({ props, value = noop }) => {
-          logLatencyInstrumentationPhase({
-            buttonSessionID: props.buttonSessionID,
-            phase: "buttons-first-render",
-          });
-
-          return (...args) => {
-            const venmoExperiment = createVenmoExperiment();
-
-            if (venmoExperiment) {
-              venmoExperiment.logStart({
-                [FPTI_KEY.BUTTON_SESSION_UID]: props.buttonSessionID,
-              });
-            }
-
-            return value(...args);
-          };
-        },
+        value:
+          ({ state }) =>
+          () =>
+            state.prerenderDetails,
       },
 
       getQueriedEligibleFunding: {
@@ -482,220 +598,163 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
         },
       },
 
-      clientID: {
-        type: "string",
-        value: getClientID,
-        queryParam: true,
-      },
-
-      clientAccessToken: {
-        type: "string",
-        required: false,
-        queryParam: true,
-        value: getClientAccessToken,
-      },
-
-      partnerAttributionID: {
-        type: "string",
-        required: false,
-        value: getPartnerAttributionID,
-      },
-
-      merchantRequestedPopupsDisabled: {
-        type: "boolean",
-        required: false,
-        value: getMerchantRequestedPopupsDisabled,
-      },
-
-      enableThreeDomainSecure: {
-        type: "boolean",
-        value: getEnableThreeDomainSecure,
-      },
-
-      sdkCorrelationID: {
+      hostedButtonId: {
         type: "string",
         required: false,
-        value: getCorrelationID,
         queryParam: true,
       },
 
-      storageID: {
+      intent: {
         type: "string",
-        value: getStorageID,
         queryParam: true,
+        value: getIntent,
       },
 
-      sessionID: {
-        type: "string",
-        value: getSessionID,
+      locale: {
+        type: "object",
         queryParam: true,
+        value: getLocale,
       },
 
-      buttonLocation: {
-        type: "string",
-        value: () => window.location.hostname,
-        queryParam: false,
-      },
-
-      buttonSessionID: {
-        type: "string",
-        value: uniqueID,
+      merchantID: {
+        type: "array",
         queryParam: true,
+        value: getMerchantID,
       },
 
-      enableVault: {
+      merchantRequestedPopupsDisabled: {
         type: "boolean",
         required: false,
-        queryParam: true,
+        value: getMerchantRequestedPopupsDisabled,
       },
 
-      env: {
+      nonce: {
         type: "string",
-        queryParam: true,
-        value: getEnv,
+        default: getCSPNonce,
       },
 
-      amount: {
-        type: "string",
+      onApprove: {
+        type: "function",
         required: false,
-        queryParam: true,
-        value: getAmount,
       },
 
-      stageHost: {
-        type: "string",
-        value: getStageHost,
+      onCancel: {
+        type: "function",
         required: false,
       },
 
-      buttonSize: {
-        type: "string",
+      onClick: {
+        type: "function",
         required: false,
-        value: ({ props, container }) => {
-          return getButtonSize(props, container);
-        },
-        queryParam: true,
       },
 
-      apiStageHost: {
-        type: "string",
-        value: getAPIStageHost,
+      onComplete: {
+        type: "function",
         required: false,
       },
 
-      fundingEligibility: {
-        type: "object",
-        default: getRefinedFundingEligibility,
-        value: __ENV__ === ENV.LOCAL ? undefined : getRefinedFundingEligibility,
-        queryParam: true,
-        serialization: "base64",
-      },
+      onInit: {
+        type: "function",
+        required: false,
+        default: () => noop,
+        decorate: ({ props, value = noop }) => {
+          logLatencyInstrumentationPhase({
+            buttonSessionID: props.buttonSessionID,
+            phase: "buttons-first-render",
+          });
 
-      platform: {
-        type: "string",
-        queryParam: true,
-        value: getPlatform,
-      },
+          return (...args) => {
+            const venmoExperiment = createVenmoExperiment();
 
-      remembered: {
-        type: "array",
-        queryParam: true,
-        value: getRememberedFunding,
-      },
+            if (venmoExperiment) {
+              venmoExperiment.logStart({
+                [FPTI_KEY.BUTTON_SESSION_UID]: props.buttonSessionID,
+              });
+            }
 
-      experiment: {
-        type: "object",
-        queryParam: true,
-        value: () => {
-          const experiments = getButtonExperiments();
-          return experiments;
+            return value(...args);
+          };
         },
       },
 
-      paymentRequest: {
-        type: "object",
-        queryParam: false,
+      onShippingAddressChange: {
+        type: "function",
         required: false,
       },
 
-      flow: {
-        type: "string",
+      onShippingChange: {
+        type: "function",
+        required: false,
         queryParam: true,
-        value: ({ props }) => {
-          const {
-            createBillingAgreement,
-            createSubscription,
-            createVaultSetupToken,
-          } = props;
-          return determineFlow({
-            createBillingAgreement,
-            createSubscription,
-            createVaultSetupToken,
-          });
+        queryValue: ({ value }) => {
+          return value ? QUERY_BOOL.TRUE : QUERY_BOOL.FALSE;
         },
       },
 
-      remember: {
+      onShippingOptionsChange: {
         type: "function",
-        value: () => {
-          return (fundingSources: $ReadOnlyArray<$Values<typeof FUNDING>>) =>
-            rememberFunding(fundingSources, { cookie: false });
-        },
+        required: false,
       },
 
-      currency: {
+      pageType: {
         type: "string",
+        required: false,
         queryParam: true,
-        value: getCurrency,
+        value: () => getSDKAttribute(SDK_SETTINGS.PAGE_TYPE),
       },
 
-      intent: {
+      partnerAttributionID: {
         type: "string",
-        queryParam: true,
-        value: getIntent,
+        required: false,
+        value: getPartnerAttributionID,
       },
 
-      buyerCountry: {
+      paymentMethodNonce: {
         type: "string",
         queryParam: true,
         required: false,
-        value: getBuyerCountry,
       },
 
-      commit: {
-        type: "boolean",
+      paymentMethodToken: {
+        type: "string",
         queryParam: true,
-        value: getCommit,
+        required: false,
       },
 
-      vault: {
-        type: "boolean",
-        queryParam: true,
-        value: getVault,
+      paymentRequest: {
+        type: "object",
+        queryParam: false,
+        required: false,
       },
 
-      enableFunding: {
-        type: "array",
+      platform: {
+        type: "string",
         queryParam: true,
-        value: getEnableFunding,
+        value: getPlatform,
       },
 
-      disableFunding: {
-        type: "array",
-        queryParam: true,
-        value: getDisableFunding,
+      referrerDomain: {
+        type: "string",
+        required: false,
+        value: () => {
+          if (window.document.referrer) {
+            return new URL(window.document.referrer).host || undefined;
+          }
+        },
       },
 
-      disableCard: {
-        type: "array",
-        queryParam: true,
-        value: getDisableCard,
+      remember: {
+        type: "function",
+        value: () => {
+          return (fundingSources: $ReadOnlyArray<$Values<typeof FUNDING>>) =>
+            rememberFunding(fundingSources, { cookie: false });
+        },
       },
 
-      merchantID: {
+      remembered: {
         type: "array",
         queryParam: true,
-        value: getMerchantID,
+        value: getRememberedFunding,
       },
 
       renderedButtons: {
@@ -704,104 +763,87 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
         value: ({ props }) => getRenderedButtons(props),
       },
 
-      csp: {
-        type: "object",
-        required: false,
-        value: () => {
-          return {
-            nonce: getCSPNonce(),
-          };
-        },
-      },
-
-      nonce: {
+      sessionID: {
         type: "string",
-        default: getCSPNonce,
-      },
-
-      getPageUrl: {
-        type: "function",
-        value: () => {
-          return () => window.location.href;
-        },
+        value: getSessionID,
+        queryParam: true,
       },
 
-      referrerDomain: {
+      sdkCorrelationID: {
         type: "string",
         required: false,
-        value: () => {
-          if (window.document.referrer) {
-            return new URL(window.document.referrer).host || undefined;
-          }
-        },
+        value: getCorrelationID,
+        queryParam: true,
       },
 
-      userIDToken: {
+      sdkIntegrationSource: {
         type: "string",
-        default: getUserIDToken,
+        queryParam: true,
         required: false,
-        queryParam: getEnv() !== ENV.LOCAL && getEnv() !== ENV.STAGE,
-        bodyParam: getEnv() === ENV.LOCAL || getEnv() === ENV.STAGE,
+        value: getSDKIntegrationSource,
       },
 
-      clientMetadataID: {
+      sdkMeta: {
         type: "string",
-        required: false,
-        default: () => {
-          const clientMetadataId = getClientMetadataID();
-          const sessionID = getSessionID();
-
-          return clientMetadataId || sessionID;
-        },
         queryParam: true,
+        sendToChild: false,
+        value: getSDKMeta,
       },
 
-      debug: {
-        type: "boolean",
-        value: getDebug,
+      /**
+       * Version of the SDK used in first render.
+       * This is passed to the `/smart/buttons` endpoint in order for the second render
+       * to be aware of what sdk version to load during SSR of the buttons
+       */
+      sdkVersion: {
+        type: "string",
         queryParam: true,
+        sendToChild: false,
+        value: getVersion,
       },
 
-      test: {
+      sessionState: {
         type: "object",
-        default(): Object {
-          return {
-            action: "checkout",
-          };
-        },
+        value: () => sessionState,
       },
 
-      wallet: {
-        type: "object",
+      stageHost: {
+        type: "string",
+        value: getStageHost,
         required: false,
-        default: () => window.__TEST_WALLET__,
       },
 
-      paymentMethodNonce: {
+      storageID: {
         type: "string",
+        value: getStorageID,
         queryParam: true,
-        required: false,
       },
 
-      paymentMethodToken: {
-        type: "string",
-        queryParam: true,
-        required: false,
+      storageState: {
+        type: "object",
+        value: () => storageState,
       },
 
-      branded: {
-        type: "boolean",
+      style: {
+        type: "object",
         queryParam: true,
         required: false,
+        decorate: ({ props, value }) => {
+          // $FlowFixMe
+          return normalizeButtonStyle(props, value);
+        },
+
+        validate: ({ props, value = {} }) => {
+          // $FlowFixMe
+          normalizeButtonStyle(props, value);
+        },
+
+        default: () => ({}),
       },
 
-      applePaySupport: {
+      supportedNativeBrowser: {
         type: "boolean",
-        value: ({ props }) => {
-          return props?.fundingEligibility?.applepay?.eligible
-            ? isApplePaySupported()
-            : false;
-        },
+        value: isSupportedNativeBrowser,
         queryParam: true,
       },
 
@@ -811,10 +853,13 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
         queryParam: true,
       },
 
-      supportedNativeBrowser: {
-        type: "boolean",
-        value: isSupportedNativeBrowser,
-        queryParam: true,
+      test: {
+        type: "object",
+        default(): Object {
+          return {
+            action: "checkout",
+          };
+        },
       },
 
       userExperienceFlow: {
@@ -823,59 +868,24 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
         value: getUserExperienceFlow,
       },
 
-      applePay: {
-        type: "function",
-        required: false,
-        value: applePaySession,
-      },
-
-      // allowBillingPayments prop is used by Honey Extension to render the one-click button
-      // with payment methods & to use the payment methods instead of the Billing Agreement
-      allowBillingPayments: {
-        type: "boolean",
-        queryParam: true,
-        required: false,
-        default: () => true,
-      },
-      createVaultSetupToken: {
-        type: "function",
+      userIDToken: {
+        type: "string",
+        default: getUserIDToken,
         required: false,
+        queryParam: getEnv() !== ENV.LOCAL && getEnv() !== ENV.STAGE,
+        bodyParam: getEnv() === ENV.LOCAL || getEnv() === ENV.STAGE,
       },
 
-      disableSetCookie: {
+      vault: {
         type: "boolean",
         queryParam: true,
-        required: false,
-        value: getDisableSetCookie,
+        value: getVault,
       },
 
-      experimentation: {
+      wallet: {
         type: "object",
-        queryParam: true,
-        required: false,
-        value: getExperimentation,
-      },
-
-      hostedButtonId: {
-        type: "string",
-        required: false,
-        queryParam: true,
-      },
-
-      pageType: {
-        type: "string",
-        required: false,
-        queryParam: true,
-        value: () => getSDKAttribute(SDK_SETTINGS.PAGE_TYPE),
-      },
-
-      displayOnly: {
-        type: "array",
-        queryParam: true,
         required: false,
-        value: ({ props }) => {
-          return props?.displayOnly || [];
-        },
+        default: () => window.__TEST_WALLET__,
       },
     },
   });