CHECKOUT-9388: Lazy load payment strategies by importing them on demand

.circleci/config.yml

@@ -243,9 +243,6 @@ workflows:
             <<: *pull_request_filter
           requires:
             - build-prerelease
-      - sdk-on-cdn:
-          filters:
-            <<: *pull_request_filter
       - security/scan:
           name: "Gitleaks secrets scan"
           filters:
@@ -293,6 +290,9 @@ workflows:
             <<: *release_filter
           requires:
             - build
+      - sdk-on-cdn:
+          filters:
+            <<: *release_filter
       - security/scan:
           name: "Gitleaks secrets scan"
           filters:
@@ -309,6 +309,7 @@ workflows:
             - lint
             - build
             - e2e
+            - sdk-on-cdn
             - "Gitleaks secrets scan"
       - upload_to_sentry:
           filters:

.eslintrc.json

@@ -84,6 +84,18 @@
                         "fixStyle": "inline-type-imports",
                         "disallowTypeAnnotations": false
                     }
+                ],
+                "@typescript-eslint/no-restricted-imports": [
+                    "error",
+                    {
+                        "paths": [
+                            {
+                                "name": "@bigcommerce/checkout-sdk",
+                                "message": "Direct imports from '@bigcommerce/checkout-sdk' are not allowed. Use type-only imports (import type { ... }) or import from subpaths like '@bigcommerce/checkout-sdk/essential' or '@bigcommerce/checkout-sdk/integrations'.",
+                                "allowTypeImports": true
+                            }
+                        ]
+                    }
                 ]
             }
         },
@@ -138,7 +150,17 @@
                 "plugin:jest-dom/recommended"
             ],
             "rules": {
-                "@typescript-eslint/consistent-type-assertions": "off"
+                "@typescript-eslint/consistent-type-assertions": "off",
+                "@typescript-eslint/no-restricted-imports": "off"
+            }
+        },
+        {
+            "files": [
+                "*.mock.ts",
+                "*.mock.tsx"
+            ],
+            "rules": {
+                "@typescript-eslint/no-restricted-imports": "off"
             }
         }
     ]

package.json

