From 55651821b84bb3206a4725afefaaf81f8bcadaae Mon Sep 17 00:00:00 2001 From: David Chin Date: Fri, 5 Sep 2025 16:26:19 +1000 Subject: [PATCH 1/2] feat(checkout): CHECKOUT-9388 Lazy load payment strategies by importing them on demand --- .../src/adyenv2/AdyenV2PaymentMethod.test.tsx | 2 ++ .../src/adyenv2/AdyenV2PaymentMethod.tsx | 2 ++ .../src/adyenv3/AdyenV3PaymentMethod.test.tsx | 2 ++ .../src/adyenv3/AdyenV3PaymentMethod.tsx | 2 ++ .../src/AffirmPaymentMethod.tsx | 16 +++++++-- .../src/AmazonPayV2PaymentMethod.test.tsx | 3 ++ .../src/AmazonPayV2PaymentMethod.tsx | 2 ++ .../analytics/src/AnalyticsProvider.test.tsx | 6 ++-- packages/analytics/src/AnalyticsProvider.tsx | 2 +- .../src/ApplePayPaymentMethod.test.tsx | 2 ++ .../src/ApplePayPaymentMethod.tsx | 2 ++ .../src/BarclaycardPaymentMethod.tsx | 16 +++++++-- ...ePaymentsCreditCardsPaymentMethod.test.tsx | 7 +++- ...mmercePaymentsCreditCardsPaymentMethod.tsx | 2 ++ ...ercePaymentsFastlanePaymentMethod.test.tsx | 3 +- ...gCommercePaymentsFastlanePaymentMethod.tsx | 3 +- ...mercePaymentsRatePayPaymentMethod.test.tsx | 3 +- ...igCommercePaymentsRatePayPaymentMethod.tsx | 2 ++ ...rcePaymentsPaymentMethodComponent.test.tsx | 18 ++++++++++ ...CommercePaymentsPaymentMethodComponent.tsx | 12 +++++++ ...BigCommercePaymentsPayLaterBanner.test.tsx | 3 ++ .../src/BigCommercePaymentsPayLaterBanner.tsx | 4 ++- ...BlueSnapDirectAlternativePaymentMethod.tsx | 16 +++++++-- .../BlueSnapDirectEcpPaymentMethod.test.tsx | 2 ++ .../src/BlueSnapDirectEcpPaymentMethod.tsx | 2 ++ .../BlueSnapDirectIdealPaymentMethod.test.tsx | 2 ++ .../src/BlueSnapDirectIdealPaymentMethod.tsx | 2 ++ ...eSnapDirectPayByBankPaymentMethod.test.tsx | 2 ++ .../BlueSnapDirectPayByBankPaymentMethod.tsx | 2 ++ .../BlueSnapDirectSepaPaymentMethod.test.tsx | 2 ++ .../src/BlueSnapDirectSepaPaymentMethod.tsx | 2 ++ .../src/BlueSnapV2PaymentMethod.tsx | 2 ++ .../src/BoltClientPaymentMethod.tsx | 2 ++ .../src/BoltEmbeddedPaymentMethod.tsx | 6 +++- .../BraintreeAchPaymentMethod.test.tsx | 2 ++ .../BraintreeAchPaymentMethod.tsx | 2 ++ .../BraintreeFastlanePaymentMethod.test.tsx | 2 ++ .../BraintreeFastlanePaymentMethod.tsx | 2 ++ .../src/BraintreeLocalMethod.test.tsx | 2 ++ .../src/BraintreeLocalPaymentMethod.tsx | 4 ++- .../src/BraintreePaypalPaymentMethod.test.tsx | 2 ++ .../src/BraintreePaypalPaymentMethod.tsx | 2 ++ .../src/ExtensionRegionContainer.ts | 2 +- .../createReRenderShippingFormHandler.ts | 2 +- .../createReRenderShippingStepHandler.ts | 2 +- .../createReloadCheckoutHandler.ts | 2 +- .../createSetIframeStyleHandler.ts | 2 +- .../createShowLoadingIndicatorHandler.ts | 2 +- .../createGetConsignmentHandler.ts | 2 +- .../src/CheckoutcomCustomPaymentMethod.tsx | 29 ++++++++++++++-- .../src/ClearpayPaymentMethod.tsx | 16 +++++++-- .../core/src/app/checkout/CheckoutApp.tsx | 2 +- .../core/src/app/checkout/CheckoutPage.tsx | 2 +- .../src/app/order/OrderConfirmationApp.tsx | 2 +- packages/core/src/app/order/OrderSummary.tsx | 2 +- packages/core/src/app/payment/PaymentForm.tsx | 2 +- .../paymentMethod/CreditCardPaymentMethod.tsx | 3 ++ .../HostedCreditCardPaymentMethod.tsx | 10 ++++++ .../paymentMethod/HostedPaymentMethod.tsx | 8 +++++ .../payment/paymentMethod/PaymentMethod.tsx | 21 +++++++++++- .../payment/paymentMethod/PaymentMethodV2.tsx | 19 ++++++----- .../src/app/shipping/ConsignmentLineItem.tsx | 2 +- .../src/app/shipping/ShippingFormFooter.tsx | 2 +- .../core/src/app/shipping/ShippingHeader.tsx | 2 +- .../shippingOption/ShippingOptionsList.tsx | 2 +- .../src/GooglePayPaymentMethod.test.tsx | 33 ++++++++++++++++++- .../src/GooglePayPaymentMethod.tsx | 30 ++++++++++++++++- .../components/HostedCreditCardComponent.tsx | 6 ++++ .../src/klarna/KlarnaPaymentMethod.tsx | 2 ++ .../src/klarnav2/KlarnaV2PaymentMethod.tsx | 2 ++ packages/locale/src/LocaleProvider.tsx | 2 +- packages/locale/src/createLocaleContext.ts | 2 +- packages/locale/src/getLanguageService.ts | 2 +- packages/locale/src/localeContext.mock.tsx | 2 +- .../src/MolliePaymentMethod.tsx | 2 ++ .../src/MonerisPaymentMethod.test.tsx | 4 +++ .../src/MonerisPaymentMethod.tsx | 2 ++ .../src/OfflinePaymentMethod.test.tsx | 2 ++ .../src/OfflinePaymentMethod.tsx | 2 ++ ...lCommerceCreditCardsPaymentMethod.test.tsx | 7 +++- ...PayPalCommerceCreditCardsPaymentMethod.tsx | 2 ++ ...yPalCommerceFastlanePaymentMethod.test.tsx | 2 ++ .../PayPalCommerceFastlanePaymentMethod.tsx | 2 ++ ...aypalCommerceRatePayPaymentMethod.test.tsx | 2 ++ .../PaypalCommerceRatePayPaymentMethod.tsx | 2 ++ ...PalCommercePaymentMethodComponent.test.tsx | 18 ++++++++++ .../PayPalCommercePaymentMethodComponent.tsx | 12 +++++++ .../src/BraintreePaypalCreditBanner.test.tsx | 3 ++ .../src/BraintreePaypalCreditBanner.tsx | 2 ++ .../src/PaypalCommerceCreditBanner.test.tsx | 12 +++++++ .../src/PaypalCommerceCreditBanner.tsx | 8 +++++ .../src/SquareV2PaymentMethod.test.tsx | 2 ++ .../src/SquareV2PaymentMethod.tsx | 2 ++ .../StripeOCSPaymentMethod.test.tsx | 3 ++ .../src/stripe-ocs/StripeOCSPaymentMethod.tsx | 6 +++- .../StripeUPEPaymentMethod.test.tsx | 5 ++- .../src/stripe-upe/StripeUPEPaymentMethod.tsx | 6 +++- .../src/stripev3/StripePaymentMethod.test.tsx | 6 ++++ .../src/stripev3/StripeV3PaymentMethod.tsx | 2 ++ packages/test-utils/src/TestWrapper.tsx | 2 +- .../WorldPayCreditCardPaymentMethod.test.tsx | 2 ++ .../src/WorldpayCreditCardPaymentMethod.tsx | 4 ++- 102 files changed, 459 insertions(+), 58 deletions(-) diff --git a/packages/adyen-integration/src/adyenv2/AdyenV2PaymentMethod.test.tsx b/packages/adyen-integration/src/adyenv2/AdyenV2PaymentMethod.test.tsx index 05a5b7985c..03bc261e2e 100644 --- a/packages/adyen-integration/src/adyenv2/AdyenV2PaymentMethod.test.tsx +++ b/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', diff --git a/packages/adyen-integration/src/adyenv2/AdyenV2PaymentMethod.tsx b/packages/adyen-integration/src/adyenv2/AdyenV2PaymentMethod.tsx index e9d4c9f69e..85dd40e169 100644 --- a/packages/adyen-integration/src/adyenv2/AdyenV2PaymentMethod.tsx +++ b/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 = ({ return checkoutService.initializePayment({ ...options, + integrations: [createAdyenV2PaymentStrategy], adyenv2: { cardVerificationContainerId: selectedInstrumentId && cardVerificationContainerId, diff --git a/packages/adyen-integration/src/adyenv3/AdyenV3PaymentMethod.test.tsx b/packages/adyen-integration/src/adyenv3/AdyenV3PaymentMethod.test.tsx index c9822dcc3e..928eb5781e 100644 --- a/packages/adyen-integration/src/adyenv3/AdyenV3PaymentMethod.test.tsx +++ b/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', diff --git a/packages/adyen-integration/src/adyenv3/AdyenV3PaymentMethod.tsx b/packages/adyen-integration/src/adyenv3/AdyenV3PaymentMethod.tsx index 9463171a87..95fda9548b 100644 --- a/packages/adyen-integration/src/adyenv3/AdyenV3PaymentMethod.tsx +++ b/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 = ({ return checkoutService.initializePayment({ ...options, + integrations: [createAdyenV3PaymentStrategy], adyenv3: { cardVerificationContainerId: selectedInstrumentId && cardVerificationContainerId, diff --git a/packages/affirm-integration/src/AffirmPaymentMethod.tsx b/packages/affirm-integration/src/AffirmPaymentMethod.tsx index 7c1dd13eff..e039edc3f4 100644 --- a/packages/affirm-integration/src/AffirmPaymentMethod.tsx +++ b/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 = ({ }) => { const description = useMemo(() => , []); + const initializeAffirmPayment = useCallback( + (options: PaymentInitializeOptions) => { + return checkoutService.initializePayment({ + ...options, + integrations: [createAffirmPaymentStrategy], + }); + }, + [checkoutService], + ); + return ( ); }; diff --git a/packages/amazon-pay-v2-integration/src/AmazonPayV2PaymentMethod.test.tsx b/packages/amazon-pay-v2-integration/src/AmazonPayV2PaymentMethod.test.tsx index 5cb434e78f..ea6bb3e1c4 100644 --- a/packages/amazon-pay-v2-integration/src/AmazonPayV2PaymentMethod.test.tsx +++ b/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', }, diff --git a/packages/amazon-pay-v2-integration/src/AmazonPayV2PaymentMethod.tsx b/packages/amazon-pay-v2-integration/src/AmazonPayV2PaymentMethod.tsx index c6e019c894..aa068dd429 100644 --- a/packages/amazon-pay-v2-integration/src/AmazonPayV2PaymentMethod.tsx +++ b/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 = ({ (options: PaymentInitializeOptions) => checkoutService.initializePayment({ ...options, + integrations: [createAmazonPayV2PaymentStrategy], amazonpay: { editButtonId: 'editButtonId', }, diff --git a/packages/analytics/src/AnalyticsProvider.test.tsx b/packages/analytics/src/AnalyticsProvider.test.tsx index 17e3e3e7b9..3fbd8c8fc1 100644 --- a/packages/analytics/src/AnalyticsProvider.test.tsx +++ b/packages/analytics/src/AnalyticsProvider.test.tsx @@ -1,4 +1,4 @@ -import * as CheckoutSdk from '@bigcommerce/checkout-sdk'; +import * as CheckoutSdk from '@bigcommerce/checkout-sdk/essential'; import { render } from '@testing-library/react'; import React, { useEffect } from 'react'; @@ -8,12 +8,12 @@ import AnalyticsProvider from './AnalyticsProvider'; import * as createAnalyticsService from './createAnalyticsService'; import useAnalytics from './useAnalytics'; -jest.mock('@bigcommerce/checkout-sdk', () => { +jest.mock('@bigcommerce/checkout-sdk/essential', () => { // eslint-disable-next-line @typescript-eslint/no-unsafe-return return { // eslint-disable-next-line @typescript-eslint/naming-convention __esModule: true, - ...jest.requireActual('@bigcommerce/checkout-sdk'), + ...jest.requireActual('@bigcommerce/checkout-sdk/essential'), }; }); diff --git a/packages/analytics/src/AnalyticsProvider.tsx b/packages/analytics/src/AnalyticsProvider.tsx index f732fee6b8..53bc39af8d 100644 --- a/packages/analytics/src/AnalyticsProvider.tsx +++ b/packages/analytics/src/AnalyticsProvider.tsx @@ -9,7 +9,7 @@ import { createStepTracker, type PayPalCommerceAnalyticTrackerService, type StepTracker, -} from '@bigcommerce/checkout-sdk'; +} from '@bigcommerce/checkout-sdk/essential'; import React, { type ReactNode, useMemo } from 'react'; import AnalyticsContext, { type AnalyticsEvents } from './AnalyticsContext'; diff --git a/packages/apple-pay-integration/src/ApplePayPaymentMethod.test.tsx b/packages/apple-pay-integration/src/ApplePayPaymentMethod.test.tsx index 1e9e1adf15..3f18bc1188 100644 --- a/packages/apple-pay-integration/src/ApplePayPaymentMethod.test.tsx +++ b/packages/apple-pay-integration/src/ApplePayPaymentMethod.test.tsx @@ -1,4 +1,5 @@ import { createCheckoutService, createLanguageService } from '@bigcommerce/checkout-sdk'; +import { createApplePayPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/apple-pay'; import React from 'react'; import { type PaymentMethodProps } from '@bigcommerce/checkout/payment-integration-api'; @@ -36,6 +37,7 @@ describe('ApplePayPaymentMethod', () => { expect(checkoutService.initializePayment).toHaveBeenCalledWith({ gatewayId: defaultProps.method.gateway, methodId: defaultProps.method.id, + integrations: [createApplePayPaymentStrategy], applepay: { shippingLabel: defaultProps.language.translate('cart.shipping_text'), subtotalLabel: defaultProps.language.translate('cart.subtotal_text'), diff --git a/packages/apple-pay-integration/src/ApplePayPaymentMethod.tsx b/packages/apple-pay-integration/src/ApplePayPaymentMethod.tsx index 8bc69739b5..5a7f64f660 100644 --- a/packages/apple-pay-integration/src/ApplePayPaymentMethod.tsx +++ b/packages/apple-pay-integration/src/ApplePayPaymentMethod.tsx @@ -1,3 +1,4 @@ +import { createApplePayPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/apple-pay'; import React, { type FunctionComponent, useEffect } from 'react'; import { @@ -18,6 +19,7 @@ const ApplePayPaymentMethod: FunctionComponent = ({ await checkoutService.initializePayment({ gatewayId: method.gateway, methodId: method.id, + integrations: [createApplePayPaymentStrategy], applepay: { shippingLabel: language.translate('cart.shipping_text'), subtotalLabel: language.translate('cart.subtotal_text'), diff --git a/packages/barclay-integration/src/BarclaycardPaymentMethod.tsx b/packages/barclay-integration/src/BarclaycardPaymentMethod.tsx index f05533e77e..26e3f391dd 100644 --- a/packages/barclay-integration/src/BarclaycardPaymentMethod.tsx +++ b/packages/barclay-integration/src/BarclaycardPaymentMethod.tsx @@ -1,4 +1,6 @@ -import React, { type FunctionComponent } from 'react'; +import { type PaymentInitializeOptions } from '@bigcommerce/checkout-sdk'; +import { createCreditCardPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/credit-card'; +import React, { type FunctionComponent, useCallback } from 'react'; import { HostedPaymentComponent } from '@bigcommerce/checkout/hosted-payment-integration'; import { @@ -14,13 +16,23 @@ const BarclaycardPaymentMethod: FunctionComponent = ({ paymentForm, ...rest }) => { + const initializeBarclaycardPayment = useCallback( + (options: PaymentInitializeOptions) => { + return checkoutService.initializePayment({ + ...options, + integrations: [createCreditCardPaymentStrategy], + }); + }, + [checkoutService], + ); + return ( diff --git a/packages/bigcommerce-payments-integration/src/BigCommercePaymentCreditCards/BigCommercePaymentsCreditCardsPaymentMethod.test.tsx b/packages/bigcommerce-payments-integration/src/BigCommercePaymentCreditCards/BigCommercePaymentsCreditCardsPaymentMethod.test.tsx index 7d3479d18e..9bd000f25b 100644 --- a/packages/bigcommerce-payments-integration/src/BigCommercePaymentCreditCards/BigCommercePaymentsCreditCardsPaymentMethod.test.tsx +++ b/packages/bigcommerce-payments-integration/src/BigCommercePaymentCreditCards/BigCommercePaymentsCreditCardsPaymentMethod.test.tsx @@ -5,6 +5,7 @@ import { createLanguageService, type PaymentMethod, } from '@bigcommerce/checkout-sdk'; +import { createBigCommercePaymentsCreditCardsPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/bigcommerce-payments'; import { Formik } from 'formik'; import { noop } from 'lodash'; import React, { type FunctionComponent } from 'react'; @@ -108,7 +109,11 @@ describe('BigCommercePaymentsCreditCardPaymentMethod', () => { await new Promise((resolve) => process.nextTick(resolve)); - expect(checkoutService.initializePayment).toHaveBeenCalled(); + expect(checkoutService.initializePayment).toHaveBeenCalledWith( + expect.objectContaining({ + integrations: [createBigCommercePaymentsCreditCardsPaymentStrategy], + }), + ); }); it('calls initializePayment with correct arguments', async () => { diff --git a/packages/bigcommerce-payments-integration/src/BigCommercePaymentCreditCards/BigCommercePaymentsCreditCardsPaymentMethod.tsx b/packages/bigcommerce-payments-integration/src/BigCommercePaymentCreditCards/BigCommercePaymentsCreditCardsPaymentMethod.tsx index 06892f7e97..ee6fc26117 100644 --- a/packages/bigcommerce-payments-integration/src/BigCommercePaymentCreditCards/BigCommercePaymentsCreditCardsPaymentMethod.tsx +++ b/packages/bigcommerce-payments-integration/src/BigCommercePaymentCreditCards/BigCommercePaymentsCreditCardsPaymentMethod.tsx @@ -1,4 +1,5 @@ import { type CardInstrument, type LegacyHostedFormOptions } from '@bigcommerce/checkout-sdk'; +import { createBigCommercePaymentsCreditCardsPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/bigcommerce-payments'; import { compact, forIn } from 'lodash'; import React, { type FunctionComponent, type ReactNode, useCallback, useState } from 'react'; @@ -250,6 +251,7 @@ const BigCommercePaymentsCreditCardsPaymentMethod: FunctionComponent { return initializePayment({ ...options, + integrations: [createBigCommercePaymentsCreditCardsPaymentStrategy], bigcommerce_payments_creditcards: { form: isHostedFormEnabled ? await getHostedFormOptions(selectedInstrument) diff --git a/packages/bigcommerce-payments-integration/src/BigCommercePaymentsFastlane/BigCommercePaymentsFastlanePaymentMethod.test.tsx b/packages/bigcommerce-payments-integration/src/BigCommercePaymentsFastlane/BigCommercePaymentsFastlanePaymentMethod.test.tsx index 39957ad970..619ebf1a8b 100644 --- a/packages/bigcommerce-payments-integration/src/BigCommercePaymentsFastlane/BigCommercePaymentsFastlanePaymentMethod.test.tsx +++ b/packages/bigcommerce-payments-integration/src/BigCommercePaymentsFastlane/BigCommercePaymentsFastlanePaymentMethod.test.tsx @@ -1,4 +1,5 @@ import { createCheckoutService, createLanguageService } from '@bigcommerce/checkout-sdk'; +import { createBigCommercePaymentsFastlanePaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/bigcommerce-payments'; import React from 'react'; import { getPaymentFormServiceMock } from '@bigcommerce/checkout/test-mocks'; @@ -44,7 +45,7 @@ describe('BigCommercePaymentsFastlanePaymentMethod', () => { expect(initializePayment).toHaveBeenCalledWith({ methodId: props.method.id, - + integrations: [createBigCommercePaymentsFastlanePaymentStrategy], bigcommerce_payments_fastlane: { onInit: expect.any(Function), onChange: expect.any(Function), diff --git a/packages/bigcommerce-payments-integration/src/BigCommercePaymentsFastlane/BigCommercePaymentsFastlanePaymentMethod.tsx b/packages/bigcommerce-payments-integration/src/BigCommercePaymentsFastlane/BigCommercePaymentsFastlanePaymentMethod.tsx index 2819ce5a65..790961671c 100644 --- a/packages/bigcommerce-payments-integration/src/BigCommercePaymentsFastlane/BigCommercePaymentsFastlanePaymentMethod.tsx +++ b/packages/bigcommerce-payments-integration/src/BigCommercePaymentsFastlane/BigCommercePaymentsFastlanePaymentMethod.tsx @@ -1,4 +1,5 @@ import { type CardInstrument } from '@bigcommerce/checkout-sdk'; +import { createBigCommercePaymentsFastlanePaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/bigcommerce-payments'; import React, { type FunctionComponent, useEffect, useRef } from 'react'; import { LocaleProvider } from '@bigcommerce/checkout/locale'; @@ -37,7 +38,7 @@ const BigCommercePaymentsFastlanePaymentMethod: FunctionComponent { paypalCardComponentRef.current.renderPayPalCardComponent = diff --git a/packages/bigcommerce-payments-integration/src/BigCommercePaymentsRatePay/BigCommercePaymentsRatePayPaymentMethod.test.tsx b/packages/bigcommerce-payments-integration/src/BigCommercePaymentsRatePay/BigCommercePaymentsRatePayPaymentMethod.test.tsx index 28847ecf33..04e5a191db 100644 --- a/packages/bigcommerce-payments-integration/src/BigCommercePaymentsRatePay/BigCommercePaymentsRatePayPaymentMethod.test.tsx +++ b/packages/bigcommerce-payments-integration/src/BigCommercePaymentsRatePay/BigCommercePaymentsRatePayPaymentMethod.test.tsx @@ -1,4 +1,5 @@ import { createCheckoutService, type LanguageService } from '@bigcommerce/checkout-sdk'; +import { createBigCommercePaymentsRatePayPayPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/bigcommerce-payments'; import { fireEvent, render, screen, configure } from '@testing-library/react'; import { EventEmitter } from 'events'; import { Formik } from 'formik'; @@ -135,7 +136,7 @@ describe('BigCommercePaymentsRatePayPaymentMethod', () => { expect(initializePayment).toHaveBeenCalledWith({ gatewayId: props.method.gateway, methodId: props.method.id, - + integrations: [createBigCommercePaymentsRatePayPayPaymentStrategy], bigcommerce_payments_ratepay: { container: '#checkout-payment-continue', legalTextContainer: 'legal-text-container', diff --git a/packages/bigcommerce-payments-integration/src/BigCommercePaymentsRatePay/BigCommercePaymentsRatePayPaymentMethod.tsx b/packages/bigcommerce-payments-integration/src/BigCommercePaymentsRatePay/BigCommercePaymentsRatePayPaymentMethod.tsx index d768c7348d..aac285a084 100644 --- a/packages/bigcommerce-payments-integration/src/BigCommercePaymentsRatePay/BigCommercePaymentsRatePayPaymentMethod.tsx +++ b/packages/bigcommerce-payments-integration/src/BigCommercePaymentsRatePay/BigCommercePaymentsRatePayPaymentMethod.tsx @@ -1,4 +1,5 @@ import { type FormField } from '@bigcommerce/checkout-sdk'; +import { createBigCommercePaymentsRatePayPayPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/bigcommerce-payments'; import React, { type FunctionComponent, useCallback, useEffect, useMemo, useRef } from 'react'; import { @@ -83,6 +84,7 @@ const BigCommercePaymentsRatePayPaymentMethod: FunctionComponent = ({ await checkoutService.initializePayment({ gatewayId: method.gateway, methodId: method.id, + integrations: [createBigCommercePaymentsRatePayPayPaymentStrategy], bigcommerce_payments_ratepay: { container: '#checkout-payment-continue', legalTextContainer: 'legal-text-container', diff --git a/packages/bigcommerce-payments-integration/src/components/BigCommercePaymentsPaymentMethodComponent.test.tsx b/packages/bigcommerce-payments-integration/src/components/BigCommercePaymentsPaymentMethodComponent.test.tsx index dc816b9200..fa89040329 100644 --- a/packages/bigcommerce-payments-integration/src/components/BigCommercePaymentsPaymentMethodComponent.test.tsx +++ b/packages/bigcommerce-payments-integration/src/components/BigCommercePaymentsPaymentMethodComponent.test.tsx @@ -4,6 +4,12 @@ import { type HostedInstrument, type LanguageService, } from '@bigcommerce/checkout-sdk'; +import { + createBigCommercePaymentsPaymentStrategy, + createBigCommercePaymentsAlternativeMethodsPaymentStrategy, + createBigCommercePaymentsPayLaterPaymentStrategy, + createBigCommercePaymentsVenmoPaymentStrategy, +} from '@bigcommerce/checkout-sdk/integrations/bigcommerce-payments'; import { render } from '@testing-library/react'; import { EventEmitter } from 'events'; import React from 'react'; @@ -70,6 +76,12 @@ describe('BigCommercePaymentsPaymentMethodComponent', () => { expect(initializePayment).toHaveBeenCalledWith({ gatewayId: props.method.gateway, methodId: props.method.id, + integrations: [ + createBigCommercePaymentsPaymentStrategy, + createBigCommercePaymentsAlternativeMethodsPaymentStrategy, + createBigCommercePaymentsPayLaterPaymentStrategy, + createBigCommercePaymentsVenmoPaymentStrategy, + ], bigcommerce_payments: { container: '#checkout-payment-continue', onInit: expect.any(Function), @@ -106,6 +118,12 @@ describe('BigCommercePaymentsPaymentMethodComponent', () => { expect(initializePayment).toHaveBeenCalledWith({ gatewayId: props.method.gateway, methodId: props.method.id, + integrations: [ + createBigCommercePaymentsPaymentStrategy, + createBigCommercePaymentsAlternativeMethodsPaymentStrategy, + createBigCommercePaymentsPayLaterPaymentStrategy, + createBigCommercePaymentsVenmoPaymentStrategy, + ], bigcommerce_payments_apms: { container: '#checkout-payment-continue', onError: expect.any(Function), diff --git a/packages/bigcommerce-payments-integration/src/components/BigCommercePaymentsPaymentMethodComponent.tsx b/packages/bigcommerce-payments-integration/src/components/BigCommercePaymentsPaymentMethodComponent.tsx index c371d79b4d..1339500380 100644 --- a/packages/bigcommerce-payments-integration/src/components/BigCommercePaymentsPaymentMethodComponent.tsx +++ b/packages/bigcommerce-payments-integration/src/components/BigCommercePaymentsPaymentMethodComponent.tsx @@ -6,6 +6,12 @@ import { type BigCommercePaymentsCreditCardsPaymentInitializeOptions, type BigCommercePaymentsVenmoPaymentInitializeOptions, } from '@bigcommerce/checkout-sdk'; +import { + createBigCommercePaymentsPaymentStrategy, + createBigCommercePaymentsAlternativeMethodsPaymentStrategy, + createBigCommercePaymentsPayLaterPaymentStrategy, + createBigCommercePaymentsVenmoPaymentStrategy, +} from '@bigcommerce/checkout-sdk/integrations/bigcommerce-payments'; import React, { type FunctionComponent, useCallback, useEffect, useRef } from 'react'; import { type PaymentMethodProps } from '@bigcommerce/checkout/payment-integration-api'; @@ -102,6 +108,12 @@ const BigCommercePaymentsPaymentMethodComponent: FunctionComponent< await checkoutService.initializePayment({ gatewayId: method.gateway, methodId: method.id, + integrations: [ + createBigCommercePaymentsPaymentStrategy, + createBigCommercePaymentsAlternativeMethodsPaymentStrategy, + createBigCommercePaymentsPayLaterPaymentStrategy, + createBigCommercePaymentsVenmoPaymentStrategy, + ], [providerOptionsKey]: { container: '#checkout-payment-continue', shouldRenderPayPalButtonOnInitialization: false, diff --git a/packages/bigcommerce-payments-utils/src/BigCommercePaymentsPayLaterBanner.test.tsx b/packages/bigcommerce-payments-utils/src/BigCommercePaymentsPayLaterBanner.test.tsx index 3f56ddebb4..a97e0f12a6 100644 --- a/packages/bigcommerce-payments-utils/src/BigCommercePaymentsPayLaterBanner.test.tsx +++ b/packages/bigcommerce-payments-utils/src/BigCommercePaymentsPayLaterBanner.test.tsx @@ -1,4 +1,5 @@ import { createCheckoutService } from '@bigcommerce/checkout-sdk'; +import { createBigCommercePaymentsPayLaterPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/bigcommerce-payments'; import React, { FunctionComponent } from 'react'; import { @@ -48,6 +49,7 @@ describe('BigCommercePaymentsPayLaterBanner', () => { expect(checkoutService.initializePayment).toHaveBeenCalledWith({ methodId: PaymentMethodId.BigCommercePaymentsPayLater, + integrations: [createBigCommercePaymentsPayLaterPaymentStrategy], bigcommerce_payments_paylater: { bannerContainerId: 'bigcommerce-payments-banner-container', }, @@ -67,6 +69,7 @@ describe('BigCommercePaymentsPayLaterBanner', () => { expect(checkoutService.initializePayment).toHaveBeenCalledWith({ methodId: PaymentMethodId.BigCommercePaymentsPayLater, + integrations: [createBigCommercePaymentsPayLaterPaymentStrategy], bigcommerce_payments_paylater: { bannerContainerId: 'bigcommerce-payments-banner-container', }, diff --git a/packages/bigcommerce-payments-utils/src/BigCommercePaymentsPayLaterBanner.tsx b/packages/bigcommerce-payments-utils/src/BigCommercePaymentsPayLaterBanner.tsx index 9b68c5e42e..ef82fbccec 100644 --- a/packages/bigcommerce-payments-utils/src/BigCommercePaymentsPayLaterBanner.tsx +++ b/packages/bigcommerce-payments-utils/src/BigCommercePaymentsPayLaterBanner.tsx @@ -1,4 +1,5 @@ -import React, { FunctionComponent, useEffect } from 'react'; +import { createBigCommercePaymentsPayLaterPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/bigcommerce-payments'; +import React, { type FunctionComponent, useEffect } from 'react'; import { PaymentMethodId, useCheckout } from '@bigcommerce/checkout/payment-integration-api'; @@ -11,6 +12,7 @@ const BigCommercePaymentsPayLaterBanner: FunctionComponent<{ try { void checkoutService.initializePayment({ methodId: PaymentMethodId.BigCommercePaymentsPayLater, + integrations: [createBigCommercePaymentsPayLaterPaymentStrategy], bigcommerce_payments_paylater: { bannerContainerId: 'bigcommerce-payments-banner-container', }, diff --git a/packages/bluesnap-direct-integration/src/BlueSnapDirectAlternativePaymentMethod.tsx b/packages/bluesnap-direct-integration/src/BlueSnapDirectAlternativePaymentMethod.tsx index d549fc1bf1..852176a2ba 100644 --- a/packages/bluesnap-direct-integration/src/BlueSnapDirectAlternativePaymentMethod.tsx +++ b/packages/bluesnap-direct-integration/src/BlueSnapDirectAlternativePaymentMethod.tsx @@ -1,4 +1,6 @@ -import React, { type FunctionComponent } from 'react'; +import { type PaymentInitializeOptions } from '@bigcommerce/checkout-sdk'; +import { createBlueSnapDirectAPMPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/bluesnap-direct'; +import React, { type FunctionComponent, useCallback } from 'react'; import { HostedPaymentComponent } from '@bigcommerce/checkout/hosted-payment-integration'; import { @@ -11,12 +13,22 @@ const BlueSnapDirectAlternativePaymentMethod: FunctionComponent { + const initializeBlueSnapDirectPayment = useCallback( + (options: PaymentInitializeOptions) => { + return checkoutService.initializePayment({ + ...options, + integrations: [createBlueSnapDirectAPMPaymentStrategy], + }); + }, + [checkoutService], + ); + return ( ); }; diff --git a/packages/bluesnap-direct-integration/src/BlueSnapDirectEcpPaymentMethod.test.tsx b/packages/bluesnap-direct-integration/src/BlueSnapDirectEcpPaymentMethod.test.tsx index f3b633ccb1..0bb79b08b8 100644 --- a/packages/bluesnap-direct-integration/src/BlueSnapDirectEcpPaymentMethod.test.tsx +++ b/packages/bluesnap-direct-integration/src/BlueSnapDirectEcpPaymentMethod.test.tsx @@ -7,6 +7,7 @@ import { type PaymentInitializeOptions, type PaymentRequestOptions, } from '@bigcommerce/checkout-sdk'; +import { createBlueSnapDirectAPMPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/bluesnap-direct'; import { Formik } from 'formik'; import { noop } from 'lodash'; import React, { type FunctionComponent } from 'react'; @@ -115,6 +116,7 @@ describe('BlueSnapDirectEcp payment method', () => { expect(initializePayment).toHaveBeenCalledWith({ gatewayId: 'bluesnapdirect', methodId: 'ecp', + integrations: [createBlueSnapDirectAPMPaymentStrategy], }); }); diff --git a/packages/bluesnap-direct-integration/src/BlueSnapDirectEcpPaymentMethod.tsx b/packages/bluesnap-direct-integration/src/BlueSnapDirectEcpPaymentMethod.tsx index 91653499c6..5c6ffe45f9 100644 --- a/packages/bluesnap-direct-integration/src/BlueSnapDirectEcpPaymentMethod.tsx +++ b/packages/bluesnap-direct-integration/src/BlueSnapDirectEcpPaymentMethod.tsx @@ -1,3 +1,4 @@ +import { createBlueSnapDirectAPMPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/bluesnap-direct'; import React, { type FunctionComponent, useCallback, useEffect, useState } from 'react'; import { @@ -42,6 +43,7 @@ const BlueSnapDirectEcpPaymentMethod: FunctionComponent = ({ await initializePayment({ gatewayId: method.gateway, methodId: method.id, + integrations: [createBlueSnapDirectAPMPaymentStrategy], }); }, [initializePayment, method]); diff --git a/packages/bluesnap-direct-integration/src/BlueSnapDirectIdealPaymentMethod.test.tsx b/packages/bluesnap-direct-integration/src/BlueSnapDirectIdealPaymentMethod.test.tsx index 397effddb1..ec210256e0 100644 --- a/packages/bluesnap-direct-integration/src/BlueSnapDirectIdealPaymentMethod.test.tsx +++ b/packages/bluesnap-direct-integration/src/BlueSnapDirectIdealPaymentMethod.test.tsx @@ -6,6 +6,7 @@ import { type PaymentInitializeOptions, type PaymentRequestOptions, } from '@bigcommerce/checkout-sdk'; +import { createBlueSnapDirectAPMPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/bluesnap-direct'; import { Formik } from 'formik'; import { noop } from 'lodash'; import React, { type FunctionComponent } from 'react'; @@ -74,6 +75,7 @@ describe('BlueSnapDirectIdeal payment method', () => { expect(initializePayment).toHaveBeenCalledWith({ gatewayId: 'bluesnapdirect', methodId: 'ideal', + integrations: [createBlueSnapDirectAPMPaymentStrategy], }); }); diff --git a/packages/bluesnap-direct-integration/src/BlueSnapDirectIdealPaymentMethod.tsx b/packages/bluesnap-direct-integration/src/BlueSnapDirectIdealPaymentMethod.tsx index 57aba96e0e..d8a128bb37 100644 --- a/packages/bluesnap-direct-integration/src/BlueSnapDirectIdealPaymentMethod.tsx +++ b/packages/bluesnap-direct-integration/src/BlueSnapDirectIdealPaymentMethod.tsx @@ -1,3 +1,4 @@ +import { createBlueSnapDirectAPMPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/bluesnap-direct'; import React, { type FunctionComponent, useCallback, useEffect } from 'react'; import { @@ -34,6 +35,7 @@ const BlueSnapDirectIdealPaymentMethod: FunctionComponent = await initializePayment({ gatewayId: method.gateway, methodId: method.id, + integrations: [createBlueSnapDirectAPMPaymentStrategy], }); }, [initializePayment, method, setValidationSchema, language]); diff --git a/packages/bluesnap-direct-integration/src/BlueSnapDirectPayByBankPaymentMethod.test.tsx b/packages/bluesnap-direct-integration/src/BlueSnapDirectPayByBankPaymentMethod.test.tsx index 2d24e4da1b..76a0174063 100644 --- a/packages/bluesnap-direct-integration/src/BlueSnapDirectPayByBankPaymentMethod.test.tsx +++ b/packages/bluesnap-direct-integration/src/BlueSnapDirectPayByBankPaymentMethod.test.tsx @@ -7,6 +7,7 @@ import { type PaymentInitializeOptions, type PaymentRequestOptions, } from '@bigcommerce/checkout-sdk'; +import { createBlueSnapDirectAPMPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/bluesnap-direct'; import { Formik } from 'formik'; import { noop } from 'lodash'; import React, { type FunctionComponent } from 'react'; @@ -77,6 +78,7 @@ describe('BlueSnapDirectEcp payment method', () => { expect(initializePayment).toHaveBeenCalledWith({ gatewayId: 'bluesnapdirect', methodId: 'pay_by_bank', + integrations: [createBlueSnapDirectAPMPaymentStrategy], }); }); diff --git a/packages/bluesnap-direct-integration/src/BlueSnapDirectPayByBankPaymentMethod.tsx b/packages/bluesnap-direct-integration/src/BlueSnapDirectPayByBankPaymentMethod.tsx index 95a7620490..113679b944 100644 --- a/packages/bluesnap-direct-integration/src/BlueSnapDirectPayByBankPaymentMethod.tsx +++ b/packages/bluesnap-direct-integration/src/BlueSnapDirectPayByBankPaymentMethod.tsx @@ -1,3 +1,4 @@ +import { createBlueSnapDirectAPMPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/bluesnap-direct'; import React, { type FunctionComponent, useCallback, useEffect } from 'react'; import { @@ -27,6 +28,7 @@ const BlueSnapDirectPayByBankPaymentMethod: FunctionComponent { expect(initializePayment).toHaveBeenCalledWith({ gatewayId: 'bluesnapdirect', methodId: 'sepa_direct_debit', + integrations: [createBlueSnapDirectAPMPaymentStrategy], }); }); diff --git a/packages/bluesnap-direct-integration/src/BlueSnapDirectSepaPaymentMethod.tsx b/packages/bluesnap-direct-integration/src/BlueSnapDirectSepaPaymentMethod.tsx index 85c9aa21c3..f211b0b524 100644 --- a/packages/bluesnap-direct-integration/src/BlueSnapDirectSepaPaymentMethod.tsx +++ b/packages/bluesnap-direct-integration/src/BlueSnapDirectSepaPaymentMethod.tsx @@ -1,3 +1,4 @@ +import { createBlueSnapDirectAPMPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/bluesnap-direct'; import React, { type FunctionComponent, useCallback, useEffect, useState } from 'react'; import { @@ -48,6 +49,7 @@ const BlueSnapDirectSepaPaymentMethod: FunctionComponent = ( await initializePayment({ gatewayId: method.gateway, methodId: method.id, + integrations: [createBlueSnapDirectAPMPaymentStrategy], }); }, [initializePayment, method]); diff --git a/packages/bluesnap-direct-integration/src/BlueSnapV2PaymentMethod.tsx b/packages/bluesnap-direct-integration/src/BlueSnapV2PaymentMethod.tsx index 9b9caa01c5..198b23a4aa 100644 --- a/packages/bluesnap-direct-integration/src/BlueSnapV2PaymentMethod.tsx +++ b/packages/bluesnap-direct-integration/src/BlueSnapV2PaymentMethod.tsx @@ -18,6 +18,7 @@ import { toResolvableComponent, } from '@bigcommerce/checkout/payment-integration-api'; import { LoadingOverlay, Modal } from '@bigcommerce/checkout/ui'; +import { createBlueSnapV2PaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/bluesnap-direct'; export type BlueSnapV2PaymentMethodProps = HostedPaymentComponentProps; @@ -52,6 +53,7 @@ const BlueSnapV2PaymentMethod: FunctionComponent = ({ (options: PaymentInitializeOptions) => { return checkoutService.initializePayment({ ...options, + integrations: [createBlueSnapV2PaymentStrategy], bluesnapv2: { onLoad(content: HTMLIFrameElement, cancel: () => void) { setPaymentPageContent(content); diff --git a/packages/bolt-integration/src/BoltClientPaymentMethod.tsx b/packages/bolt-integration/src/BoltClientPaymentMethod.tsx index 0f1ed44648..a2aa5e00c6 100644 --- a/packages/bolt-integration/src/BoltClientPaymentMethod.tsx +++ b/packages/bolt-integration/src/BoltClientPaymentMethod.tsx @@ -1,4 +1,5 @@ import { type CheckoutService, type PaymentInitializeOptions } from '@bigcommerce/checkout-sdk'; +import { createBoltPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/bolt'; import React, { type FunctionComponent, useCallback } from 'react'; import { HostedPaymentComponent } from '@bigcommerce/checkout/hosted-payment-integration'; @@ -14,6 +15,7 @@ const BoltClientPaymentMethod: FunctionComponent = ({ (options: PaymentInitializeOptions) => checkoutService.initializePayment({ ...options, + integrations: [createBoltPaymentStrategy], bolt: { useBigCommerceCheckout: true, }, diff --git a/packages/bolt-integration/src/BoltEmbeddedPaymentMethod.tsx b/packages/bolt-integration/src/BoltEmbeddedPaymentMethod.tsx index f72182cc4a..04cdf6463a 100644 --- a/packages/bolt-integration/src/BoltEmbeddedPaymentMethod.tsx +++ b/packages/bolt-integration/src/BoltEmbeddedPaymentMethod.tsx @@ -1,5 +1,8 @@ import { type CustomerInitializeOptions } from '@bigcommerce/checkout-sdk'; -import { createBoltCustomerStrategy } from '@bigcommerce/checkout-sdk/integrations/bolt'; +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'; @@ -34,6 +37,7 @@ const BoltEmbeddedPaymentMethod: FunctionComponent = ({ (options: any) => checkoutService.initializePayment({ ...options, + integrations: [createBoltPaymentStrategy], bolt: { containerId: boltEmbeddedContainerId, useBigCommerceCheckout: true, diff --git a/packages/braintree-integration/src/BraintreeAch/BraintreeAchPaymentMethod.test.tsx b/packages/braintree-integration/src/BraintreeAch/BraintreeAchPaymentMethod.test.tsx index f20b8c80d0..efc11a5f22 100644 --- a/packages/braintree-integration/src/BraintreeAch/BraintreeAchPaymentMethod.test.tsx +++ b/packages/braintree-integration/src/BraintreeAch/BraintreeAchPaymentMethod.test.tsx @@ -4,6 +4,7 @@ import { type CheckoutService, createCheckoutService, } from '@bigcommerce/checkout-sdk'; +import { createBraintreeAchPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/braintree'; import { Formik } from 'formik'; import { noop } from 'lodash'; import React, { type FunctionComponent } from 'react'; @@ -108,6 +109,7 @@ describe('BraintreeAchPaymentForm', () => { }, gatewayId: undefined, methodId: 'braintreeach', + integrations: [createBraintreeAchPaymentStrategy], }); }); diff --git a/packages/braintree-integration/src/BraintreeAch/BraintreeAchPaymentMethod.tsx b/packages/braintree-integration/src/BraintreeAch/BraintreeAchPaymentMethod.tsx index ede75ee9fc..c212dbc7a7 100644 --- a/packages/braintree-integration/src/BraintreeAch/BraintreeAchPaymentMethod.tsx +++ b/packages/braintree-integration/src/BraintreeAch/BraintreeAchPaymentMethod.tsx @@ -1,3 +1,4 @@ +import { createBraintreeAchPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/braintree'; import React, { type FunctionComponent, useEffect, useRef } from 'react'; import { LocaleProvider } from '@bigcommerce/checkout/locale'; @@ -30,6 +31,7 @@ const BraintreeAchPaymentMethod: FunctionComponent = ({ await checkoutService.initializePayment({ gatewayId: method.gateway, methodId: method.id, + integrations: [createBraintreeAchPaymentStrategy], braintreeach: { getMandateText: () => currentMandateTextRef.current, }, diff --git a/packages/braintree-integration/src/BraintreeFastlane/BraintreeFastlanePaymentMethod.test.tsx b/packages/braintree-integration/src/BraintreeFastlane/BraintreeFastlanePaymentMethod.test.tsx index 6f0b48f5bc..5c06816de2 100644 --- a/packages/braintree-integration/src/BraintreeFastlane/BraintreeFastlanePaymentMethod.test.tsx +++ b/packages/braintree-integration/src/BraintreeFastlane/BraintreeFastlanePaymentMethod.test.tsx @@ -1,4 +1,5 @@ import { createCheckoutService, createLanguageService } from '@bigcommerce/checkout-sdk'; +import { createBraintreeFastlanePaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/braintree'; import React from 'react'; import { getPaymentFormServiceMock } from '@bigcommerce/checkout/test-mocks'; @@ -44,6 +45,7 @@ describe('BraintreeFastlanePaymentMethod', () => { expect(initializePayment).toHaveBeenCalledWith({ methodId: props.method.id, + integrations: [createBraintreeFastlanePaymentStrategy], braintreefastlane: { onInit: expect.any(Function), onChange: expect.any(Function), diff --git a/packages/braintree-integration/src/BraintreeFastlane/BraintreeFastlanePaymentMethod.tsx b/packages/braintree-integration/src/BraintreeFastlane/BraintreeFastlanePaymentMethod.tsx index 774098cb98..99a79bd508 100644 --- a/packages/braintree-integration/src/BraintreeFastlane/BraintreeFastlanePaymentMethod.tsx +++ b/packages/braintree-integration/src/BraintreeFastlane/BraintreeFastlanePaymentMethod.tsx @@ -1,4 +1,5 @@ import { type CardInstrument } from '@bigcommerce/checkout-sdk'; +import { createBraintreeFastlanePaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/braintree'; import React, { type FunctionComponent, useEffect, useRef } from 'react'; import { LocaleProvider } from '@bigcommerce/checkout/locale'; @@ -35,6 +36,7 @@ const BraintreeFastlanePaymentMethod: FunctionComponent = ({ try { await checkoutService.initializePayment({ methodId: method.id, + integrations: [createBraintreeFastlanePaymentStrategy], braintreefastlane: { onInit: (renderPayPalCardComponent) => { paypalFastlaneComponentRef.current.renderPayPalCardComponent = diff --git a/packages/braintree-integration/src/BraintreeLocalMethod.test.tsx b/packages/braintree-integration/src/BraintreeLocalMethod.test.tsx index 0ec6a1b16f..5214276e63 100644 --- a/packages/braintree-integration/src/BraintreeLocalMethod.test.tsx +++ b/packages/braintree-integration/src/BraintreeLocalMethod.test.tsx @@ -1,4 +1,5 @@ import { createCheckoutService, type LanguageService } from '@bigcommerce/checkout-sdk'; +import { createBraintreeLocalMethodsPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/braintree'; import { EventEmitter } from 'events'; import React from 'react'; @@ -39,6 +40,7 @@ describe('BraintreeLocalMethod', () => { expect(initializePayment).toHaveBeenCalledWith({ gatewayId: props.method.gateway, methodId: props.method.id, + integrations: [createBraintreeLocalMethodsPaymentStrategy], braintreelocalmethods: { container: '#checkout-payment-continue', buttonText: props.language.translate('payment.continue_with_brand', { diff --git a/packages/braintree-integration/src/BraintreeLocalPaymentMethod.tsx b/packages/braintree-integration/src/BraintreeLocalPaymentMethod.tsx index 4a857692f0..598c263b10 100644 --- a/packages/braintree-integration/src/BraintreeLocalPaymentMethod.tsx +++ b/packages/braintree-integration/src/BraintreeLocalPaymentMethod.tsx @@ -1,3 +1,4 @@ +import { createBraintreeLocalMethodsPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/braintree'; import React, { type FunctionComponent, useEffect } from 'react'; import { @@ -6,7 +7,7 @@ import { toResolvableComponent, } from '@bigcommerce/checkout/payment-integration-api'; -const BraintreeLocalPaymentMethod: FunctionComponent = ({ +const BraintreeLocalPaymentMethod: FunctionComponent = ({ method, checkoutService, paymentForm, @@ -20,6 +21,7 @@ const BraintreeLocalPaymentMethod: FunctionComponent = ({ await checkoutService.initializePayment({ gatewayId: method.gateway, methodId: method.id, + integrations: [createBraintreeLocalMethodsPaymentStrategy], braintreelocalmethods: { container: '#checkout-payment-continue', buttonText: language.translate('payment.continue_with_brand', { diff --git a/packages/braintree-integration/src/BraintreePaypalPaymentMethod.test.tsx b/packages/braintree-integration/src/BraintreePaypalPaymentMethod.test.tsx index 53346960d8..abc6c37bc1 100644 --- a/packages/braintree-integration/src/BraintreePaypalPaymentMethod.test.tsx +++ b/packages/braintree-integration/src/BraintreePaypalPaymentMethod.test.tsx @@ -1,4 +1,5 @@ import { createCheckoutService, type LanguageService } from '@bigcommerce/checkout-sdk'; +import { createBraintreePaypalPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/braintree'; import { EventEmitter } from 'events'; import { Formik } from 'formik'; import { noop } from 'lodash'; @@ -107,6 +108,7 @@ describe('BraintreePaypalPaymentMethod', () => { expect(initializePayment).toHaveBeenCalledWith({ gatewayId: defaultProps.method.gateway, methodId: defaultProps.method.id, + integrations: [createBraintreePaypalPaymentStrategy], braintree: { onError: expect.any(Function), onRenderButton: expect.any(Function), diff --git a/packages/braintree-integration/src/BraintreePaypalPaymentMethod.tsx b/packages/braintree-integration/src/BraintreePaypalPaymentMethod.tsx index b7fcfaca23..6443e235d2 100644 --- a/packages/braintree-integration/src/BraintreePaypalPaymentMethod.tsx +++ b/packages/braintree-integration/src/BraintreePaypalPaymentMethod.tsx @@ -1,4 +1,5 @@ import { type PaymentInitializeOptions } from '@bigcommerce/checkout-sdk'; +import { createBraintreePaypalPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/braintree'; import React, { type FunctionComponent, useCallback } from 'react'; import { HostedPaymentComponent } from '@bigcommerce/checkout/hosted-payment-integration'; @@ -18,6 +19,7 @@ const BraintreePaypalPaymentMethod: FunctionComponent = ({ return checkoutService.initializePayment({ ...defaultOptions, + integrations: [createBraintreePaypalPaymentStrategy], braintree: { containerId: '#checkout-payment-continue', submitForm: () => { diff --git a/packages/checkout-extension/src/ExtensionRegionContainer.ts b/packages/checkout-extension/src/ExtensionRegionContainer.ts index 895e7caa34..0749837dce 100644 --- a/packages/checkout-extension/src/ExtensionRegionContainer.ts +++ b/packages/checkout-extension/src/ExtensionRegionContainer.ts @@ -1,4 +1,4 @@ -import { ExtensionRegion } from '@bigcommerce/checkout-sdk'; +import { ExtensionRegion } from '@bigcommerce/checkout-sdk/essential'; export enum ExtensionRegionContainer { ShippingShippingAddressFormBefore = 'extension-region-shipping-shippingaddressform-before', diff --git a/packages/checkout-extension/src/handler/commandHandlers/createReRenderShippingFormHandler.ts b/packages/checkout-extension/src/handler/commandHandlers/createReRenderShippingFormHandler.ts index 8429e56e30..968a936fbe 100644 --- a/packages/checkout-extension/src/handler/commandHandlers/createReRenderShippingFormHandler.ts +++ b/packages/checkout-extension/src/handler/commandHandlers/createReRenderShippingFormHandler.ts @@ -1,4 +1,4 @@ -import { ExtensionCommandType } from '@bigcommerce/checkout-sdk'; +import { ExtensionCommandType } from '@bigcommerce/checkout-sdk/essential'; import { ExtensionActionType } from '../../ExtensionProvider'; diff --git a/packages/checkout-extension/src/handler/commandHandlers/createReRenderShippingStepHandler.ts b/packages/checkout-extension/src/handler/commandHandlers/createReRenderShippingStepHandler.ts index e2fdf99a61..c175d19b14 100644 --- a/packages/checkout-extension/src/handler/commandHandlers/createReRenderShippingStepHandler.ts +++ b/packages/checkout-extension/src/handler/commandHandlers/createReRenderShippingStepHandler.ts @@ -1,4 +1,4 @@ -import { ExtensionCommandType } from '@bigcommerce/checkout-sdk'; +import { ExtensionCommandType } from '@bigcommerce/checkout-sdk/essential'; import { ExtensionActionType } from '../../ExtensionProvider'; diff --git a/packages/checkout-extension/src/handler/commandHandlers/createReloadCheckoutHandler.ts b/packages/checkout-extension/src/handler/commandHandlers/createReloadCheckoutHandler.ts index cf7030664e..be33827635 100644 --- a/packages/checkout-extension/src/handler/commandHandlers/createReloadCheckoutHandler.ts +++ b/packages/checkout-extension/src/handler/commandHandlers/createReloadCheckoutHandler.ts @@ -1,4 +1,4 @@ -import { ExtensionCommandType } from '@bigcommerce/checkout-sdk'; +import { ExtensionCommandType } from '@bigcommerce/checkout-sdk/essential'; import { type CommandHandler, type CommandHandlerProps } from './CommandHandler'; diff --git a/packages/checkout-extension/src/handler/commandHandlers/createSetIframeStyleHandler.ts b/packages/checkout-extension/src/handler/commandHandlers/createSetIframeStyleHandler.ts index ffc440b70e..11da3f2701 100644 --- a/packages/checkout-extension/src/handler/commandHandlers/createSetIframeStyleHandler.ts +++ b/packages/checkout-extension/src/handler/commandHandlers/createSetIframeStyleHandler.ts @@ -1,4 +1,4 @@ -import { ExtensionCommandType } from '@bigcommerce/checkout-sdk'; +import { ExtensionCommandType } from '@bigcommerce/checkout-sdk/essential'; import { type CommandHandler, type CommandHandlerProps } from './CommandHandler'; diff --git a/packages/checkout-extension/src/handler/commandHandlers/createShowLoadingIndicatorHandler.ts b/packages/checkout-extension/src/handler/commandHandlers/createShowLoadingIndicatorHandler.ts index 1cafdb1d14..f11a80c57b 100644 --- a/packages/checkout-extension/src/handler/commandHandlers/createShowLoadingIndicatorHandler.ts +++ b/packages/checkout-extension/src/handler/commandHandlers/createShowLoadingIndicatorHandler.ts @@ -1,4 +1,4 @@ -import { ExtensionCommandType } from '@bigcommerce/checkout-sdk'; +import { ExtensionCommandType } from '@bigcommerce/checkout-sdk/essential'; import { ExtensionActionType } from '../../ExtensionProvider'; diff --git a/packages/checkout-extension/src/handler/queryHandlers/createGetConsignmentHandler.ts b/packages/checkout-extension/src/handler/queryHandlers/createGetConsignmentHandler.ts index 5e97af9373..211b549ef8 100644 --- a/packages/checkout-extension/src/handler/queryHandlers/createGetConsignmentHandler.ts +++ b/packages/checkout-extension/src/handler/queryHandlers/createGetConsignmentHandler.ts @@ -1,4 +1,4 @@ -import { ExtensionMessageType, ExtensionQueryType } from '@bigcommerce/checkout-sdk'; +import { ExtensionMessageType, ExtensionQueryType } from '@bigcommerce/checkout-sdk/essential'; import { type QueryHandler, type QueryHandlerProps } from './QueryHandler'; diff --git a/packages/checkoutcom-integration/src/CheckoutcomCustomPaymentMethod.tsx b/packages/checkoutcom-integration/src/CheckoutcomCustomPaymentMethod.tsx index ce1b623b93..75fbf42ff9 100644 --- a/packages/checkoutcom-integration/src/CheckoutcomCustomPaymentMethod.tsx +++ b/packages/checkoutcom-integration/src/CheckoutcomCustomPaymentMethod.tsx @@ -1,4 +1,12 @@ -import React, { type FunctionComponent } from 'react'; +import { type PaymentInitializeOptions } from '@bigcommerce/checkout-sdk'; +import { + createCheckoutComAPMPaymentStrategy, + createCheckoutComCreditCardPaymentStrategy, + createCheckoutComFawryPaymentStrategy, + createCheckoutComIdealPaymentStrategy, + createCheckoutComSepaPaymentStrategy, +} from '@bigcommerce/checkout-sdk/integrations/checkoutcom-custom'; +import React, { type FunctionComponent, useCallback } from 'react'; import { CreditCardPaymentMethodComponent, @@ -44,6 +52,22 @@ const CheckoutcomCustomPaymentMethod: FunctionComponent = ({ const billingAddress = checkoutState.data.getBillingAddress(); + const initializeCheckoutcomCustomPayment = useCallback( + (options: PaymentInitializeOptions) => { + return checkoutService.initializePayment({ + ...options, + integrations: [ + createCheckoutComAPMPaymentStrategy, + createCheckoutComCreditCardPaymentStrategy, + createCheckoutComFawryPaymentStrategy, + createCheckoutComIdealPaymentStrategy, + createCheckoutComSepaPaymentStrategy, + ], + }); + }, + [checkoutService], + ); + if ( !isCheckoutcomPaymentMethod(checkoutCustomMethod) || (checkoutCustomMethod === 'ideal' && isIdealHostedPageExperimentOn) @@ -56,10 +80,11 @@ const CheckoutcomCustomPaymentMethod: FunctionComponent = ({ checkoutService={checkoutService} checkoutState={checkoutState} deinitializePayment={checkoutService.deinitializePayment} - initializePayment={checkoutService.initializePayment} + initializePayment={initializeCheckoutcomCustomPayment} language={language} method={method} {...rest} + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion cardFieldset={} cardValidationSchema={getCheckoutcomValidationSchemas({ paymentMethod: checkoutCustomMethod, diff --git a/packages/clearpay-integration/src/ClearpayPaymentMethod.tsx b/packages/clearpay-integration/src/ClearpayPaymentMethod.tsx index 89599fdc37..59c62a501c 100644 --- a/packages/clearpay-integration/src/ClearpayPaymentMethod.tsx +++ b/packages/clearpay-integration/src/ClearpayPaymentMethod.tsx @@ -1,4 +1,6 @@ -import React, { type FunctionComponent } from 'react'; +import { type PaymentInitializeOptions } from '@bigcommerce/checkout-sdk'; +import { createClearpayPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/clearpay'; +import React, { type FunctionComponent, useCallback } from 'react'; import { HostedPaymentComponent } from '@bigcommerce/checkout/hosted-payment-integration'; import { @@ -14,13 +16,23 @@ const ClearpayPaymentMethod: FunctionComponent = ({ paymentForm, ...rest }) => { + const initializeClearpayPayment = useCallback( + (options: PaymentInitializeOptions) => { + return checkoutService.initializePayment({ + ...options, + integrations: [createClearpayPaymentStrategy], + }); + }, + [checkoutService], + ); + return ( diff --git a/packages/core/src/app/checkout/CheckoutApp.tsx b/packages/core/src/app/checkout/CheckoutApp.tsx index ea3e6bc478..bdef35eeac 100644 --- a/packages/core/src/app/checkout/CheckoutApp.tsx +++ b/packages/core/src/app/checkout/CheckoutApp.tsx @@ -1,4 +1,4 @@ -import { createCheckoutService, createEmbeddedCheckoutMessenger } from '@bigcommerce/checkout-sdk'; +import { createCheckoutService, createEmbeddedCheckoutMessenger } from '@bigcommerce/checkout-sdk/essential'; import type { BrowserOptions } from '@sentry/browser'; import React, { type ReactElement, useEffect, useMemo } from 'react'; import ReactModal from 'react-modal'; diff --git a/packages/core/src/app/checkout/CheckoutPage.tsx b/packages/core/src/app/checkout/CheckoutPage.tsx index c655e0feea..d8cfe306a4 100644 --- a/packages/core/src/app/checkout/CheckoutPage.tsx +++ b/packages/core/src/app/checkout/CheckoutPage.tsx @@ -13,7 +13,7 @@ import { type PaymentMethod, type Promotion, type RequestOptions, -} from '@bigcommerce/checkout-sdk'; +} from '@bigcommerce/checkout-sdk/essential'; import classNames from 'classnames'; import { find, findIndex } from 'lodash'; import React, { Component, lazy, type ReactNode } from 'react'; diff --git a/packages/core/src/app/order/OrderConfirmationApp.tsx b/packages/core/src/app/order/OrderConfirmationApp.tsx index ccb9f55aca..b17d20af54 100644 --- a/packages/core/src/app/order/OrderConfirmationApp.tsx +++ b/packages/core/src/app/order/OrderConfirmationApp.tsx @@ -1,4 +1,4 @@ -import { createCheckoutService, createEmbeddedCheckoutMessenger } from '@bigcommerce/checkout-sdk'; +import { createCheckoutService, createEmbeddedCheckoutMessenger } from '@bigcommerce/checkout-sdk/essential'; import type { BrowserOptions } from '@sentry/browser'; import React, { useCallback, useEffect, useMemo } from 'react'; import ReactModal from 'react-modal'; diff --git a/packages/core/src/app/order/OrderSummary.tsx b/packages/core/src/app/order/OrderSummary.tsx index ee12a09901..33626b8e70 100644 --- a/packages/core/src/app/order/OrderSummary.tsx +++ b/packages/core/src/app/order/OrderSummary.tsx @@ -3,7 +3,7 @@ import { type LineItemMap, type ShopperCurrency, type StoreCurrency, -} from '@bigcommerce/checkout-sdk'; +} from '@bigcommerce/checkout-sdk/essential'; import classNames from 'classnames'; import React, { type FunctionComponent, type ReactNode, useMemo } from 'react'; diff --git a/packages/core/src/app/payment/PaymentForm.tsx b/packages/core/src/app/payment/PaymentForm.tsx index 4788783257..9a36428240 100644 --- a/packages/core/src/app/payment/PaymentForm.tsx +++ b/packages/core/src/app/payment/PaymentForm.tsx @@ -1,4 +1,4 @@ -import { ExtensionRegion, type PaymentMethod } from '@bigcommerce/checkout-sdk'; +import { ExtensionRegion, type PaymentMethod } from '@bigcommerce/checkout-sdk/essential'; import { type FormikProps, type FormikState, withFormik, type WithFormikConfig } from 'formik'; import { isNil, noop, omitBy } from 'lodash'; import React, { type FunctionComponent, memo, useCallback, useContext, useMemo } from 'react'; diff --git a/packages/core/src/app/payment/paymentMethod/CreditCardPaymentMethod.tsx b/packages/core/src/app/payment/paymentMethod/CreditCardPaymentMethod.tsx index 6ab795ed3a..4c74fb72d0 100644 --- a/packages/core/src/app/payment/paymentMethod/CreditCardPaymentMethod.tsx +++ b/packages/core/src/app/payment/paymentMethod/CreditCardPaymentMethod.tsx @@ -8,6 +8,7 @@ import { type PaymentMethod, type PaymentRequestOptions, } from '@bigcommerce/checkout-sdk'; +import { createLegacyPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/legacy'; import { memoizeOne } from '@bigcommerce/memoize'; import { find, noop } from 'lodash'; import React, { Component, type ReactNode } from 'react'; @@ -115,6 +116,7 @@ class CreditCardPaymentMethod extends Component< { gatewayId: method.gateway, methodId: method.id, + integrations: [createLegacyPaymentStrategy], }, this.getSelectedInstrument(), ).then(() => this.setState({ isPreloaderOn: false })); @@ -173,6 +175,7 @@ class CreditCardPaymentMethod extends Component< { gatewayId: method.gateway, methodId: method.id, + integrations: [createLegacyPaymentStrategy], }, this.getSelectedInstrument(), ); diff --git a/packages/core/src/app/payment/paymentMethod/HostedCreditCardPaymentMethod.tsx b/packages/core/src/app/payment/paymentMethod/HostedCreditCardPaymentMethod.tsx index 14d504b405..7b5c85e402 100644 --- a/packages/core/src/app/payment/paymentMethod/HostedCreditCardPaymentMethod.tsx +++ b/packages/core/src/app/payment/paymentMethod/HostedCreditCardPaymentMethod.tsx @@ -1,3 +1,6 @@ +import { createCreditCardPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/credit-card'; +import { createCyberSourcePaymentStrategy, createCyberSourceV2PaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/cybersource'; +import { createSagePayPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/sagepay'; import React, { type FunctionComponent, useCallback } from 'react'; import { @@ -31,6 +34,13 @@ const HostedCreditCardPaymentMethod: FunctionComponent< async (options, selectedInstrument) => { return initializePayment({ ...options, + integrations: [ + ...options.integrations ?? [], + createCreditCardPaymentStrategy, + createCyberSourcePaymentStrategy, + createCyberSourceV2PaymentStrategy, + createSagePayPaymentStrategy, + ], creditCard: getHostedFormOptions && { form: await getHostedFormOptions(selectedInstrument), }, diff --git a/packages/core/src/app/payment/paymentMethod/HostedPaymentMethod.tsx b/packages/core/src/app/payment/paymentMethod/HostedPaymentMethod.tsx index 5bb07c8cda..27ce641a90 100644 --- a/packages/core/src/app/payment/paymentMethod/HostedPaymentMethod.tsx +++ b/packages/core/src/app/payment/paymentMethod/HostedPaymentMethod.tsx @@ -6,6 +6,9 @@ import { type PaymentMethod, type PaymentRequestOptions, } from '@bigcommerce/checkout-sdk'; +import { createExternalPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/external'; +import { createHummPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/humm'; +import { createOffsitePaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/offsite'; import { memoizeOne } from '@bigcommerce/memoize'; import { find, noop } from 'lodash'; import React, { Component, type ReactNode } from 'react'; @@ -74,6 +77,11 @@ class HostedPaymentMethod extends Component< await initializePayment({ gatewayId: method.gateway, methodId: method.id, + integrations: [ + createHummPaymentStrategy, + createExternalPaymentStrategy, + createOffsitePaymentStrategy, + ], }); if (isInstrumentFeatureAvailableProp) { diff --git a/packages/core/src/app/payment/paymentMethod/PaymentMethod.tsx b/packages/core/src/app/payment/paymentMethod/PaymentMethod.tsx index 808049944f..03abf52fa6 100644 --- a/packages/core/src/app/payment/paymentMethod/PaymentMethod.tsx +++ b/packages/core/src/app/payment/paymentMethod/PaymentMethod.tsx @@ -6,6 +6,11 @@ import { type PaymentMethod, type PaymentRequestOptions, } from '@bigcommerce/checkout-sdk'; +import { createNoPaymentStrategy, } from '@bigcommerce/checkout-sdk/integrations/no-payment'; +import { createPayPalProPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/paypal-pro'; +import { createSezzlePaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/sezzle'; +import { createTDOnlineMartPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/td-bank'; +import { createZipPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/zip'; import React, { type FunctionComponent, lazy, memo, Suspense } from 'react'; import { type CheckoutContextProps } from '@bigcommerce/checkout/payment-integration-api'; @@ -89,7 +94,21 @@ function mapToWithCheckoutPaymentMethodProps( deinitializeCustomer: checkoutService.deinitializeCustomer, deinitializePayment: checkoutService.deinitializePayment, initializeCustomer: checkoutService.initializeCustomer, - initializePayment: checkoutService.initializePayment, + initializePayment: (options) => { + return checkoutService.initializePayment({ + ...options, + integrations: [ + ...options.integrations ?? [], + // The strategies below don’t appear to correspond to any existing component, + // so they are initialized globally at the root level. + createNoPaymentStrategy, + createPayPalProPaymentStrategy, + createSezzlePaymentStrategy, + createTDOnlineMartPaymentStrategy, + createZipPaymentStrategy, + ], + }); + }, isInitializing: isInitializingPayment(method.id), }; } diff --git a/packages/core/src/app/payment/paymentMethod/PaymentMethodV2.tsx b/packages/core/src/app/payment/paymentMethod/PaymentMethodV2.tsx index 634f87fbb5..4f88a62d86 100644 --- a/packages/core/src/app/payment/paymentMethod/PaymentMethodV2.tsx +++ b/packages/core/src/app/payment/paymentMethod/PaymentMethodV2.tsx @@ -1,8 +1,9 @@ import { type PaymentMethod } from '@bigcommerce/checkout-sdk'; -import React, { type ComponentType, Suspense } from 'react'; +import React, { type ComponentType, lazy, Suspense } from 'react'; import { withLanguage, type WithLanguageProps } from '@bigcommerce/checkout/locale'; import { PaymentFormProvider, type PaymentFormValues } from '@bigcommerce/checkout/payment-integration-api'; +import { LazyContainer } from '@bigcommerce/checkout/ui'; import { withCheckout, type WithCheckoutProps } from '../../checkout'; import { connectFormik, type WithFormikProps } from '../../common/form'; @@ -11,7 +12,7 @@ import createPaymentFormService from '../createPaymentFormService'; import resolvePaymentMethod from '../resolvePaymentMethod'; import withPayment, { type WithPaymentProps } from '../withPayment'; -import { default as PaymentMethodV1 } from './PaymentMethod'; +const PaymentMethodV1 = lazy(() => import(/* webpackChunkName: "payment-method-v1" */'./PaymentMethod')); export interface PaymentMethodProps { method: PaymentMethod; @@ -65,12 +66,14 @@ const PaymentMethodContainer: ComponentType< if (!ResolvedPaymentMethod) { return ( - + + + ); } diff --git a/packages/core/src/app/shipping/ConsignmentLineItem.tsx b/packages/core/src/app/shipping/ConsignmentLineItem.tsx index 96c12319d9..fcf7bf368e 100644 --- a/packages/core/src/app/shipping/ConsignmentLineItem.tsx +++ b/packages/core/src/app/shipping/ConsignmentLineItem.tsx @@ -1,4 +1,4 @@ -import { ConsignmentLineItem } from "@bigcommerce/checkout-sdk"; +import { type ConsignmentLineItem } from "@bigcommerce/checkout-sdk"; import classNames from "classnames"; import React, { type FunctionComponent, useState } from "react"; diff --git a/packages/core/src/app/shipping/ShippingFormFooter.tsx b/packages/core/src/app/shipping/ShippingFormFooter.tsx index e9834be980..df7512531c 100644 --- a/packages/core/src/app/shipping/ShippingFormFooter.tsx +++ b/packages/core/src/app/shipping/ShippingFormFooter.tsx @@ -1,4 +1,4 @@ -import { ExtensionRegion } from '@bigcommerce/checkout-sdk'; +import { ExtensionRegion } from '@bigcommerce/checkout-sdk/essential'; import React, { type FunctionComponent } from 'react'; import { Extension } from '@bigcommerce/checkout/checkout-extension'; diff --git a/packages/core/src/app/shipping/ShippingHeader.tsx b/packages/core/src/app/shipping/ShippingHeader.tsx index 460440d16a..af5ec0781f 100644 --- a/packages/core/src/app/shipping/ShippingHeader.tsx +++ b/packages/core/src/app/shipping/ShippingHeader.tsx @@ -1,4 +1,4 @@ -import { ExtensionRegion } from '@bigcommerce/checkout-sdk'; +import { ExtensionRegion } from '@bigcommerce/checkout-sdk/essential'; import classNames from 'classnames'; import React, { type FunctionComponent, memo, useState } from 'react'; diff --git a/packages/core/src/app/shipping/shippingOption/ShippingOptionsList.tsx b/packages/core/src/app/shipping/shippingOption/ShippingOptionsList.tsx index 3225c10781..04303f4cd1 100644 --- a/packages/core/src/app/shipping/shippingOption/ShippingOptionsList.tsx +++ b/packages/core/src/app/shipping/shippingOption/ShippingOptionsList.tsx @@ -1,4 +1,4 @@ -import { ExtensionRegion, type ShippingOption } from '@bigcommerce/checkout-sdk'; +import { ExtensionRegion, type ShippingOption } from '@bigcommerce/checkout-sdk/essential'; import React, { type FunctionComponent, memo, useCallback } from 'react'; import { Extension } from '@bigcommerce/checkout/checkout-extension'; diff --git a/packages/google-pay-integration/src/GooglePayPaymentMethod.test.tsx b/packages/google-pay-integration/src/GooglePayPaymentMethod.test.tsx index 9aa9789573..f4548234d4 100644 --- a/packages/google-pay-integration/src/GooglePayPaymentMethod.test.tsx +++ b/packages/google-pay-integration/src/GooglePayPaymentMethod.test.tsx @@ -6,6 +6,20 @@ import { type PaymentInitializeOptions, type PaymentMethod, } from '@bigcommerce/checkout-sdk'; +import { + createGooglePayAdyenV2PaymentStrategy, + createGooglePayAdyenV3PaymentStrategy, + createGooglePayAuthorizeNetPaymentStrategy, + createGooglePayBigCommercePaymentsPaymentStrategy, + createGooglePayBraintreePaymentStrategy, + createGooglePayCheckoutComPaymentStrategy, + createGooglePayCybersourcePaymentStrategy, + createGooglePayOrbitalPaymentStrategy, + createGooglePayPPCPPaymentStrategy, + createGooglePayStripePaymentStrategy, + createGooglePayTdOnlineMartPaymentStrategy, + createGooglePayWorldpayAccessPaymentStrategy, +} from '@bigcommerce/checkout-sdk/integrations/google-pay'; import { Formik } from 'formik'; import each from 'jest-each'; import { noop } from 'lodash'; @@ -96,7 +110,24 @@ describe('when using Google Pay payment', () => { it('initializes payment method when component mounts', () => { render(); - expect(checkoutService.initializePayment).toHaveBeenCalled(); + expect(checkoutService.initializePayment).toHaveBeenCalledWith( + expect.objectContaining({ + integrations: [ + createGooglePayAdyenV2PaymentStrategy, + createGooglePayAdyenV3PaymentStrategy, + createGooglePayAuthorizeNetPaymentStrategy, + createGooglePayCheckoutComPaymentStrategy, + createGooglePayCybersourcePaymentStrategy, + createGooglePayOrbitalPaymentStrategy, + createGooglePayStripePaymentStrategy, + createGooglePayWorldpayAccessPaymentStrategy, + createGooglePayBraintreePaymentStrategy, + createGooglePayPPCPPaymentStrategy, + createGooglePayBigCommercePaymentsPaymentStrategy, + createGooglePayTdOnlineMartPaymentStrategy, + ], + }), + ); }); it('renders Visa Checkout as wallet button method', () => { diff --git a/packages/google-pay-integration/src/GooglePayPaymentMethod.tsx b/packages/google-pay-integration/src/GooglePayPaymentMethod.tsx index beeca7a69d..6fb3b144e2 100644 --- a/packages/google-pay-integration/src/GooglePayPaymentMethod.tsx +++ b/packages/google-pay-integration/src/GooglePayPaymentMethod.tsx @@ -1,4 +1,18 @@ import { type PaymentInitializeOptions } from '@bigcommerce/checkout-sdk'; +import { + createGooglePayAdyenV2PaymentStrategy, + createGooglePayAdyenV3PaymentStrategy, + createGooglePayAuthorizeNetPaymentStrategy, + createGooglePayBigCommercePaymentsPaymentStrategy, + createGooglePayBraintreePaymentStrategy, + createGooglePayCheckoutComPaymentStrategy, + createGooglePayCybersourcePaymentStrategy, + createGooglePayOrbitalPaymentStrategy, + createGooglePayPPCPPaymentStrategy, + createGooglePayStripePaymentStrategy, + createGooglePayTdOnlineMartPaymentStrategy, + createGooglePayWorldpayAccessPaymentStrategy, +} from '@bigcommerce/checkout-sdk/integrations/google-pay'; import React, { type FunctionComponent, useCallback } from 'react'; import { @@ -37,8 +51,22 @@ const GooglePayPaymentMethod: FunctionComponent = ({ }; const loadingContainerId = 'checkout-app'; - const mergedOptions = { + const mergedOptions: PaymentInitializeOptions = { ...defaultOptions, + integrations: [ + createGooglePayAdyenV2PaymentStrategy, + createGooglePayAdyenV3PaymentStrategy, + createGooglePayAuthorizeNetPaymentStrategy, + createGooglePayCheckoutComPaymentStrategy, + createGooglePayCybersourcePaymentStrategy, + createGooglePayOrbitalPaymentStrategy, + createGooglePayStripePaymentStrategy, + createGooglePayWorldpayAccessPaymentStrategy, + createGooglePayBraintreePaymentStrategy, + createGooglePayPPCPPaymentStrategy, + createGooglePayBigCommercePaymentsPaymentStrategy, + createGooglePayTdOnlineMartPaymentStrategy, + ], [PaymentMethodId.AdyenV2GooglePay]: { loadingContainerId, walletButton: 'walletButton', diff --git a/packages/hosted-credit-card-integration/src/components/HostedCreditCardComponent.tsx b/packages/hosted-credit-card-integration/src/components/HostedCreditCardComponent.tsx index e11d2f836f..baa2034bec 100644 --- a/packages/hosted-credit-card-integration/src/components/HostedCreditCardComponent.tsx +++ b/packages/hosted-credit-card-integration/src/components/HostedCreditCardComponent.tsx @@ -1,4 +1,6 @@ import { type CardInstrument, type LegacyHostedFormOptions } from '@bigcommerce/checkout-sdk'; +import { createBlueSnapDirectCreditCardPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/bluesnap-direct'; +import { createCreditCardPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/credit-card'; import { compact, forIn } from 'lodash'; import React, { type FunctionComponent, type ReactNode, useCallback, useState } from 'react'; @@ -241,6 +243,10 @@ const HostedCreditCardComponent: FunctionComponent = ({ async (options, selectedInstrument) => { return initializePayment({ ...options, + integrations: [ + createCreditCardPaymentStrategy, + createBlueSnapDirectCreditCardPaymentStrategy, + ], creditCard: { form: await getHostedFormOptions(selectedInstrument), bigpayToken: selectedInstrument?.bigpayToken, diff --git a/packages/klarna-integration/src/klarna/KlarnaPaymentMethod.tsx b/packages/klarna-integration/src/klarna/KlarnaPaymentMethod.tsx index 7955d1aee3..894337bac1 100644 --- a/packages/klarna-integration/src/klarna/KlarnaPaymentMethod.tsx +++ b/packages/klarna-integration/src/klarna/KlarnaPaymentMethod.tsx @@ -1,3 +1,4 @@ +import { createKlarnaPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/klarna'; import { some } from 'lodash'; import React, { type FunctionComponent, useCallback } from 'react'; @@ -24,6 +25,7 @@ const KlarnaPaymentMethod: FunctionComponent = ({ // eslint-disable-next-line @typescript-eslint/no-unsafe-argument checkoutService.initializePayment({ ...options, + integrations: [createKlarnaPaymentStrategy], klarna: { container: `#${options.methodId}Widget`, }, diff --git a/packages/klarna-integration/src/klarnav2/KlarnaV2PaymentMethod.tsx b/packages/klarna-integration/src/klarnav2/KlarnaV2PaymentMethod.tsx index f4b9a0b713..9f2c4668c1 100644 --- a/packages/klarna-integration/src/klarnav2/KlarnaV2PaymentMethod.tsx +++ b/packages/klarna-integration/src/klarnav2/KlarnaV2PaymentMethod.tsx @@ -1,3 +1,4 @@ +import { createKlarnaV2PaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/klarna'; import { some } from 'lodash'; import React, { type FunctionComponent, useCallback } from 'react'; @@ -24,6 +25,7 @@ const KlarnaV2PaymentMethod: FunctionComponent = ({ // eslint-disable-next-line @typescript-eslint/no-unsafe-argument checkoutService.initializePayment({ ...options, + integrations: [createKlarnaV2PaymentStrategy], klarnav2: { container: `#${options.methodId}Widget`, }, diff --git a/packages/locale/src/LocaleProvider.tsx b/packages/locale/src/LocaleProvider.tsx index 944f8a0498..9297d3b5d6 100644 --- a/packages/locale/src/LocaleProvider.tsx +++ b/packages/locale/src/LocaleProvider.tsx @@ -2,7 +2,7 @@ import { type CheckoutService, createCurrencyService, type StoreConfig, -} from '@bigcommerce/checkout-sdk'; +} from '@bigcommerce/checkout-sdk/essential'; import { memoizeOne } from '@bigcommerce/memoize'; import React, { type ReactNode, useEffect, useMemo, useState } from 'react'; diff --git a/packages/locale/src/createLocaleContext.ts b/packages/locale/src/createLocaleContext.ts index 1ed5319705..451cc4f754 100644 --- a/packages/locale/src/createLocaleContext.ts +++ b/packages/locale/src/createLocaleContext.ts @@ -1,4 +1,4 @@ -import { createCurrencyService, type StoreConfig } from '@bigcommerce/checkout-sdk'; +import { createCurrencyService, type StoreConfig } from '@bigcommerce/checkout-sdk/essential'; import getLanguageService from './getLanguageService'; import { type LocaleContextType } from './LocaleContext'; diff --git a/packages/locale/src/getLanguageService.ts b/packages/locale/src/getLanguageService.ts index 6cbbcd1d76..6891803269 100644 --- a/packages/locale/src/getLanguageService.ts +++ b/packages/locale/src/getLanguageService.ts @@ -2,7 +2,7 @@ import { createLanguageService, type LanguageConfig, type LanguageService, -} from '@bigcommerce/checkout-sdk'; +} from '@bigcommerce/checkout-sdk/essential'; import { FALLBACK_LOCALE, FALLBACK_TRANSLATIONS } from './translations'; diff --git a/packages/locale/src/localeContext.mock.tsx b/packages/locale/src/localeContext.mock.tsx index 09a866892c..15eac33cd8 100644 --- a/packages/locale/src/localeContext.mock.tsx +++ b/packages/locale/src/localeContext.mock.tsx @@ -1,4 +1,4 @@ -import { createCurrencyService, createLanguageService } from '@bigcommerce/checkout-sdk'; +import { createCurrencyService, createLanguageService } from '@bigcommerce/checkout-sdk/essential'; import { getStoreConfig } from '@bigcommerce/checkout/test-mocks'; diff --git a/packages/mollie-integration/src/MolliePaymentMethod.tsx b/packages/mollie-integration/src/MolliePaymentMethod.tsx index 3a2b503102..c0dda46df7 100644 --- a/packages/mollie-integration/src/MolliePaymentMethod.tsx +++ b/packages/mollie-integration/src/MolliePaymentMethod.tsx @@ -3,6 +3,7 @@ import { type LegacyHostedFormOptions, type PaymentInitializeOptions, } from '@bigcommerce/checkout-sdk'; +import { createMolliePaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/mollie'; import { compact, forIn, some } from 'lodash'; import React, { type FunctionComponent, @@ -246,6 +247,7 @@ const MolliePaymentMethod: FunctionComponent = ({ return checkoutService.initializePayment({ ...options, + integrations: [createMolliePaymentStrategy], mollie: { containerId, cardNumberId: mollieElements.cardNumberElementOptions.containerId, diff --git a/packages/moneris-integration/src/MonerisPaymentMethod.test.tsx b/packages/moneris-integration/src/MonerisPaymentMethod.test.tsx index 9b441c27fa..e8e681468d 100644 --- a/packages/moneris-integration/src/MonerisPaymentMethod.test.tsx +++ b/packages/moneris-integration/src/MonerisPaymentMethod.test.tsx @@ -5,6 +5,7 @@ import { createLanguageService, type PaymentMethod, } from '@bigcommerce/checkout-sdk'; +import { createMonerisPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/moneris'; import { render } from '@testing-library/react'; import { Formik } from 'formik'; import { noop } from 'lodash'; @@ -95,6 +96,7 @@ describe('when using Moneris payment', () => { expect(checkoutService.initializePayment).toHaveBeenCalledWith({ methodId: 'moneris', + integrations: [createMonerisPaymentStrategy], moneris: { containerId: 'moneris-iframe-container', options: undefined, @@ -109,6 +111,7 @@ describe('when using Moneris payment', () => { expect(checkoutService.initializePayment).toHaveBeenCalledWith({ methodId: 'moneris', + integrations: [createMonerisPaymentStrategy], moneris: { containerId: 'moneris-iframe-container', options: undefined, @@ -142,6 +145,7 @@ describe('when using Moneris payment', () => { expect(checkoutService.initializePayment).toHaveBeenCalledWith({ gatewayId: undefined, methodId: 'moneris', + integrations: [createMonerisPaymentStrategy], moneris: { containerId: 'moneris-iframe-container', form: { diff --git a/packages/moneris-integration/src/MonerisPaymentMethod.tsx b/packages/moneris-integration/src/MonerisPaymentMethod.tsx index ccf84d7898..f664dcfea2 100644 --- a/packages/moneris-integration/src/MonerisPaymentMethod.tsx +++ b/packages/moneris-integration/src/MonerisPaymentMethod.tsx @@ -1,4 +1,5 @@ import { type CardInstrument, type PaymentInitializeOptions } from '@bigcommerce/checkout-sdk'; +import { createMonerisPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/moneris'; import { some } from 'lodash'; import React, { type FunctionComponent, useCallback } from 'react'; @@ -64,6 +65,7 @@ const MonerisPaymentMethod: FunctionComponent = ({ async (options: PaymentInitializeOptions, selectedInstrument) => { const paymentConfig = { ...options, + integrations: [createMonerisPaymentStrategy], moneris: { containerId, ...(selectedInstrument && { diff --git a/packages/offline-payment-integration/src/OfflinePaymentMethod.test.tsx b/packages/offline-payment-integration/src/OfflinePaymentMethod.test.tsx index 5b0e62c62a..90f47d004a 100644 --- a/packages/offline-payment-integration/src/OfflinePaymentMethod.test.tsx +++ b/packages/offline-payment-integration/src/OfflinePaymentMethod.test.tsx @@ -1,4 +1,5 @@ import { createCheckoutService, createLanguageService } from '@bigcommerce/checkout-sdk'; +import { createOfflinePaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/offline'; import React from 'react'; import { type PaymentMethodProps } from '@bigcommerce/checkout/payment-integration-api'; @@ -36,6 +37,7 @@ describe('OfflinePaymentMethod', () => { expect(checkoutService.initializePayment).toHaveBeenCalledWith({ gatewayId: defaultProps.method.gateway, methodId: defaultProps.method.id, + integrations: [createOfflinePaymentStrategy], }); }); diff --git a/packages/offline-payment-integration/src/OfflinePaymentMethod.tsx b/packages/offline-payment-integration/src/OfflinePaymentMethod.tsx index 0c65863829..30ebee589a 100644 --- a/packages/offline-payment-integration/src/OfflinePaymentMethod.tsx +++ b/packages/offline-payment-integration/src/OfflinePaymentMethod.tsx @@ -1,3 +1,4 @@ +import { createOfflinePaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/offline'; import { type FunctionComponent, useEffect } from 'react'; import { @@ -16,6 +17,7 @@ const OfflinePaymentMethod: FunctionComponent = ({ await checkoutService.initializePayment({ gatewayId: method.gateway, methodId: method.id, + integrations: [createOfflinePaymentStrategy], }); } catch (error) { if (error instanceof Error) { diff --git a/packages/paypal-commerce-integration/src/PayPalCommerceCreditCards/PayPalCommerceCreditCardsPaymentMethod.test.tsx b/packages/paypal-commerce-integration/src/PayPalCommerceCreditCards/PayPalCommerceCreditCardsPaymentMethod.test.tsx index 3f9fcec65f..cf407aed70 100644 --- a/packages/paypal-commerce-integration/src/PayPalCommerceCreditCards/PayPalCommerceCreditCardsPaymentMethod.test.tsx +++ b/packages/paypal-commerce-integration/src/PayPalCommerceCreditCards/PayPalCommerceCreditCardsPaymentMethod.test.tsx @@ -6,6 +6,7 @@ import { createLanguageService, type PaymentMethod, } from '@bigcommerce/checkout-sdk'; +import { createPayPalCommerceCreditCardsPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/paypal-commerce'; import { Formik } from 'formik'; import { noop } from 'lodash'; import React, { type FunctionComponent } from 'react'; @@ -109,7 +110,11 @@ describe('PayPalCommerceCreditCardPaymentMethod', () => { await new Promise((resolve) => process.nextTick(resolve)); - expect(checkoutService.initializePayment).toHaveBeenCalled(); + expect(checkoutService.initializePayment).toHaveBeenCalledWith( + expect.objectContaining({ + integrations: [createPayPalCommerceCreditCardsPaymentStrategy], + }), + ); }); it('calls initializePayment with correct arguments', async () => { diff --git a/packages/paypal-commerce-integration/src/PayPalCommerceCreditCards/PayPalCommerceCreditCardsPaymentMethod.tsx b/packages/paypal-commerce-integration/src/PayPalCommerceCreditCards/PayPalCommerceCreditCardsPaymentMethod.tsx index 89cb149072..61e6e534ea 100644 --- a/packages/paypal-commerce-integration/src/PayPalCommerceCreditCards/PayPalCommerceCreditCardsPaymentMethod.tsx +++ b/packages/paypal-commerce-integration/src/PayPalCommerceCreditCards/PayPalCommerceCreditCardsPaymentMethod.tsx @@ -1,4 +1,5 @@ import { type CardInstrument, type LegacyHostedFormOptions } from '@bigcommerce/checkout-sdk'; +import { createPayPalCommerceCreditCardsPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/paypal-commerce'; import { compact, forIn } from 'lodash'; import React, { type FunctionComponent, type ReactNode, useCallback, useState } from 'react'; @@ -248,6 +249,7 @@ const PayPalCommerceCreditCardsPaymentMethod: FunctionComponent { return initializePayment({ ...options, + integrations: [createPayPalCommerceCreditCardsPaymentStrategy], paypalcommercecreditcards: { form: isHostedFormEnabled ? await getHostedFormOptions(selectedInstrument) diff --git a/packages/paypal-commerce-integration/src/PayPalCommerceFastlane/PayPalCommerceFastlanePaymentMethod.test.tsx b/packages/paypal-commerce-integration/src/PayPalCommerceFastlane/PayPalCommerceFastlanePaymentMethod.test.tsx index 6a9044f699..270f7670ef 100644 --- a/packages/paypal-commerce-integration/src/PayPalCommerceFastlane/PayPalCommerceFastlanePaymentMethod.test.tsx +++ b/packages/paypal-commerce-integration/src/PayPalCommerceFastlane/PayPalCommerceFastlanePaymentMethod.test.tsx @@ -1,4 +1,5 @@ import { createCheckoutService, createLanguageService } from '@bigcommerce/checkout-sdk'; +import { createPayPalCommerceFastlanePaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/paypal-commerce'; import React from 'react'; import { getPaymentFormServiceMock } from '@bigcommerce/checkout/test-mocks'; @@ -44,6 +45,7 @@ describe('PayPalCommerceFastlanePaymentMethod', () => { expect(initializePayment).toHaveBeenCalledWith({ methodId: props.method.id, + integrations: [createPayPalCommerceFastlanePaymentStrategy], paypalcommercefastlane: { onInit: expect.any(Function), onChange: expect.any(Function), diff --git a/packages/paypal-commerce-integration/src/PayPalCommerceFastlane/PayPalCommerceFastlanePaymentMethod.tsx b/packages/paypal-commerce-integration/src/PayPalCommerceFastlane/PayPalCommerceFastlanePaymentMethod.tsx index 2b0751b071..ce66ca9fd6 100644 --- a/packages/paypal-commerce-integration/src/PayPalCommerceFastlane/PayPalCommerceFastlanePaymentMethod.tsx +++ b/packages/paypal-commerce-integration/src/PayPalCommerceFastlane/PayPalCommerceFastlanePaymentMethod.tsx @@ -1,4 +1,5 @@ import { type CardInstrument } from '@bigcommerce/checkout-sdk'; +import { createPayPalCommerceFastlanePaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/paypal-commerce'; import React, { type FunctionComponent, useEffect, useRef } from 'react'; import { LocaleProvider } from '@bigcommerce/checkout/locale'; @@ -37,6 +38,7 @@ const PayPalCommerceFastlanePaymentMethod: FunctionComponent try { await checkoutService.initializePayment({ methodId: method.id, + integrations: [createPayPalCommerceFastlanePaymentStrategy], paypalcommercefastlane: { onInit: (renderPayPalCardComponent) => { paypalCardComponentRef.current.renderPayPalCardComponent = diff --git a/packages/paypal-commerce-integration/src/PayPalCommerceRatepay/PaypalCommerceRatePayPaymentMethod.test.tsx b/packages/paypal-commerce-integration/src/PayPalCommerceRatepay/PaypalCommerceRatePayPaymentMethod.test.tsx index ec361f3274..c6dc3cde2c 100644 --- a/packages/paypal-commerce-integration/src/PayPalCommerceRatepay/PaypalCommerceRatePayPaymentMethod.test.tsx +++ b/packages/paypal-commerce-integration/src/PayPalCommerceRatepay/PaypalCommerceRatePayPaymentMethod.test.tsx @@ -1,5 +1,6 @@ /* eslint-disable @typescript-eslint/naming-convention */ import { createCheckoutService, type LanguageService } from '@bigcommerce/checkout-sdk'; +import { createPayPalCommerceRatePayPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/paypal-commerce'; import { fireEvent, render, screen } from '@testing-library/react'; import { EventEmitter } from 'events'; import { Formik } from 'formik'; @@ -133,6 +134,7 @@ describe('PaypalCommerceRatePayPaymentMethod', () => { expect(initializePayment).toHaveBeenCalledWith({ gatewayId: props.method.gateway, methodId: props.method.id, + integrations: [createPayPalCommerceRatePayPaymentStrategy], paypalcommerceratepay: { container: '#checkout-payment-continue', legalTextContainer: 'legal-text-container', diff --git a/packages/paypal-commerce-integration/src/PayPalCommerceRatepay/PaypalCommerceRatePayPaymentMethod.tsx b/packages/paypal-commerce-integration/src/PayPalCommerceRatepay/PaypalCommerceRatePayPaymentMethod.tsx index e347476142..c9dbeb49f5 100644 --- a/packages/paypal-commerce-integration/src/PayPalCommerceRatepay/PaypalCommerceRatePayPaymentMethod.tsx +++ b/packages/paypal-commerce-integration/src/PayPalCommerceRatepay/PaypalCommerceRatePayPaymentMethod.tsx @@ -1,4 +1,5 @@ import { type FormField } from '@bigcommerce/checkout-sdk'; +import { createPayPalCommerceRatePayPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/paypal-commerce'; import React, { type FunctionComponent, useCallback, useEffect, useMemo, useRef } from 'react'; import { @@ -82,6 +83,7 @@ const PaypalCommerceRatePayPaymentMethod: FunctionComponent await checkoutService.initializePayment({ gatewayId: method.gateway, methodId: method.id, + integrations: [createPayPalCommerceRatePayPaymentStrategy], paypalcommerceratepay: { container: '#checkout-payment-continue', legalTextContainer: 'legal-text-container', diff --git a/packages/paypal-commerce-integration/src/components/PayPalCommercePaymentMethodComponent.test.tsx b/packages/paypal-commerce-integration/src/components/PayPalCommercePaymentMethodComponent.test.tsx index a49f7d4432..e2313d9986 100644 --- a/packages/paypal-commerce-integration/src/components/PayPalCommercePaymentMethodComponent.test.tsx +++ b/packages/paypal-commerce-integration/src/components/PayPalCommercePaymentMethodComponent.test.tsx @@ -4,6 +4,12 @@ import { type HostedInstrument, type LanguageService, } from '@bigcommerce/checkout-sdk'; +import { + createPayPalCommerceAlternativeMethodsPaymentStrategy, + createPayPalCommerceCreditPaymentStrategy, + createPayPalCommercePaymentStrategy, + createPayPalCommerceVenmoPaymentStrategy, +} from '@bigcommerce/checkout-sdk/integrations/paypal-commerce'; import { render } from '@testing-library/react'; import { EventEmitter } from 'events'; import React from 'react'; @@ -70,6 +76,12 @@ describe('PayPalCommercePaymentMethodComponent', () => { expect(initializePayment).toHaveBeenCalledWith({ gatewayId: props.method.gateway, methodId: props.method.id, + integrations: [ + createPayPalCommerceAlternativeMethodsPaymentStrategy, + createPayPalCommerceCreditPaymentStrategy, + createPayPalCommercePaymentStrategy, + createPayPalCommerceVenmoPaymentStrategy, + ], paypalcommerce: { container: '#checkout-payment-continue', onInit: expect.any(Function), @@ -106,6 +118,12 @@ describe('PayPalCommercePaymentMethodComponent', () => { expect(initializePayment).toHaveBeenCalledWith({ gatewayId: props.method.gateway, methodId: props.method.id, + integrations: [ + createPayPalCommerceAlternativeMethodsPaymentStrategy, + createPayPalCommerceCreditPaymentStrategy, + createPayPalCommercePaymentStrategy, + createPayPalCommerceVenmoPaymentStrategy, + ], paypalcommercealternativemethods: { container: '#checkout-payment-continue', onError: expect.any(Function), diff --git a/packages/paypal-commerce-integration/src/components/PayPalCommercePaymentMethodComponent.tsx b/packages/paypal-commerce-integration/src/components/PayPalCommercePaymentMethodComponent.tsx index ae72b0100b..d82f375ba8 100644 --- a/packages/paypal-commerce-integration/src/components/PayPalCommercePaymentMethodComponent.tsx +++ b/packages/paypal-commerce-integration/src/components/PayPalCommercePaymentMethodComponent.tsx @@ -6,6 +6,12 @@ import { type PayPalCommercePaymentInitializeOptions, type PayPalCommerceVenmoPaymentInitializeOptions, } from '@bigcommerce/checkout-sdk'; +import { + createPayPalCommerceAlternativeMethodsPaymentStrategy, + createPayPalCommerceCreditPaymentStrategy, + createPayPalCommercePaymentStrategy, + createPayPalCommerceVenmoPaymentStrategy, +} from '@bigcommerce/checkout-sdk/integrations/paypal-commerce'; import React, { type FunctionComponent, useCallback, useEffect, useRef } from 'react'; import { type PaymentMethodProps } from '@bigcommerce/checkout/payment-integration-api'; @@ -102,6 +108,12 @@ const PayPalCommercePaymentMethodComponent: FunctionComponent< await checkoutService.initializePayment({ gatewayId: method.gateway, methodId: method.id, + integrations: [ + createPayPalCommerceAlternativeMethodsPaymentStrategy, + createPayPalCommerceCreditPaymentStrategy, + createPayPalCommercePaymentStrategy, + createPayPalCommerceVenmoPaymentStrategy, + ], [providerOptionsKey]: { container: '#checkout-payment-continue', shouldRenderPayPalButtonOnInitialization: false, diff --git a/packages/paypal-utils/src/BraintreePaypalCreditBanner.test.tsx b/packages/paypal-utils/src/BraintreePaypalCreditBanner.test.tsx index 72f2211d6c..e6f808061e 100644 --- a/packages/paypal-utils/src/BraintreePaypalCreditBanner.test.tsx +++ b/packages/paypal-utils/src/BraintreePaypalCreditBanner.test.tsx @@ -1,4 +1,5 @@ import { createCheckoutService } from '@bigcommerce/checkout-sdk'; +import { createBraintreePaypalPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/braintree'; import React, { type FunctionComponent } from 'react'; import { @@ -51,6 +52,7 @@ describe('BraintreePaypalCreditBanner', () => { expect(checkoutService.initializePayment).toHaveBeenCalledWith({ methodId: PaymentMethodId.BraintreePaypalCredit, + integrations: [createBraintreePaypalPaymentStrategy], braintree: { bannerContainerId, }, @@ -70,6 +72,7 @@ describe('BraintreePaypalCreditBanner', () => { expect(checkoutService.initializePayment).toHaveBeenCalledWith({ methodId: PaymentMethodId.BraintreePaypalCredit, + integrations: [createBraintreePaypalPaymentStrategy], braintree: { bannerContainerId, }, diff --git a/packages/paypal-utils/src/BraintreePaypalCreditBanner.tsx b/packages/paypal-utils/src/BraintreePaypalCreditBanner.tsx index ebf3e9bf1d..143d75e285 100644 --- a/packages/paypal-utils/src/BraintreePaypalCreditBanner.tsx +++ b/packages/paypal-utils/src/BraintreePaypalCreditBanner.tsx @@ -1,3 +1,4 @@ +import { createBraintreePaypalPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/braintree'; import React, { type FunctionComponent, useEffect } from 'react'; import { useCheckout } from '@bigcommerce/checkout/payment-integration-api'; @@ -19,6 +20,7 @@ const BraintreePaypalCreditBanner: FunctionComponent { expect(checkoutService.initializePayment).toHaveBeenCalledWith({ methodId: PaymentMethodId.PaypalCommerceCredit, + integrations: [ + createPayPalCommerceCreditPaymentStrategy, + createPayPalCommercePaymentStrategy, + ], paypalcommercecredit: { bannerContainerId, }, @@ -71,6 +79,10 @@ describe('PaypalCommerceCreditBanner', () => { expect(checkoutService.initializePayment).toHaveBeenCalledWith({ methodId: PaymentMethodId.PaypalCommerceCredit, + integrations: [ + createPayPalCommerceCreditPaymentStrategy, + createPayPalCommercePaymentStrategy, + ], paypalcommercecredit: { bannerContainerId, }, diff --git a/packages/paypal-utils/src/PaypalCommerceCreditBanner.tsx b/packages/paypal-utils/src/PaypalCommerceCreditBanner.tsx index 6d8652244b..86db4259be 100644 --- a/packages/paypal-utils/src/PaypalCommerceCreditBanner.tsx +++ b/packages/paypal-utils/src/PaypalCommerceCreditBanner.tsx @@ -1,3 +1,7 @@ +import { + createPayPalCommerceCreditPaymentStrategy, + createPayPalCommercePaymentStrategy, +} from '@bigcommerce/checkout-sdk/integrations/paypal-commerce'; import React, { type FunctionComponent, useEffect } from 'react'; import { useCheckout } from '@bigcommerce/checkout/payment-integration-api'; @@ -13,6 +17,10 @@ const PaypalCommerceCreditBanner: FunctionComponent<{ try { void checkoutService.initializePayment({ methodId, + integrations: [ + createPayPalCommerceCreditPaymentStrategy, + createPayPalCommercePaymentStrategy, + ], [methodId]: { bannerContainerId: containerId, }, diff --git a/packages/squarev2-integration/src/SquareV2PaymentMethod.test.tsx b/packages/squarev2-integration/src/SquareV2PaymentMethod.test.tsx index 44b817c3ae..67d6d86648 100644 --- a/packages/squarev2-integration/src/SquareV2PaymentMethod.test.tsx +++ b/packages/squarev2-integration/src/SquareV2PaymentMethod.test.tsx @@ -7,6 +7,7 @@ import { type PaymentInitializeOptions, type PaymentRequestOptions, } from '@bigcommerce/checkout-sdk'; +import { createSquareV2PaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/squarev2'; import { render } from '@testing-library/react'; import { Formik } from 'formik'; import { noop } from 'lodash'; @@ -109,6 +110,7 @@ describe('SquareV2 payment method', () => { expect(initializePayment).toHaveBeenCalledWith( expect.objectContaining({ methodId: 'squarev2', + integrations: [createSquareV2PaymentStrategy], squarev2: { containerId: 'squarev2_payment_element_container', style: { diff --git a/packages/squarev2-integration/src/SquareV2PaymentMethod.tsx b/packages/squarev2-integration/src/SquareV2PaymentMethod.tsx index 15451d553e..2817e5eff9 100644 --- a/packages/squarev2-integration/src/SquareV2PaymentMethod.tsx +++ b/packages/squarev2-integration/src/SquareV2PaymentMethod.tsx @@ -1,3 +1,4 @@ +import { createSquareV2PaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/squarev2'; import { difference } from 'lodash'; import React, { type FunctionComponent, useCallback, useEffect } from 'react'; @@ -126,6 +127,7 @@ const SquareV2PaymentMethod: FunctionComponent = ({ await checkoutService.initializePayment({ gatewayId: method.gateway, methodId: method.id, + integrations: [createSquareV2PaymentStrategy], squarev2: { containerId, style, diff --git a/packages/stripe-integration/src/stripe-ocs/StripeOCSPaymentMethod.test.tsx b/packages/stripe-integration/src/stripe-ocs/StripeOCSPaymentMethod.test.tsx index aaaf56bd63..a8da12f92b 100644 --- a/packages/stripe-integration/src/stripe-ocs/StripeOCSPaymentMethod.test.tsx +++ b/packages/stripe-integration/src/stripe-ocs/StripeOCSPaymentMethod.test.tsx @@ -7,6 +7,7 @@ import { type PaymentMethod, type WithStripeOCSPaymentInitializeOptions, } from '@bigcommerce/checkout-sdk'; +import { createStripeOCSPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/stripe'; import { render } from '@testing-library/react'; import { Formik } from 'formik'; import { noop } from 'lodash'; @@ -141,6 +142,7 @@ describe('when using Stripe OCS payment', () => { expect(initializePayment).toHaveBeenCalledWith({ gatewayId, methodId, + integrations: [createStripeOCSPaymentStrategy], [gatewayId]: { containerId: expectedContainerId, layout: defaultAccordionLayout, @@ -171,6 +173,7 @@ describe('when using Stripe OCS payment', () => { expect(initializePayment).toHaveBeenCalledWith({ gatewayId, methodId, + integrations: [createStripeOCSPaymentStrategy], [gatewayId]: { containerId: expectedContainerId, layout: defaultAccordionLayout, diff --git a/packages/stripe-integration/src/stripe-ocs/StripeOCSPaymentMethod.tsx b/packages/stripe-integration/src/stripe-ocs/StripeOCSPaymentMethod.tsx index 8a7b0e0b3a..6870658e7d 100644 --- a/packages/stripe-integration/src/stripe-ocs/StripeOCSPaymentMethod.tsx +++ b/packages/stripe-integration/src/stripe-ocs/StripeOCSPaymentMethod.tsx @@ -2,7 +2,10 @@ import { type CustomerInitializeOptions, type PaymentInitializeOptions, } from '@bigcommerce/checkout-sdk'; -import { createStripeLinkV2CustomerStrategy } from '@bigcommerce/checkout-sdk/integrations/stripe'; +import { + createStripeLinkV2CustomerStrategy, + createStripeOCSPaymentStrategy, +} from '@bigcommerce/checkout-sdk/integrations/stripe'; import { noop, some } from 'lodash'; import React, { type FunctionComponent, @@ -111,6 +114,7 @@ const StripeOCSPaymentMethod: FunctionComponent = ({ return checkoutService.initializePayment({ ...options, + integrations: [createStripeOCSPaymentStrategy], stripeocs: { containerId, layout: { diff --git a/packages/stripe-integration/src/stripe-upe/StripeUPEPaymentMethod.test.tsx b/packages/stripe-integration/src/stripe-upe/StripeUPEPaymentMethod.test.tsx index b8baea4f02..1725271f26 100644 --- a/packages/stripe-integration/src/stripe-upe/StripeUPEPaymentMethod.test.tsx +++ b/packages/stripe-integration/src/stripe-upe/StripeUPEPaymentMethod.test.tsx @@ -6,6 +6,7 @@ import { type PaymentInitializeOptions, type PaymentMethod, } from '@bigcommerce/checkout-sdk'; +import { createStripeUPEPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/stripe'; import { render } from '@testing-library/react'; import { Formik } from 'formik'; import { noop } from 'lodash'; @@ -114,6 +115,7 @@ describe('when using StripeUPE payment', () => { expect(initializePayment).toHaveBeenCalledWith({ gatewayId: 'stripeupe', methodId: 'pay_now', + integrations: [createStripeUPEPaymentStrategy], stripeupe: { containerId: 'stripe-pay_now-component-field', onError: expect.any(Function), @@ -145,6 +147,7 @@ describe('when using StripeUPE payment', () => { expect(initializePayment).toHaveBeenCalledWith({ gatewayId: 'stripeupe', methodId: 'pay_now', + integrations: [createStripeUPEPaymentStrategy], stripeupe: { containerId: 'stripe-pay_now-component-field', onError: expect.any(Function), @@ -176,7 +179,7 @@ describe('when using StripeUPE payment', () => { expect.objectContaining({ methodId: method.id, gatewayId: method.gateway, - + integrations: [createStripeUPEPaymentStrategy], [`${method.gateway}`]: { containerId: `stripe-${method.id}-component-field`, style: { diff --git a/packages/stripe-integration/src/stripe-upe/StripeUPEPaymentMethod.tsx b/packages/stripe-integration/src/stripe-upe/StripeUPEPaymentMethod.tsx index 4abad062eb..27f13ee6f4 100644 --- a/packages/stripe-integration/src/stripe-upe/StripeUPEPaymentMethod.tsx +++ b/packages/stripe-integration/src/stripe-upe/StripeUPEPaymentMethod.tsx @@ -2,7 +2,10 @@ import { type CustomerInitializeOptions, type PaymentInitializeOptions, } from '@bigcommerce/checkout-sdk'; -import { createStripeUPECustomerStrategy } from '@bigcommerce/checkout-sdk/integrations/stripe'; +import { + createStripeUPECustomerStrategy, + createStripeUPEPaymentStrategy, +} from '@bigcommerce/checkout-sdk/integrations/stripe'; import { noop, some } from 'lodash'; import React, { type FunctionComponent, useCallback, useMemo } from 'react'; @@ -88,6 +91,7 @@ const StripeUPEPaymentMethod: FunctionComponent = ({ return checkoutService.initializePayment({ ...options, + integrations: [createStripeUPEPaymentStrategy], stripeupe: { containerId, style: { diff --git a/packages/stripe-integration/src/stripev3/StripePaymentMethod.test.tsx b/packages/stripe-integration/src/stripev3/StripePaymentMethod.test.tsx index cc71a293a2..8cdac2449d 100644 --- a/packages/stripe-integration/src/stripev3/StripePaymentMethod.test.tsx +++ b/packages/stripe-integration/src/stripev3/StripePaymentMethod.test.tsx @@ -6,6 +6,7 @@ import { type PaymentInitializeOptions, type PaymentMethod, } from '@bigcommerce/checkout-sdk'; +import { createStripeV3PaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/stripe'; import { render } from '@testing-library/react'; import { Formik } from 'formik'; import { noop } from 'lodash'; @@ -103,6 +104,7 @@ describe('when using StripeV3 payment', () => { expect(initializePayment).toHaveBeenCalledWith({ gatewayId: 'stripev3', methodId: 'alipay', + integrations: [createStripeV3PaymentStrategy], stripev3: { containerId: 'stripe-alipay-component-field', options: undefined, @@ -130,6 +132,7 @@ describe('when using StripeV3 payment', () => { expect(initializePayment).toHaveBeenCalledWith({ gatewayId: 'stripev3', methodId: 'card', + integrations: [createStripeV3PaymentStrategy], stripev3: { containerId: 'stripe-card-component-field', options: { @@ -149,6 +152,7 @@ describe('when using StripeV3 payment', () => { expect(checkoutService.initializePayment).toHaveBeenCalledWith({ gatewayId: method.gateway, methodId: method.id, + integrations: [createStripeV3PaymentStrategy], stripev3: { containerId: 'stripe-card-component-field', options: { @@ -196,6 +200,7 @@ describe('when using StripeV3 payment', () => { expect(checkoutService.initializePayment).toHaveBeenCalledWith( expect.objectContaining({ methodId: method.id, + integrations: [createStripeV3PaymentStrategy], stripev3: { containerId: 'stripe-idealBank-component-field', options: { @@ -226,6 +231,7 @@ describe('when using StripeV3 payment', () => { expect(checkoutService.initializePayment).toHaveBeenCalledWith( expect.objectContaining({ methodId: method.id, + integrations: [createStripeV3PaymentStrategy], stripev3: { options: { classes: { diff --git a/packages/stripe-integration/src/stripev3/StripeV3PaymentMethod.tsx b/packages/stripe-integration/src/stripev3/StripeV3PaymentMethod.tsx index f628207087..a8cd8d245f 100644 --- a/packages/stripe-integration/src/stripev3/StripeV3PaymentMethod.tsx +++ b/packages/stripe-integration/src/stripev3/StripeV3PaymentMethod.tsx @@ -4,6 +4,7 @@ import { type PaymentInitializeOptions, type StripeElementOptions, } from '@bigcommerce/checkout-sdk'; +import { createStripeV3PaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/stripe'; import { noop, some } from 'lodash'; import React, { type FunctionComponent, useCallback, useMemo } from 'react'; @@ -171,6 +172,7 @@ const StripeV3PaymentMethod: FunctionComponent = ({ async (options: PaymentInitializeOptions, selectedInstrument: any) => { return checkoutService.initializePayment({ ...options, + integrations: [createStripeV3PaymentStrategy], stripev3: { containerId, options: getStripeOptions(stripeOptions), diff --git a/packages/test-utils/src/TestWrapper.tsx b/packages/test-utils/src/TestWrapper.tsx index 035da14424..7c14cad809 100644 --- a/packages/test-utils/src/TestWrapper.tsx +++ b/packages/test-utils/src/TestWrapper.tsx @@ -1,4 +1,4 @@ -import { createCheckoutService } from '@bigcommerce/checkout-sdk'; +import { createCheckoutService } from '@bigcommerce/checkout-sdk/essential'; import { render, type RenderOptions } from '@testing-library/react'; import React, { type ReactElement } from 'react'; diff --git a/packages/worldpay-access-integration/src/WorldPayCreditCardPaymentMethod.test.tsx b/packages/worldpay-access-integration/src/WorldPayCreditCardPaymentMethod.test.tsx index d116b4a96a..a4fd9c276d 100644 --- a/packages/worldpay-access-integration/src/WorldPayCreditCardPaymentMethod.test.tsx +++ b/packages/worldpay-access-integration/src/WorldPayCreditCardPaymentMethod.test.tsx @@ -6,6 +6,7 @@ import { createLanguageService, type PaymentMethod, } from '@bigcommerce/checkout-sdk'; +import { createWorldpayAccessPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/worldpayaccess'; import { Formik } from 'formik'; import { noop } from 'lodash'; import React, { type FunctionComponent } from 'react'; @@ -129,6 +130,7 @@ describe('WorldpayCreditCardPaymentMethod', () => { expect.objectContaining({ gatewayId: undefined, methodId: 'worldpayaccess', + integrations: [createWorldpayAccessPaymentStrategy], worldpay: { onLoad: expect.any(Function), }, diff --git a/packages/worldpay-access-integration/src/WorldpayCreditCardPaymentMethod.tsx b/packages/worldpay-access-integration/src/WorldpayCreditCardPaymentMethod.tsx index 39e2e3f415..450b24c8de 100644 --- a/packages/worldpay-access-integration/src/WorldpayCreditCardPaymentMethod.tsx +++ b/packages/worldpay-access-integration/src/WorldpayCreditCardPaymentMethod.tsx @@ -3,6 +3,7 @@ import { type LegacyHostedFormOptions, type PaymentInitializeOptions, } from '@bigcommerce/checkout-sdk'; +import { createWorldpayAccessPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/worldpayaccess'; import { compact, forIn } from 'lodash'; import React, { createRef, @@ -216,9 +217,10 @@ const WorldpayCreditCardPaymentMethod: FunctionComponent = ( } }, []); const initializeWorldpayPayment = useCallback( - async (options: PaymentInitializeOptions, selectedInstrument: any) => { + async (options: PaymentInitializeOptions, selectedInstrument: CardInstrument) => { return checkoutService.initializePayment({ ...options, + integrations: [createWorldpayAccessPaymentStrategy], creditCard: { form: getHostedFormOptions && (await getHostedFormOptions(selectedInstrument)), }, From 829a258785c577ec6f05855dba7f77e8ceeec1ec Mon Sep 17 00:00:00 2001 From: David Chin Date: Mon, 15 Sep 2025 13:10:40 +1000 Subject: [PATCH 2/2] refactor(checkout): CHECKOUT-9388 Add eslint rule to enforce imports from essential package only if importing concrete implementations --- .eslintrc.json | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/.eslintrc.json b/.eslintrc.json index 088e51ff68..abb2bc5909 100644 --- a/.eslintrc.json +++ b/.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" } } ]