feat(checkout): CHECKOUT-9388 Lazy load customer strategies by importing them on demand

Author: davidchin

packages/amazon-pay-v2-integration/src/AmazonPayV2Button.tsx

@@ -1,3 +1,4 @@
+import { createAmazonPayV2CustomerStrategy } from '@bigcommerce/checkout-sdk/integrations/amazon-pay';
 import React, { type FunctionComponent, useEffect } from 'react';
 
 import { CheckoutButton } from '@bigcommerce/checkout/checkout-button-integration';
@@ -33,9 +34,16 @@ const AmazonPayV2Button: FunctionComponent<CheckoutButtonProps> = (props) => {
         beautifyAmazonButton();
     }, []);
 
+    const additionalInitializationOptions = {
+        integrations: [createAmazonPayV2CustomerStrategy],
+    };
+
     return (
         <div className="AmazonPayContainer">
-            <CheckoutButton {...props} />
+            <CheckoutButton
+                additionalInitializationOptions={additionalInitializationOptions}
+                {...props}
+            />
         </div>
     );
 };

packages/bigcommerce-payments-integration/src/BigCommercePayments/BigCommercePaymentsButton.test.tsx

@@ -4,6 +4,7 @@ import {
     createCheckoutService,
     createLanguageService,
 } from '@bigcommerce/checkout-sdk';
+import { createBigCommercePaymentsCustomerStrategy } from '@bigcommerce/checkout-sdk/integrations';
 import React from 'react';
 
 import { type CheckoutButtonProps } from '@bigcommerce/checkout/payment-integration-api';
