feat(checkout): CHECKOUT-9388 Lazy load customer strategies

davidchin · davidchin · commit 9c8e772f1fe7 · 2025-07-31T16:29:58.000+10:00
diff --git a/packages/amazon-pay-v2-integration/src/AmazonPayV2Button.tsx b/packages/amazon-pay-v2-integration/src/AmazonPayV2Button.tsx
@@ -1,3 +1,4 @@
+import { createAmazonPayV2CustomerStrategy } from '@bigcommerce/checkout-sdk/integrations';
 import React, { FunctionComponent, useEffect } from 'react';
 
 import { CheckoutButton } from '@bigcommerce/checkout/checkout-button-integration';
@@ -35,7 +36,7 @@ const AmazonPayV2Button: FunctionComponent<CheckoutButtonProps> = (props) => {
 
     return (
         <div className="AmazonPayContainer">
-            <CheckoutButton {...props} />
+            <CheckoutButton {...props} integrations={[createAmazonPayV2CustomerStrategy]} />
         </div>
     );
 };
diff --git a/packages/bigcommerce-payments-integration/src/BigCommercePayments/BigCommercePaymentsButton.test.tsx b/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 { 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),
diff --git a/packages/bigcommerce-payments-integration/src/BigCommercePayments/BigCommercePaymentsButton.tsx b/packages/bigcommerce-payments-integration/src/BigCommercePayments/BigCommercePaymentsButton.tsx
@@ -1,3 +1,4 @@
+import { createBigCommercePaymentsCustomerStrategy } from '@bigcommerce/checkout-sdk/integrations';
 import React, { FunctionComponent } from 'react';
 
 import { CheckoutButton } from '@bigcommerce/checkout/checkout-button-integration';
@@ -18,6 +19,7 @@ const BigCommercePaymentsButton: FunctionComponent<CheckoutButtonProps> = (props
         <CheckoutButton
             additionalInitializationOptions={additionalInitializationOptions}
             {...props}
+            integrations={[createBigCommercePaymentsCustomerStrategy]}
         />
     );
 };
diff --git a/packages/bigcommerce-payments-integration/src/BigCommercePaymentsPayLater/BigcommercePaymentsPayLaterButton.test.tsx b/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 { 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),
diff --git a/packages/bigcommerce-payments-integration/src/BigCommercePaymentsPayLater/BigcommercePaymentsPayLaterButton.tsx b/packages/bigcommerce-payments-integration/src/BigCommercePaymentsPayLater/BigcommercePaymentsPayLaterButton.tsx
@@ -1,3 +1,4 @@
+import { createBigCommercePaymentsPayLaterCustomerStrategy } from '@bigcommerce/checkout-sdk/integrations';
 import React, { FunctionComponent } from 'react';
 
 import { CheckoutButton } from '@bigcommerce/checkout/checkout-button-integration';
@@ -18,6 +19,7 @@ const BigcommercePaymentsPayLaterButton: FunctionComponent<CheckoutButtonProps>
         <CheckoutButton
             additionalInitializationOptions={additionalInitializationOptions}
             {...props}
+            integrations={[createBigCommercePaymentsPayLaterCustomerStrategy]}
         />
     );
 };