@@ -48,7 +48,7 @@
   "prettier": "@bigcommerce/eslint-config/prettier",
   "homepage": "https://github.com/bigcommerce/checkout-js#readme",
   "dependencies": {
-    "@bigcommerce/checkout-sdk": "^1.799.0",
+    "@bigcommerce/checkout-sdk": "github:bigcommerce/checkout-sdk-js#f6997b7c3962192541e2dc281a84dde6c28d4d04",
     "@bigcommerce/citadel": "^2.15.1",
     "@bigcommerce/form-poster": "^1.2.2",
     "@bigcommerce/memoize": "^1.0.0",
@@ -101,7 +101,7 @@
     "@babel/preset-env": "^7.9.0",
     "@bigcommerce/eslint-config": "^2.6.1",
     "@bigcommerce/eslint-plugin": "^1.4.0",
-    "@faker-js/faker": "^6.3.1",
+    "@faker-js/faker": "^7.6.0",
     "@nx/devkit": "19.8.9",
     "@nx/eslint": "19.8.9",
     "@nx/eslint-plugin": "19.8.9",
@@ -183,7 +183,7 @@
     "ts-loader": "^9.3.0",
     "tslib": "^2.5.3",
     "typescript": "^5.6.2",
-    "webpack": "^5.94.0",
+    "webpack": "^5.101.3",
     "webpack-assets-manifest": "^5.1.0",
     "webpack-cli": "^4.9.2",
     "webpack-inject-plugin": "^1.5.3",

packages/adyen-integration/src/adyenv2/AdyenV2PaymentMethod.test.tsx

@@ -6,6 +6,7 @@ import {
     type PaymentInitializeOptions,
     type PaymentMethod,
 } from '@bigcommerce/checkout-sdk';
+import { createAdyenV2PaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/adyen';
 import { act, fireEvent, render, screen } from '@testing-library/react';
 import { Formik } from 'formik';
 import { noop } from 'lodash';
@@ -98,6 +99,7 @@ describe('when using Adyen V2 payment', () => {
 
         expect(initializePayment).toHaveBeenCalledWith(
             expect.objectContaining({
+                integrations: [createAdyenV2PaymentStrategy],
                 adyenv2: {
                     additionalActionOptions: {
                         containerId: 'adyen-scheme-additional-action-component-field',

packages/adyen-integration/src/adyenv2/AdyenV2PaymentMethod.tsx

@@ -5,6 +5,7 @@ import {
     type CardInstrument,
     type PaymentInitializeOptions,
 } from '@bigcommerce/checkout-sdk';
+import { createAdyenV2PaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/adyen';
 import React, { type FunctionComponent, useCallback, useRef, useState } from 'react';
 
 import { type HostedWidgetComponentProps } from '@bigcommerce/checkout/hosted-widget-integration';
@@ -107,6 +108,7 @@ const AdyenV2PaymentMethod: FunctionComponent<PaymentMethodProps> = ({
 
             return checkoutService.initializePayment({
                 ...options,
+                integrations: [createAdyenV2PaymentStrategy],
                 adyenv2: {
                     cardVerificationContainerId:
                         selectedInstrumentId && cardVerificationContainerId,

packages/adyen-integration/src/adyenv3/AdyenV3PaymentMethod.test.tsx

@@ -6,6 +6,7 @@ import {
     type PaymentInitializeOptions,
     type PaymentMethod,
 } from '@bigcommerce/checkout-sdk';
+import { createAdyenV3PaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/adyen';
 import { act, fireEvent, render, screen } from '@testing-library/react';
 import { Formik } from 'formik';
 import { noop } from 'lodash';
@@ -95,6 +96,7 @@ describe('when using AdyenV3 payment', () => {
 
         expect(initializePayment).toHaveBeenCalledWith(
             expect.objectContaining({
+                integrations: [createAdyenV3PaymentStrategy],
                 adyenv3: {
                     cardVerificationContainerId: undefined,
                     containerId: 'adyen-scheme-component-field',

packages/adyen-integration/src/adyenv3/AdyenV3PaymentMethod.tsx

@@ -4,6 +4,7 @@ import {
     type CardInstrument,
     type PaymentInitializeOptions,
 } from '@bigcommerce/checkout-sdk';
+import { createAdyenV3PaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/adyen';
 import React, { type FunctionComponent, useCallback, useRef, useState } from 'react';
 
 import { type HostedWidgetComponentProps } from '@bigcommerce/checkout/hosted-widget-integration';
@@ -105,6 +106,7 @@ const AdyenV3PaymentMethod: FunctionComponent<PaymentMethodProps> = ({
 
             return checkoutService.initializePayment({
                 ...options,
+                integrations: [createAdyenV3PaymentStrategy],
                 adyenv3: {
                     cardVerificationContainerId:
                         selectedInstrumentId && cardVerificationContainerId,

packages/affirm-integration/src/AffirmPaymentMethod.tsx

@@ -1,4 +1,6 @@
-import React, { type FunctionComponent, useMemo } from 'react';
+import { type PaymentInitializeOptions } from '@bigcommerce/checkout-sdk';
+import { createAffirmPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/affirm';
+import React, { type FunctionComponent, useCallback, useMemo } from 'react';
 
 import { HostedPaymentComponent } from '@bigcommerce/checkout/hosted-payment-integration';
 import { TranslatedString } from '@bigcommerce/checkout/locale';
@@ -14,13 +16,23 @@ const AffirmPaymentMethod: FunctionComponent<PaymentMethodProps> = ({
 }) => {
     const description = useMemo(() => <TranslatedString id="payment.affirm_body_text" />, []);
 
+    const initializeAffirmPayment = useCallback(
+        (options: PaymentInitializeOptions) => {
+            return checkoutService.initializePayment({
+                ...options,
+                integrations: [createAffirmPaymentStrategy],
+            });
+        },
+        [checkoutService],
+    );
+
     return (
         <HostedPaymentComponent
             {...rest}
             checkoutService={checkoutService}
             deinitializePayment={checkoutService.deinitializePayment}
             description={description}
-            initializePayment={checkoutService.initializePayment}
+            initializePayment={initializeAffirmPayment}
         />
     );
 };

packages/amazon-pay-v2-integration/src/AmazonPayV2PaymentMethod.test.tsx

@@ -6,6 +6,7 @@ import {
     type PaymentInitializeOptions,
     type PaymentMethod,
 } from '@bigcommerce/checkout-sdk';
+import { createAmazonPayV2PaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/amazon-pay';
 import { render } from '@testing-library/react';
 import { Formik } from 'formik';
 import { noop } from 'lodash';
@@ -90,6 +91,7 @@ describe('when using AmazonPay payment', () => {
             expect.objectContaining({
                 gatewayId: method.gateway,
                 methodId: 'amazonpay',
+                integrations: [createAmazonPayV2PaymentStrategy],
                 amazonpay: {
                     editButtonId: 'editButtonId',
                 },
@@ -106,6 +108,7 @@ describe('when using AmazonPay payment', () => {
             expect.objectContaining({
                 methodId: method.id,
                 gatewayId: method.gateway,
+                integrations: [createAmazonPayV2PaymentStrategy],
                 [method.id]: {
                     editButtonId: 'editButtonId',
                 },

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

@@ -1,4 +1,5 @@
 import { type PaymentInitializeOptions } from '@bigcommerce/checkout-sdk';
+import { createAmazonPayV2PaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/amazon-pay';
 import { some } from 'lodash';
 import React, { type FunctionComponent, useCallback } from 'react';
 
@@ -27,6 +28,7 @@ const AmazonPayV2PaymentMethod: FunctionComponent<PaymentMethodProps> = ({
         (options: PaymentInitializeOptions) =>
             checkoutService.initializePayment({
                 ...options,
+                integrations: [createAmazonPayV2PaymentStrategy],
                 amazonpay: {
                     editButtonId: 'editButtonId',
                 },