@@ -39,6 +40,7 @@ describe('BigCommercePaymentsButton', () => {
 
         expect(checkoutService.initializeCustomer).toHaveBeenCalledWith({
             methodId: defaultProps.methodId,
+            integrations: [createBigCommercePaymentsCustomerStrategy],
             bigcommerce_payments: {
                 container: 'bigcommerce-payments-button-container',
                 onClick: expect.any(Function),

packages/bigcommerce-payments-integration/src/BigCommercePayments/BigCommercePaymentsButton.tsx

@@ -1,3 +1,4 @@
+import { createBigCommercePaymentsCustomerStrategy } from '@bigcommerce/checkout-sdk/integrations/bigcommerce-payments';
 import React, { type FunctionComponent } from 'react';
 
 import { CheckoutButton } from '@bigcommerce/checkout/checkout-button-integration';
@@ -12,6 +13,7 @@ const BigCommercePaymentsButton: FunctionComponent<CheckoutButtonProps> = (props
     const additionalInitializationOptions = {
         onComplete: navigateToOrderConfirmation,
         onError: props.onUnhandledError,
+        integrations: [createBigCommercePaymentsCustomerStrategy],
     };
 
     return (

packages/bigcommerce-payments-integration/src/BigCommercePaymentsPayLater/BigcommercePaymentsPayLaterButton.test.tsx

@@ -4,6 +4,7 @@ import {
     createCheckoutService,
     createLanguageService,
 } from '@bigcommerce/checkout-sdk';
+import { createBigCommercePaymentsPayLaterCustomerStrategy } from '@bigcommerce/checkout-sdk/integrations';
 import React from 'react';
 
 import { type CheckoutButtonProps } from '@bigcommerce/checkout/payment-integration-api';
@@ -39,6 +40,7 @@ describe('BigcommercePaymentsPayLaterButton', () => {
 
         expect(checkoutService.initializeCustomer).toHaveBeenCalledWith({
             methodId: defaultProps.methodId,
+            integrations: [createBigCommercePaymentsPayLaterCustomerStrategy],
             bigcommerce_payments_paylater: {
                 container: 'bigcommerce-payments-paylater-button-container',
                 onClick: expect.any(Function),

packages/bigcommerce-payments-integration/src/BigCommercePaymentsPayLater/BigcommercePaymentsPayLaterButton.tsx

@@ -1,3 +1,4 @@
+import { createBigCommercePaymentsPayLaterCustomerStrategy } from '@bigcommerce/checkout-sdk/integrations/bigcommerce-payments';
 import React, { type FunctionComponent } from 'react';
 
 import { CheckoutButton } from '@bigcommerce/checkout/checkout-button-integration';
@@ -12,6 +13,7 @@ const BigcommercePaymentsPayLaterButton: FunctionComponent<CheckoutButtonProps>
     const additionalInitializationOptions = {
         onComplete: navigateToOrderConfirmation,
         onError: props.onUnhandledError,
+        integrations: [createBigCommercePaymentsPayLaterCustomerStrategy],
     };
 
     return (

packages/bolt-integration/src/BoltEmbeddedPaymentMethod.tsx

@@ -1,4 +1,8 @@
-import { createBoltPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/bolt';
+import { type CustomerInitializeOptions } from '@bigcommerce/checkout-sdk';
+import {
+    createBoltCustomerStrategy,
+    createBoltPaymentStrategy,
+} from '@bigcommerce/checkout-sdk/integrations/bolt';
 import React, { type FunctionComponent, useCallback, useState } from 'react';
 
 import { HostedWidgetPaymentComponent } from '@bigcommerce/checkout/hosted-widget-integration';
@@ -49,6 +53,16 @@ const BoltEmbeddedPaymentMethod: FunctionComponent<PaymentMethodProps> = ({
         [checkoutService, boltEmbeddedContainerId, setFieldValue],
     );
 
+    const initializeBoltCustomer = useCallback(
+        (options: CustomerInitializeOptions) => {
+            return checkoutService.initializeCustomer({
+                ...options,
+                integrations: [createBoltCustomerStrategy],
+            });
+        },
+        [checkoutService],
+    );
+
     const renderCustomPaymentForm = useCallback(
         () => (
             <BoltCustomForm
@@ -73,6 +87,7 @@ const BoltEmbeddedPaymentMethod: FunctionComponent<PaymentMethodProps> = ({
             deinitializePayment={checkoutService.deinitializePayment}
             disableSubmit={disableSubmit}
             hidePaymentSubmitButton={hidePaymentSubmitButton}
+            initializeCustomer={initializeBoltCustomer}
             initializePayment={initializeBoltPayment}
             instruments={instruments}
             isInitializing={isInitializingPayment()}

packages/checkout-button-integration/src/CheckoutButton.tsx

@@ -14,11 +14,13 @@ const CheckoutButton: FunctionComponent<CheckoutButtonProps> = ({
     onUnhandledError,
     onWalletButtonClick,
     additionalInitializationOptions,
+    integrations,
 }) => {
     const initializeCustomerStrategyOrThrow = async () => {
         try {
             await initializeCustomer({
                 methodId,
+                integrations,
                 [methodId]: {
                     container: containerId,
                     onUnhandledError,

packages/core/src/app/customer/CheckoutButtonContainer.tsx

@@ -1,6 +1,6 @@
 import { type CheckoutSelectors, type CheckoutService } from '@bigcommerce/checkout-sdk';
 import classNames from 'classnames';
-import React, { type FunctionComponent, memo, Suspense } from 'react';
+import React, { type FunctionComponent, lazy, memo, Suspense } from 'react';
 
 import { TranslatedString, useLocale } from '@bigcommerce/checkout/locale';
 import { type CheckoutContextProps } from '@bigcommerce/checkout/payment-integration-api';
@@ -10,7 +10,8 @@ import { withCheckout } from '../checkout';
 
 import { getSupportedMethodIds } from './getSupportedMethods';
 import resolveCheckoutButton from './resolveCheckoutButton';
-import CheckoutButtonV1Resolver from './WalletButtonV1Resolver';
+
+const CheckoutButtonV1Resolver = lazy(() => import(/* webpackChunkName: "wallet-button-v1-resolver" */'./WalletButtonV1Resolver'));
 
 interface CheckoutButtonContainerProps {
     isPaymentStepActive: boolean;

packages/core/src/app/customer/CheckoutButtonList.tsx

@@ -5,7 +5,7 @@ import {
     type CustomerRequestOptions,
 } from '@bigcommerce/checkout-sdk';
 import { noop } from 'lodash';
-import React, { type FunctionComponent, memo } from 'react';
+import React, { type FunctionComponent, lazy, memo } from 'react';
 
 import { TranslatedString, useLocale } from '@bigcommerce/checkout/locale';
 import { type CheckoutContextProps } from '@bigcommerce/checkout/payment-integration-api';
@@ -15,7 +15,8 @@ import { withCheckout } from '../checkout';
 
 import { getSupportedMethodIds } from './getSupportedMethods';
 import resolveCheckoutButton from './resolveCheckoutButton';
-import CheckoutButtonV1Resolver from './WalletButtonV1Resolver';
+
+const CheckoutButtonV1Resolver = lazy(() => import(/* webpackChunkName: "wallet-button-v1-resolver" */'./WalletButtonV1Resolver'));
 
 export interface CheckoutButtonListProps {
     hideText?: boolean;

packages/core/src/app/customer/Customer.tsx

@@ -9,8 +9,12 @@ import {
     type FormField,
     type GuestCredentials,
     type SignInEmail,
-    type StoreConfig,
 } from '@bigcommerce/checkout-sdk';
+import { createBigCommercePaymentsFastlaneCustomerStrategy } from '@bigcommerce/checkout-sdk/integrations/bigcommerce-payments';
+import { createBoltCustomerStrategy } from '@bigcommerce/checkout-sdk/integrations/bolt';
+import { createBraintreeFastlaneCustomerStrategy } from '@bigcommerce/checkout-sdk/integrations/braintree';
+import { createPayPalCommerceFastlaneCustomerStrategy } from '@bigcommerce/checkout-sdk/integrations/paypal-commerce';
+import { createStripeLinkV2CustomerStrategy, createStripeUPECustomerStrategy } from '@bigcommerce/checkout-sdk/integrations/stripe';
 import { noop } from 'lodash';
 import React, { Component, type ReactNode } from 'react';
 
@@ -128,7 +132,18 @@ class Customer extends Component<CustomerProps & WithCheckoutCustomerProps & Ana
 
         try {
             if (providerWithCustomCheckout && providerWithCustomCheckout !== PaymentMethodId.StripeUPE) {
-                await initializeCustomer({ methodId: providerWithCustomCheckout });
+                // TODO: Split out into separate chunks so they can be lazy loaded
+                await initializeCustomer({
+                    methodId: providerWithCustomCheckout,
+                    integrations: [
+                        createBigCommercePaymentsFastlaneCustomerStrategy,
+                        createBraintreeFastlaneCustomerStrategy,
+                        createPayPalCommerceFastlaneCustomerStrategy,
+                        createBoltCustomerStrategy,
+                        createStripeUPECustomerStrategy,
+                        createStripeLinkV2CustomerStrategy,
+                    ],
+                });
             }
         } catch (error) {
             onUnhandledError(error);
@@ -589,7 +604,7 @@ export function mapToWithCheckoutCustomerProps({
             isExpressPrivacyPolicy,
             shouldRedirectToStorefrontForAuth
         },
-    } = config as StoreConfig & { checkoutSettings: { isAccountCreationEnabled: boolean } };
+    } = config;
 
     const providerWithCustomCheckout = getProviderWithCustomCheckout(
         config.checkoutSettings.providerWithCustomCheckout,