diff --git a/packages/bolt-integration/src/BoltEmbeddedPaymentMethod.tsx b/packages/bolt-integration/src/BoltEmbeddedPaymentMethod.tsx
@@ -1,4 +1,8 @@
-import { createBoltPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations';
+import { CustomerInitializeOptions } from '@bigcommerce/checkout-sdk';
+import {
+    createBoltCustomerStrategy,
+    createBoltPaymentStrategy,
+} from '@bigcommerce/checkout-sdk/integrations';
 import React, { 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()}
diff --git a/packages/checkout-button-integration/src/CheckoutButton.tsx b/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,
diff --git a/packages/core/src/app/customer/CheckoutButtonContainer.tsx b/packages/core/src/app/customer/CheckoutButtonContainer.tsx
@@ -1,6 +1,6 @@
 import { CheckoutSelectors, CheckoutService } from '@bigcommerce/checkout-sdk';
 import classNames from 'classnames';
-import React, { FunctionComponent, memo } from 'react';
+import React, { FunctionComponent, lazy, memo } from 'react';
 
 import { TranslatedString, useLocale } from '@bigcommerce/checkout/locale';
 import { CheckoutContextProps , useStyleContext } 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;
diff --git a/packages/core/src/app/customer/CheckoutButtonList.tsx b/packages/core/src/app/customer/CheckoutButtonList.tsx
@@ -6,7 +6,7 @@ import {
     CustomerRequestOptions,
 } from '@bigcommerce/checkout-sdk';
 import { noop } from 'lodash';
-import React, { FunctionComponent, memo } from 'react';
+import React, { FunctionComponent, lazy, memo } from 'react';
 
 import { TranslatedString, useLocale } from '@bigcommerce/checkout/locale';
 import { CheckoutContextProps } from '@bigcommerce/checkout/payment-integration-api';
@@ -16,8 +16,8 @@ import { withCheckout } from '../checkout';
 
 import { getSupportedMethodIds } from './getSupportedMethods';
 import resolveCheckoutButton from './resolveCheckoutButton';
-import CheckoutButtonV1Resolver from './WalletButtonV1Resolver';
-import { LazyContainer } from '@bigcommerce/checkout/ui';
+
+const CheckoutButtonV1Resolver = lazy(() => import(/* webpackChunkName: "wallet-button-v1-resolver" */'./WalletButtonV1Resolver'));
 
 export interface CheckoutButtonListProps {
     checkoutSettings: CheckoutSettings;
diff --git a/packages/core/src/app/customer/Customer.tsx b/packages/core/src/app/customer/Customer.tsx
@@ -11,6 +11,7 @@ import {
     SignInEmail,
     StoreConfig,
 } from '@bigcommerce/checkout-sdk';
+import { createBigCommercePaymentsFastlaneCustomerStrategy, createBoltCustomerStrategy, createBraintreeFastlaneCustomerStrategy, createPayPalCommerceFastlaneCustomerStrategy, createStripeLinkV2CustomerStrategy, createStripeUPECustomerStrategy } from '@bigcommerce/checkout-sdk/integrations';
 import { noop } from 'lodash';
 import React, { Component, ReactNode } from 'react';
 
@@ -128,7 +129,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);
diff --git a/packages/core/src/app/customer/StripeGuestForm.tsx b/packages/core/src/app/customer/StripeGuestForm.tsx
@@ -13,6 +13,7 @@ import { BasicFormField, Fieldset, Form, Legend } from '../ui/form';
 
 import { GuestFormValues } from './GuestForm';
 import SubscribeField from './SubscribeField';
+import { createStripeUPECustomerStrategy } from '@bigcommerce/checkout-sdk/integrations';
 
 export interface StripeGuestFormProps {
     canSubscribe: boolean;
@@ -99,6 +100,7 @@ const StripeGuestForm: FunctionComponent<StripeGuestFormProps & FormikProps<Gues
     const stripeInitialize = () => {
         initialize( {
             methodId: 'stripeupe',
+            integrations: [createStripeUPECustomerStrategy],
             stripeupe: {
                 container: 'stripeupeLink',
                 onEmailChange: setEmailCallback,
diff --git a/packages/core/src/app/customer/WalletButtonV1Resolver.tsx b/packages/core/src/app/customer/WalletButtonV1Resolver.tsx
@@ -1,5 +1,6 @@
 import { CustomerInitializeOptions, CustomerRequestOptions } from "@bigcommerce/checkout-sdk";
-import React, { FunctionComponent } from "react";
+import { createBigCommercePaymentsFastlaneCustomerStrategy, createBigCommercePaymentsVenmoCustomerStrategy, createBoltCustomerStrategy, createBraintreeFastlaneCustomerStrategy, createBraintreePaypalCreditCustomerStrategy, createBraintreePaypalCustomerStrategy, createBraintreeVisaCheckoutCustomerStrategy, createPayPalCommerceFastlaneCustomerStrategy, createPayPalCommerceVenmoCustomerStrategy, createStripeLinkV2CustomerStrategy, createStripeUPECustomerStrategy } from "@bigcommerce/checkout-sdk/integrations";
+import React, { FunctionComponent, useCallback } from "react";
 
 import CheckoutButton from "./CheckoutButton";
 import { ApplePayButton } from "./customWalletButton";
@@ -15,15 +16,39 @@ interface CheckoutButtonV1ResolverProps {
 
 const CheckoutButtonV1Resolver: FunctionComponent<CheckoutButtonV1ResolverProps> = ({
     isShowingWalletButtonsOnTop= false,
+    initialize,
     onError,
     methodId,
     ...rest
 }) => {
+    const initializeWithIntegrations = useCallback(
+        (options: CustomerInitializeOptions) => {
+            return initialize({
+                ...options,
+                integrations: [
+                    createBigCommercePaymentsFastlaneCustomerStrategy,
+                    createBigCommercePaymentsVenmoCustomerStrategy,
+                    createBoltCustomerStrategy,
+                    createBraintreePaypalCustomerStrategy,
+                    createBraintreePaypalCreditCustomerStrategy,
+                    createBraintreeFastlaneCustomerStrategy,
+                    createBraintreeVisaCheckoutCustomerStrategy,
+                    createPayPalCommerceVenmoCustomerStrategy,
+                    createPayPalCommerceFastlaneCustomerStrategy,
+                    createStripeUPECustomerStrategy,
+                    createStripeLinkV2CustomerStrategy,
+                ],
+            });
+        },
+        [initialize],
+    );
+
     switch (methodId) {
         case 'applepay':
             return (
                 <ApplePayButton
                     containerId={`${methodId}CheckoutButton`}
+                    initialize={initialize}
                     key={methodId}
                     methodId={methodId}
                     onError={onError}
@@ -34,6 +59,7 @@ const CheckoutButtonV1Resolver: FunctionComponent<CheckoutButtonV1ResolverProps>
 
     return <CheckoutButton
             containerId={`${methodId}CheckoutButton`}
+            initialize={initializeWithIntegrations}
             isShowingWalletButtonsOnTop={isShowingWalletButtonsOnTop}
             key={methodId}
             methodId={methodId}
diff --git a/packages/core/src/app/customer/checkoutSuggestion/BoltCheckoutSuggestion.test.tsx b/packages/core/src/app/customer/checkoutSuggestion/BoltCheckoutSuggestion.test.tsx
@@ -1,4 +1,5 @@
 import { createCheckoutService } from '@bigcommerce/checkout-sdk';
+import { createBoltCustomerStrategy } from '@bigcommerce/checkout-sdk/integrations';
 import userEvent from '@testing-library/user-event';
 import React, { act, FunctionComponent } from 'react';
 
@@ -49,6 +50,7 @@ describe('BoltCheckoutSuggestion', () => {
         const deinitializeOptions = { methodId: 'bolt' };
         const initializeOptions = {
             methodId: 'bolt',
+            integrations: [createBoltCustomerStrategy],
             bolt: {
                 onInit: expect.any(Function),
             },
diff --git a/packages/core/src/app/customer/checkoutSuggestion/BoltCheckoutSuggestion.tsx b/packages/core/src/app/customer/checkoutSuggestion/BoltCheckoutSuggestion.tsx
@@ -4,6 +4,7 @@ import {
     CustomerRequestOptions,
     ExecutePaymentMethodCheckoutOptions,
 } from '@bigcommerce/checkout-sdk';
+import { createBoltCustomerStrategy } from '@bigcommerce/checkout-sdk/integrations';
 import { noop } from 'lodash';
 import React, { FunctionComponent, memo, useEffect, useState } from 'react';
 
@@ -42,6 +43,7 @@ const BoltCheckoutSuggestion: FunctionComponent<BoltCheckoutSuggestionProps> = (
         try {
             initializeCustomer({
                 methodId,
+                integrations: [createBoltCustomerStrategy],
                 bolt: {
                     onInit: (hasBoltAccount, email) => {
                         setShowSuggestion(hasBoltAccount);
diff --git a/packages/core/src/app/customer/checkoutSuggestion/CheckoutSuggestion.test.tsx b/packages/core/src/app/customer/checkoutSuggestion/CheckoutSuggestion.test.tsx
@@ -3,6 +3,7 @@ import {
     CheckoutService,
     createCheckoutService,
 } from '@bigcommerce/checkout-sdk';
+import { createBoltCustomerStrategy } from '@bigcommerce/checkout-sdk/integrations';
 import React, { FunctionComponent } from 'react';
 
 import { AnalyticsProviderMock } from '@bigcommerce/checkout/analytics';
@@ -67,6 +68,7 @@ describe('CheckoutSuggestion', () => {
 
         expect(defaultProps.initializeCustomer).toHaveBeenCalledWith({
             methodId: 'bolt',
+            integrations: [createBoltCustomerStrategy],
             bolt: {
                 onInit: expect.any(Function),
             },
diff --git a/packages/core/src/app/customer/customWalletButton/ApplePayButton.tsx b/packages/core/src/app/customer/customWalletButton/ApplePayButton.tsx
@@ -1,4 +1,5 @@
 import { CustomerInitializeOptions } from '@bigcommerce/checkout-sdk';
+import { createApplePayCustomerStrategy } from '@bigcommerce/checkout-sdk/integrations';
 import { noop } from 'lodash';
 import React, { FunctionComponent, useCallback, useContext } from 'react';
 
@@ -18,6 +19,7 @@ const ApplePayButton: FunctionComponent<CheckoutButtonProps> = ({
         (options: CustomerInitializeOptions) =>
             initialize({
                 ...options,
+                integrations: [createApplePayCustomerStrategy],
                 applepay: {
                     container: rest.containerId,
                     shippingLabel: localeContext?.language.translate('cart.shipping_text'),
diff --git a/packages/google-pay-integration/src/GooglePayButton.tsx b/packages/google-pay-integration/src/GooglePayButton.tsx
@@ -1,3 +1,19 @@
+import {
+    createGooglePayAdyenV2CustomerStrategy,
+    createGooglePayAdyenV3CustomerStrategy,
+    createGooglePayAuthorizeDotNetCustomerStrategy,
+    createGooglePayBigCommercePaymentsCustomerStrategy,
+    createGooglePayBnzCustomerStrategy,
+    createGooglePayBraintreeCustomerStrategy,
+    createGooglePayCheckoutComCustomerStrategy,
+    createGooglePayCybersourceCustomerStrategy,
+    createGooglePayOrbitalCustomerStrategy,
+    createGooglePayPayPalCommerceCustomerStrategy,
+    createGooglePayStripeCustomerStrategy,
+    createGooglePayStripeUpeCustomerStrategy,
+    createGooglePayTdOnlineMartCustomerStrategy,
+    createGooglePayWorldpayAccessCustomerStrategy,
+} from '@bigcommerce/checkout-sdk/integrations';
 import React, { FunctionComponent } from 'react';
 
 import { CheckoutButton } from '@bigcommerce/checkout/checkout-button-integration';
@@ -26,7 +42,28 @@ const GooglePayButton: FunctionComponent<CheckoutButtonProps> = (props) => {
         return null;
     }
 
-    return <CheckoutButton checkoutButtonContainerClass="google-pay-top-button" {...props} />;
+    return (
+        <CheckoutButton
+            checkoutButtonContainerClass="google-pay-top-button"
+            {...props}
+            integrations={[
+                createGooglePayAdyenV2CustomerStrategy,
+                createGooglePayAdyenV3CustomerStrategy,
+                createGooglePayAuthorizeDotNetCustomerStrategy,
+                createGooglePayCheckoutComCustomerStrategy,
+                createGooglePayCybersourceCustomerStrategy,
+                createGooglePayBnzCustomerStrategy,
+                createGooglePayOrbitalCustomerStrategy,
+                createGooglePayStripeCustomerStrategy,
+                createGooglePayStripeUpeCustomerStrategy,
+                createGooglePayWorldpayAccessCustomerStrategy,
+                createGooglePayBraintreeCustomerStrategy,
+                createGooglePayPayPalCommerceCustomerStrategy,
+                createGooglePayBigCommercePaymentsCustomerStrategy,
+                createGooglePayTdOnlineMartCustomerStrategy,
+            ]}
+        />
+    );
 };
 
 export default toResolvableComponent<CheckoutButtonProps, CheckoutButtonResolveId>(
diff --git a/packages/payment-integration-api/src/CheckoutButtonProps.tsx b/packages/payment-integration-api/src/CheckoutButtonProps.tsx
@@ -1,4 +1,9 @@
-import { CheckoutSelectors, CheckoutService, LanguageService } from '@bigcommerce/checkout-sdk';
+import {
+    CheckoutSelectors,
+    CheckoutService,
+    CustomerInitializeOptions,
+    LanguageService,
+} from '@bigcommerce/checkout-sdk';
 
 export default interface CheckoutButtonProps {
     methodId: string;
@@ -8,6 +13,7 @@ export default interface CheckoutButtonProps {
     checkoutButtonContainerClass?: string;
     additionalInitializationOptions?: Record<string, unknown>;
     language: LanguageService;
+    integrations?: CustomerInitializeOptions['integrations'];
     onUnhandledError(error: Error): void;
     onWalletButtonClick(methodName: string): void;
 }
diff --git a/packages/paypal-commerce-integration/src/PayPalCommerce/PayPalCommerceButton.test.tsx b/packages/paypal-commerce-integration/src/PayPalCommerce/PayPalCommerceButton.test.tsx
diff --git a/packages/paypal-commerce-integration/src/PayPalCommerce/PayPalCommerceButton.tsx b/packages/paypal-commerce-integration/src/PayPalCommerce/PayPalCommerceButton.tsx
diff --git a/packages/paypal-commerce-integration/src/PayPalCommerceCredit/PayPalCommerceCreditButton.test.tsx b/packages/paypal-commerce-integration/src/PayPalCommerceCredit/PayPalCommerceCreditButton.test.tsx
diff --git a/packages/paypal-commerce-integration/src/PayPalCommerceCredit/PayPalCommerceCreditButton.tsx b/packages/paypal-commerce-integration/src/PayPalCommerceCredit/PayPalCommerceCreditButton.tsx
diff --git a/packages/stripe-integration/src/stripe-ocs/StripeLinkV2Button.test.tsx b/packages/stripe-integration/src/stripe-ocs/StripeLinkV2Button.test.tsx
diff --git a/packages/stripe-integration/src/stripe-ocs/StripeLinkV2Button.tsx b/packages/stripe-integration/src/stripe-ocs/StripeLinkV2Button.tsx
diff --git a/packages/stripe-integration/src/stripe-ocs/StripeOCSPaymentMethod.tsx b/packages/stripe-integration/src/stripe-ocs/StripeOCSPaymentMethod.tsx
diff --git a/packages/stripe-integration/src/stripe-upe/StripeUPEPaymentMethod.tsx b/packages/stripe-integration/src/stripe-upe/StripeUPEPaymentMethod.tsx
diff --git a/packages/stripe-integration/src/stripev3/StripeV3PaymentMethod.tsx b/packages/stripe-integration/src/stripev3/StripeV3PaymentMethod.tsx
