From 51a41bdb3ca4b2944d72ba3f20085998ba017383 Mon Sep 17 00:00:00 2001 From: SerhiiFilkovskyi Date: Wed, 11 Mar 2026 18:26:56 +0800 Subject: [PATCH] feat(payment): PAYPAL-6318 Update paypal sdk namespace for BCP paypal sdk config with bigcommerce-payments naming --- ...bigcommerce-payments-script-loader.spec.ts | 19 +++++++++-- .../src/bigcommerce-payments-script-loader.ts | 7 ++-- .../src/bigcommerce-payments-types.ts | 3 +- ...igcommerce-payments-fastlane-utils.spec.ts | 2 +- .../bigcommerce-payments-fastlane-utils.ts | 10 +++--- .../src/bigcommerce-payments-types.ts | 10 +++--- .../src/paypal-sdk-helper.spec.ts | 30 ++++++++--------- .../src/paypal-sdk-helper.ts | 32 +++++++++---------- 8 files changed, 64 insertions(+), 49 deletions(-) diff --git a/packages/bigcommerce-payments-integration/src/bigcommerce-payments-script-loader.spec.ts b/packages/bigcommerce-payments-integration/src/bigcommerce-payments-script-loader.spec.ts index ba47bf2539..48b66dedb3 100644 --- a/packages/bigcommerce-payments-integration/src/bigcommerce-payments-script-loader.spec.ts +++ b/packages/bigcommerce-payments-integration/src/bigcommerce-payments-script-loader.spec.ts @@ -22,7 +22,7 @@ describe('BigCommercePaymentsScriptLoader', () => { paypalSdk = getPayPalSDKMock(); jest.spyOn(loader, 'loadScript').mockImplementation(() => { - (window as BigCommercePaymentsHostWindow).paypal = paypalSdk; + (window as BigCommercePaymentsHostWindow).bigCommercePaymentsPayPalSDK = paypalSdk; return Promise.resolve(); }); @@ -31,7 +31,7 @@ describe('BigCommercePaymentsScriptLoader', () => { }); afterEach(() => { - (window as BigCommercePaymentsHostWindow).paypal = undefined; + (window as BigCommercePaymentsHostWindow).bigCommercePaymentsPayPalSDK = undefined; }); it('throws an error if initializationData is missing', async () => { @@ -55,6 +55,7 @@ describe('BigCommercePaymentsScriptLoader', () => { const paypalSdkAttributes = { 'data-client-token': paymentMethod.clientToken, 'data-partner-attribution-id': paymentMethod.initializationData.attributionId, + 'data-namespace': 'bigCommercePaymentsPayPalSDK', }; expect(loader.loadScript).toHaveBeenCalledWith(paypalSdkScriptSrc, { @@ -84,6 +85,7 @@ describe('BigCommercePaymentsScriptLoader', () => { const paypalSdkAttributes = { 'data-client-token': paymentMethod.clientToken, 'data-partner-attribution-id': paymentMethod.initializationData.attributionId, + 'data-namespace': 'bigCommercePaymentsPayPalSDK', }; expect(loader.loadScript).toHaveBeenCalledWith(paypalSdkScriptSrc, { @@ -100,6 +102,7 @@ describe('BigCommercePaymentsScriptLoader', () => { const paypalSdkAttributes = { 'data-client-token': paymentMethod.clientToken, 'data-partner-attribution-id': paymentMethod.initializationData.attributionId, + 'data-namespace': 'bigCommercePaymentsPayPalSDK', }; expect(loader.loadScript).toHaveBeenCalledWith(paypalSdkScriptSrc, { @@ -124,6 +127,7 @@ describe('BigCommercePaymentsScriptLoader', () => { const paypalSdkAttributes = { 'data-client-token': paymentMethod.clientToken, 'data-partner-attribution-id': paymentMethod.initializationData.attributionId, + 'data-namespace': 'bigCommercePaymentsPayPalSDK', }; expect(loader.loadScript).toHaveBeenCalledWith(paypalSdkScriptSrc, { @@ -148,6 +152,7 @@ describe('BigCommercePaymentsScriptLoader', () => { const paypalSdkAttributes = { 'data-client-token': paymentMethod.clientToken, 'data-partner-attribution-id': paymentMethod.initializationData.attributionId, + 'data-namespace': 'bigCommercePaymentsPayPalSDK', }; expect(loader.loadScript).toHaveBeenCalledWith(paypalSdkScriptSrc, { @@ -172,6 +177,7 @@ describe('BigCommercePaymentsScriptLoader', () => { const paypalSdkAttributes = { 'data-client-token': paymentMethod.clientToken, 'data-partner-attribution-id': paymentMethod.initializationData.attributionId, + 'data-namespace': 'bigCommercePaymentsPayPalSDK', }; expect(loader.loadScript).toHaveBeenCalledWith(paypalSdkScriptSrc, { @@ -196,6 +202,7 @@ describe('BigCommercePaymentsScriptLoader', () => { const paypalSdkAttributes = { 'data-client-token': paymentMethod.clientToken, 'data-partner-attribution-id': paymentMethod.initializationData.attributionId, + 'data-namespace': 'bigCommercePaymentsPayPalSDK', }; expect(loader.loadScript).toHaveBeenCalledWith(paypalSdkScriptSrc, { @@ -236,6 +243,7 @@ describe('BigCommercePaymentsScriptLoader', () => { const paypalSdkAttributes = { 'data-client-token': paymentMethod.clientToken, 'data-partner-attribution-id': paymentMethod.initializationData.attributionId, + 'data-namespace': 'bigCommercePaymentsPayPalSDK', }; expect(loader.loadScript).toHaveBeenCalledWith(paypalSdkScriptSrc, { @@ -252,6 +260,7 @@ describe('BigCommercePaymentsScriptLoader', () => { const paypalSdkAttributes = { 'data-client-token': paymentMethod.clientToken, 'data-partner-attribution-id': paymentMethod.initializationData.attributionId, + 'data-namespace': 'bigCommercePaymentsPayPalSDK', }; expect(loader.loadScript).toHaveBeenCalledWith(paypalSdkScriptSrc, { @@ -268,6 +277,7 @@ describe('BigCommercePaymentsScriptLoader', () => { const paypalSdkAttributes = { 'data-client-token': paymentMethod.clientToken, 'data-partner-attribution-id': paymentMethod.initializationData.attributionId, + 'data-namespace': 'bigCommercePaymentsPayPalSDK', }; expect(loader.loadScript).toHaveBeenCalledWith(paypalSdkScriptSrc, { @@ -292,6 +302,7 @@ describe('BigCommercePaymentsScriptLoader', () => { const paypalSdkAttributes = { 'data-client-token': paymentMethod.clientToken, 'data-partner-attribution-id': paymentMethod.initializationData.attributionId, + 'data-namespace': 'bigCommercePaymentsPayPalSDK', }; expect(loader.loadScript).toHaveBeenCalledWith(paypalSdkScriptSrc, { @@ -321,6 +332,7 @@ describe('BigCommercePaymentsScriptLoader', () => { const paypalSdkAttributes = { 'data-client-token': paymentMethod.clientToken, 'data-partner-attribution-id': paymentMethod.initializationData.attributionId, + 'data-namespace': 'bigCommercePaymentsPayPalSDK', }; expect(loader.loadScript).toHaveBeenCalledWith(paypalSdkScriptSrc, { @@ -347,6 +359,7 @@ describe('BigCommercePaymentsScriptLoader', () => { const paypalSdkAttributes = { 'data-client-token': paymentMethod.clientToken, 'data-partner-attribution-id': paymentMethod.initializationData.attributionId, + 'data-namespace': 'bigCommercePaymentsPayPalSDK', }; expect(loader.loadScript).toHaveBeenCalledWith(paypalSdkScriptSrc, { @@ -371,7 +384,7 @@ describe('BigCommercePaymentsScriptLoader', () => { const paypalSdkScriptSrc = 'https://www.paypal.com/sdk/js?client-id=abc&disable-funding=card%2Ccredit%2Cpaylater%2Cvenmo&commit=false&components=buttons%2Chosted-fields%2Cpayment-fields%2Clegal¤cy=USD&intent=capture'; - const paypalSdkAttributes = {}; + const paypalSdkAttributes = { 'data-namespace': 'bigCommercePaymentsPayPalSDK' }; expect(loader.loadScript).toHaveBeenCalledWith(paypalSdkScriptSrc, { async: true, diff --git a/packages/bigcommerce-payments-integration/src/bigcommerce-payments-script-loader.ts b/packages/bigcommerce-payments-integration/src/bigcommerce-payments-script-loader.ts index b8e6cab763..134040460b 100644 --- a/packages/bigcommerce-payments-integration/src/bigcommerce-payments-script-loader.ts +++ b/packages/bigcommerce-payments-integration/src/bigcommerce-payments-script-loader.ts @@ -42,7 +42,7 @@ export default class BigCommercePaymentsScriptLoader { paypalSdkScriptConfig: BigCommercePaymentsScriptParams, forceLoad = false, ): Promise { - if (!this.window.paypal || forceLoad) { + if (!this.window.bigCommercePaymentsPayPalSDK || forceLoad) { const options = this.transformConfig( paypalSdkScriptConfig.options, ); @@ -57,11 +57,11 @@ export default class BigCommercePaymentsScriptLoader { await this.scriptLoader.loadScript(scriptSrc, { async: true, attributes }); } - if (!this.window.paypal) { + if (!this.window.bigCommercePaymentsPayPalSDK) { throw new PaymentMethodClientUnavailableError(); } - return this.window.paypal; + return this.window.bigCommercePaymentsPayPalSDK; } private getPayPalSdkScriptConfigOrThrow( @@ -143,6 +143,7 @@ export default class BigCommercePaymentsScriptLoader { attributes: { 'data-partner-attribution-id': attributionId, 'data-client-token': clientToken, + 'data-namespace': 'bigCommercePaymentsPayPalSDK', }, }; } diff --git a/packages/bigcommerce-payments-integration/src/bigcommerce-payments-types.ts b/packages/bigcommerce-payments-integration/src/bigcommerce-payments-types.ts index 3b3db522fa..83905c894e 100644 --- a/packages/bigcommerce-payments-integration/src/bigcommerce-payments-types.ts +++ b/packages/bigcommerce-payments-integration/src/bigcommerce-payments-types.ts @@ -215,6 +215,7 @@ export interface BigCommercePaymentsScriptParams { 'data-client-metadata-id'?: string; 'data-partner-attribution-id'?: string; 'data-user-id-token'?: string; + 'data-namespace'?: string; }; } @@ -236,7 +237,7 @@ export type ComponentsScriptType = Array< >; export interface BigCommercePaymentsHostWindow extends Window { - paypal?: PayPalSDK; + bigCommercePaymentsPayPalSDK?: PayPalSDK; } /** diff --git a/packages/bigcommerce-payments-utils/src/bigcommerce-payments-fastlane-utils.spec.ts b/packages/bigcommerce-payments-utils/src/bigcommerce-payments-fastlane-utils.spec.ts index a93623baac..a3c4540f00 100644 --- a/packages/bigcommerce-payments-utils/src/bigcommerce-payments-fastlane-utils.spec.ts +++ b/packages/bigcommerce-payments-utils/src/bigcommerce-payments-fastlane-utils.spec.ts @@ -66,7 +66,7 @@ describe('BigCommercePaymentsFastlaneUtils', () => { }); afterEach(() => { - (window as PayPalHostWindow).paypalFastlane = undefined; + (window as PayPalHostWindow).bigCommercePaymentsFastlane = undefined; jest.resetAllMocks(); jest.restoreAllMocks(); diff --git a/packages/bigcommerce-payments-utils/src/bigcommerce-payments-fastlane-utils.ts b/packages/bigcommerce-payments-utils/src/bigcommerce-payments-fastlane-utils.ts index 82621630d0..3e5d7cb648 100644 --- a/packages/bigcommerce-payments-utils/src/bigcommerce-payments-fastlane-utils.ts +++ b/packages/bigcommerce-payments-utils/src/bigcommerce-payments-fastlane-utils.ts @@ -41,27 +41,27 @@ export default class BigCommercePaymentsFastlaneUtils { window.localStorage.setItem('axoEnv', 'sandbox'); // TODO: remove if this key does not use on PayPal side } - if (!this.window.paypalFastlane) { + if (!this.window.bigCommercePaymentsFastlane) { const defaultStyles = { root: { backgroundColorPrimary: 'transparent', }, }; - this.window.paypalFastlane = await paypalFastlaneSdk.Fastlane({ + this.window.bigCommercePaymentsFastlane = await paypalFastlaneSdk.Fastlane({ styles: styles || defaultStyles, }); } - return this.window.paypalFastlane; + return this.window.bigCommercePaymentsFastlane; } getPayPalFastlaneOrThrow(): PayPalFastlane { - if (!this.window.paypalFastlane) { + if (!this.window.bigCommercePaymentsFastlane) { throw new PaymentMethodClientUnavailableError(); } - return this.window.paypalFastlane; + return this.window.bigCommercePaymentsFastlane; } /** diff --git a/packages/bigcommerce-payments-utils/src/bigcommerce-payments-types.ts b/packages/bigcommerce-payments-utils/src/bigcommerce-payments-types.ts index ff249a0b5f..1a95f74c11 100644 --- a/packages/bigcommerce-payments-utils/src/bigcommerce-payments-types.ts +++ b/packages/bigcommerce-payments-utils/src/bigcommerce-payments-types.ts @@ -48,11 +48,11 @@ export interface BigCommercePaymentsInitializationData { * */ export interface PayPalHostWindow extends Window { - paypalFastlane?: PayPalFastlane; - paypalFastlaneSdk?: PayPalFastlaneSdk; - paypalMessages?: PayPalMessagesSdk; - paypalApms?: PayPalApmSdk; - paypalGooglePay?: PayPalGooglePaySdk; + bigCommercePaymentsFastlane?: PayPalFastlane; + bigCommercePaymentsFastlaneSdk?: PayPalFastlaneSdk; + bigCommercePaymentsMessages?: PayPalMessagesSdk; + bigCommercePaymentsApms?: PayPalApmSdk; + bigCommercePaymentsGooglePay?: PayPalGooglePaySdk; } /** diff --git a/packages/bigcommerce-payments-utils/src/paypal-sdk-helper.spec.ts b/packages/bigcommerce-payments-utils/src/paypal-sdk-helper.spec.ts index 72a7b7659d..370ae0be2d 100644 --- a/packages/bigcommerce-payments-utils/src/paypal-sdk-helper.spec.ts +++ b/packages/bigcommerce-payments-utils/src/paypal-sdk-helper.spec.ts @@ -55,20 +55,20 @@ describe('PayPalSdkHelper', () => { subject = new PayPalSdkHelper(loader); jest.spyOn(loader, 'loadScript').mockImplementation(() => { - (window as PayPalHostWindow).paypalFastlaneSdk = paypalFastlaneSdk; - (window as PayPalHostWindow).paypalMessages = paypalMessagesSdk; - (window as PayPalHostWindow).paypalApms = paypalApmsSdk; - (window as PayPalHostWindow).paypalGooglePay = payPalGooglePaySdk; + (window as PayPalHostWindow).bigCommercePaymentsFastlaneSdk = paypalFastlaneSdk; + (window as PayPalHostWindow).bigCommercePaymentsMessages = paypalMessagesSdk; + (window as PayPalHostWindow).bigCommercePaymentsApms = paypalApmsSdk; + (window as PayPalHostWindow).bigCommercePaymentsGooglePay = payPalGooglePaySdk; return Promise.resolve(); }); }); afterEach(() => { - (window as PayPalHostWindow).paypalFastlaneSdk = undefined; - (window as PayPalHostWindow).paypalMessages = undefined; - (window as PayPalHostWindow).paypalApms = undefined; - (window as PayPalHostWindow).paypalGooglePay = undefined; + (window as PayPalHostWindow).bigCommercePaymentsFastlaneSdk = undefined; + (window as PayPalHostWindow).bigCommercePaymentsMessages = undefined; + (window as PayPalHostWindow).bigCommercePaymentsApms = undefined; + (window as PayPalHostWindow).bigCommercePaymentsGooglePay = undefined; jest.clearAllMocks(); }); @@ -99,7 +99,7 @@ describe('PayPalSdkHelper', () => { async: true, attributes: { 'data-client-metadata-id': expectedSessionId, - 'data-namespace': 'paypalFastlaneSdk', + 'data-namespace': 'bigCommercePaymentsFastlaneSdk', 'data-partner-attribution-id': '1123JLKJASD12', 'data-sdk-client-token': 'asdcvY7XFSQasd', }, @@ -127,7 +127,7 @@ describe('PayPalSdkHelper', () => { async: true, attributes: { 'data-client-metadata-id': expectedSessionId, - 'data-namespace': 'paypalFastlaneSdk', + 'data-namespace': 'bigCommercePaymentsFastlaneSdk', 'data-partner-attribution-id': '1123JLKJASD12', 'data-sdk-client-token': 'asdcvY7XFSQasd', }, @@ -177,7 +177,7 @@ describe('PayPalSdkHelper', () => { { async: true, attributes: { - 'data-namespace': 'paypalMessages', + 'data-namespace': 'bigCommercePaymentsMessages', 'data-partner-attribution-id': '1123JLKJASD12', }, }, @@ -226,7 +226,7 @@ describe('PayPalSdkHelper', () => { { async: true, attributes: { - 'data-namespace': 'paypalGooglePay', + 'data-namespace': 'bigCommercePaymentsGooglePay', 'data-client-token': 'asdcvY7XFSQasd', 'data-partner-attribution-id': '1123JLKJASD12', }, @@ -291,7 +291,7 @@ describe('PayPalSdkHelper', () => { { async: true, attributes: { - 'data-namespace': 'paypalApms', + 'data-namespace': 'bigCommercePaymentsApms', 'data-partner-attribution-id': '1123JLKJASD12', }, }, @@ -326,7 +326,7 @@ describe('PayPalSdkHelper', () => { { async: true, attributes: { - 'data-namespace': 'paypalApms', + 'data-namespace': 'bigCommercePaymentsApms', 'data-partner-attribution-id': '1123JLKJASD12', }, }, @@ -351,7 +351,7 @@ describe('PayPalSdkHelper', () => { { async: true, attributes: { - 'data-namespace': 'paypalApms', + 'data-namespace': 'bigCommercePaymentsApms', 'data-partner-attribution-id': '1123JLKJASD12', }, }, diff --git a/packages/bigcommerce-payments-utils/src/paypal-sdk-helper.ts b/packages/bigcommerce-payments-utils/src/paypal-sdk-helper.ts index b4b2481467..ba44498e69 100644 --- a/packages/bigcommerce-payments-utils/src/paypal-sdk-helper.ts +++ b/packages/bigcommerce-payments-utils/src/paypal-sdk-helper.ts @@ -29,7 +29,7 @@ export default class PayPalSdkHelper { currencyCode: string, sessionId: string, ): Promise { - if (!this.window.paypalFastlaneSdk) { + if (!this.window.bigCommercePaymentsFastlaneSdk) { const config = this.getPayPalFastlaneSdkConfiguration( paymentMethod, currencyCode, @@ -38,12 +38,12 @@ export default class PayPalSdkHelper { await this.loadPayPalSdk(config); - if (!this.window.paypalFastlaneSdk) { + if (!this.window.bigCommercePaymentsFastlaneSdk) { throw new PaymentMethodClientUnavailableError(); } } - return this.window.paypalFastlaneSdk; + return this.window.bigCommercePaymentsFastlaneSdk; } async getPayPalGooglePaySdk( @@ -52,7 +52,7 @@ export default class PayPalSdkHelper { initializesOnCheckoutPage?: boolean, forceLoad?: boolean, ): Promise { - if (!this.window.paypalGooglePay || forceLoad) { + if (!this.window.bigCommercePaymentsGooglePay || forceLoad) { const paypalSdkScriptConfig = this.getPayPalGooglePaySdkScriptConfigOrThrow( paymentMethod, currencyCode, @@ -62,35 +62,35 @@ export default class PayPalSdkHelper { await this.loadPayPalSdk(paypalSdkScriptConfig); } - if (!this.window.paypalGooglePay) { + if (!this.window.bigCommercePaymentsGooglePay) { throw new PaymentMethodClientUnavailableError(); } - return this.window.paypalGooglePay; + return this.window.bigCommercePaymentsGooglePay; } async getPayPalApmsSdk( paymentMethod: PaymentMethod, currencyCode: string, ) { - if (!this.window.paypalApms) { + if (!this.window.bigCommercePaymentsApms) { const config = this.getPayPalApmSdkConfiguration(paymentMethod, currencyCode); await this.loadPayPalSdk(config); - if (!this.window.paypalApms) { + if (!this.window.bigCommercePaymentsApms) { throw new PaymentMethodClientUnavailableError(); } } - return this.window.paypalApms; + return this.window.bigCommercePaymentsApms; } async getPayPalMessages( paymentMethod: PaymentMethod, currencyCode: string, ): Promise { - if (!this.window.paypalMessages) { + if (!this.window.bigCommercePaymentsMessages) { const paypalSdkMessagesConfig = this.getPayPalSdkMessagesConfiguration( paymentMethod, currencyCode, @@ -99,11 +99,11 @@ export default class PayPalSdkHelper { await this.loadPayPalSdk(paypalSdkMessagesConfig); } - if (!this.window.paypalMessages) { + if (!this.window.bigCommercePaymentsMessages) { throw new PaymentMethodClientUnavailableError(); } - return this.window.paypalMessages; + return this.window.bigCommercePaymentsMessages; } /** @@ -155,7 +155,7 @@ export default class PayPalSdkHelper { }, attributes: { 'data-client-metadata-id': sessionId.replace(/-/g, ''), - 'data-namespace': 'paypalFastlaneSdk', + 'data-namespace': 'bigCommercePaymentsFastlaneSdk', 'data-partner-attribution-id': attributionId, 'data-sdk-client-token': clientToken, }, @@ -198,7 +198,7 @@ export default class PayPalSdkHelper { attributes: { 'data-partner-attribution-id': attributionId, 'data-client-token': clientToken, - 'data-namespace': 'paypalGooglePay', + 'data-namespace': 'bigCommercePaymentsGooglePay', }, }; } @@ -245,7 +245,7 @@ export default class PayPalSdkHelper { }, attributes: { 'data-partner-attribution-id': attributionId, - 'data-namespace': 'paypalApms', + 'data-namespace': 'bigCommercePaymentsApms', }, }; } @@ -272,7 +272,7 @@ export default class PayPalSdkHelper { ...(isDeveloperModeApplicable && { 'buyer-country': buyerCountry }), }, attributes: { - 'data-namespace': 'paypalMessages', + 'data-namespace': 'bigCommercePaymentsMessages', 'data-partner-attribution-id': attributionId, }, };