Paypal 5809

packages/braintree-integration/src/braintree-credit-card/braintree-credit-card-payment-strategy.spec.ts

@@ -73,7 +73,10 @@ describe('BraintreeCreditCardPaymentStrategy', () => {
             braintreeScriptLoader,
             window,
         );
-        braintreeHostedForm = new BraintreeHostedForm(braintreeScriptLoader);
+        braintreeHostedForm = new BraintreeHostedForm(
+            braintreeScriptLoader,
+            braintreeSDKVersionManager,
+        );
         braintreeCreditCardPaymentStrategy = new BraintreeCreditCardPaymentStrategy(
             paymentIntegrationService,
             braintreeIntegrationService,

packages/braintree-integration/src/braintree-credit-card/create-braintree-credit-card-payment-strategy.ts

@@ -33,7 +33,10 @@ const createBraintreeCreditCardPaymentStrategy: PaymentStrategyFactory<
         braintreeHostWindow,
     );
 
-    const braintreeHostedForm = new BraintreeHostedForm(braintreeScriptLoader);
+    const braintreeHostedForm = new BraintreeHostedForm(
+        braintreeScriptLoader,
+        braintreeSDKVersionManager,
+    );
 
     return new BraintreeCreditCardPaymentStrategy(
         paymentIntegrationService,

packages/braintree-integration/src/braintree-hosted-form/braintree-hosted-form.spec.ts

@@ -1,6 +1,8 @@
 import { EventEmitter } from 'events';
 
 import {
+    BRAINTREE_SDK_DEFAULT_VERSION,
+    BRAINTREE_SDK_HOSTED_FIELDS_FIX_VERSION,
     BraintreeFormOptions,
     BraintreeHostedFields,
     BraintreeScriptLoader,
@@ -74,7 +76,7 @@ describe('BraintreeHostedForm', () => {
             window,
             braintreeSDKVersionManager,
         );
-        subject = new BraintreeHostedForm(braintreeScriptLoader);
+        subject = new BraintreeHostedForm(braintreeScriptLoader, braintreeSDKVersionManager);
 
         containers = [
             appendContainer('cardCode'),
@@ -90,6 +92,10 @@ describe('BraintreeHostedForm', () => {
         jest.spyOn(braintreeScriptLoader, 'loadHostedFields').mockResolvedValue({
             create: jest.fn().mockResolvedValue({ on: jest.fn() }),
         });
+
+        jest.spyOn(braintreeSDKVersionManager, 'getSDKVersion').mockReturnValue(
+            BRAINTREE_SDK_HOSTED_FIELDS_FIX_VERSION,
+        );
     });
 
     afterEach(() => {
@@ -100,6 +106,62 @@ describe('BraintreeHostedForm', () => {
 
     describe('#initialize', () => {
         it('creates and configures hosted fields', async () => {
+            jest.spyOn(braintreeSDKVersionManager, 'getSDKVersion').mockReturnValue(
+                BRAINTREE_SDK_DEFAULT_VERSION,
+            );
+            const createMock = jest.fn();
+            const clientMock = {
+                ...getClientMock(),
+                request: expect.any(Function),
+            };
+
+            const options = {
+                fields: {
+                    cvv: {
+                        container: '#cardCode',
+                        internalLabel: undefined,
+                        placeholder: 'Card code',
+                    },
+                    expirationDate: {
+                        container: '#cardExpiry',
+                        internalLabel: undefined,
+                        placeholder: 'Card expiry',
+                    },
+                    number: {
+                        container: '#cardNumber',
+                        internalLabel: undefined,
+                        placeholder: 'Card number',
+                        supportedCardBrands: {
+                            'american-express': false,
+                            maestro: false,
+                        },
+                    },
+                    cardholderName: {
+                        container: '#cardName',
+                        internalLabel: undefined,
+                        placeholder: 'Card name',
+                    },
+                },
+                styles: {
+                    input: { color: '#000' },
+                    '.invalid': { color: '#f00', 'font-weight': 'bold' },
+                    ':focus': { color: '#00f' },
+                },
+            };
+
+            jest.spyOn(braintreeScriptLoader, 'loadHostedFields').mockResolvedValue({
+                create: createMock,
+            });
+
+            await subject.initialize(formOptions, unsupportedCardBrands, 'clientToken');
+
+            expect(createMock).toHaveBeenCalledWith({
+                ...options,
+                client: clientMock,
+            });
+        });
+
+        it('creates and configures hosted fields with preventCursorJumps', async () => {
             const createMock = jest.fn();
             const clientMock = {
                 ...getClientMock(),
@@ -138,6 +200,7 @@ describe('BraintreeHostedForm', () => {
                     '.invalid': { color: '#f00', 'font-weight': 'bold' },
                     ':focus': { color: '#00f' },
                 },
+                preventCursorJumps: true,
             };
 
             jest.spyOn(braintreeScriptLoader, 'loadHostedFields').mockResolvedValue({
@@ -153,6 +216,9 @@ describe('BraintreeHostedForm', () => {
         });
 
         it('creates and configures hosted fields for stored card verification', async () => {
+            jest.spyOn(braintreeSDKVersionManager, 'getSDKVersion').mockReturnValue(
+                BRAINTREE_SDK_DEFAULT_VERSION,
+            );
             const createMock = jest.fn();
             const clientMock = {
                 ...getClientMock(),

packages/braintree-integration/src/braintree-hosted-form/braintree-hosted-form.ts

@@ -1,6 +1,7 @@
 import { Dictionary, isEmpty, isNil, omitBy } from 'lodash';
 
 import {
+    BRAINTREE_SDK_HOSTED_FIELDS_FIX_VERSION,
     BraintreeBillingAddressRequestData,
     BraintreeClient,
     BraintreeFormErrorDataKeys,
@@ -17,6 +18,7 @@ import {
     BraintreeHostedFieldsState,
     BraintreeHostedFormError,
     BraintreeScriptLoader,
+    BraintreeSDKVersionManager,
     BraintreeStoredCardFieldsMap,
     isBraintreeFormFieldsMap,
     isBraintreeHostedFormError,
@@ -44,7 +46,10 @@ export default class BraintreeHostedForm {
     private clientToken?: string;
     private isInitializedHostedForm = false;
 
-    constructor(private braintreeScriptLoader: BraintreeScriptLoader) {}
+    constructor(
+        private braintreeScriptLoader: BraintreeScriptLoader,
+        private braintreeSDKVersionManager: BraintreeSDKVersionManager,
+    ) {}
 
     async initialize(
         options: BraintreeFormOptions,
@@ -175,7 +180,13 @@ export default class BraintreeHostedForm {
         const client = await this.getClient();
         const hostedFields = await this.braintreeScriptLoader.loadHostedFields();
 
-        return hostedFields.create({ ...options, client });
+        const currentSdkVersion = this.braintreeSDKVersionManager.getSDKVersion();
+        const hostedFieldsOptions =
+            currentSdkVersion === BRAINTREE_SDK_HOSTED_FIELDS_FIX_VERSION
+                ? { ...options, preventCursorJumps: true }
+                : options;
+
+        return hostedFields.create({ ...hostedFieldsOptions, client });
     }
 
     async getClient(): Promise<BraintreeClient> {