fix(payment): CHECKOUT-4973 Initialise hosted payment field within its iframe

Author: davidchin

package-lock.json

@@ -43,7 +43,7 @@
   },
   "dependencies": {
     "@babel/polyfill": "^7.4.4",
-    "@bigcommerce/bigpay-client": "^5.7.0",
+    "@bigcommerce/bigpay-client": "^5.9.0",
     "@bigcommerce/data-store": "^1.0.1",
     "@bigcommerce/form-poster": "^1.4.0",
     "@bigcommerce/memoize": "^1.0.0",

package.json

@@ -1,11 +1,10 @@
 import { RequestError } from '../common/error/errors';
 import { getResponse } from '../common/http-request/responses.mock';
 import { IframeEventListener, IframeEventPoster } from '../common/iframe';
-import { BrowserStorage } from '../common/storage';
 import { getErrorPaymentResponseBody } from '../payment/payments.mock';
 
 import { InvalidHostedFormConfigError, InvalidHostedFormError } from './errors';
-import HostedField, { LAST_RETRY_KEY } from './hosted-field';
+import HostedField from './hosted-field';
 import { HostedFieldEvent, HostedFieldEventType } from './hosted-field-events';
 import HostedFieldType from './hosted-field-type';
 import { getHostedFormOrderData } from './hosted-form-order-data.mock';
@@ -16,31 +15,23 @@ describe('HostedField', () => {
     let field: HostedField;
     let eventPoster: Pick<IframeEventPoster<HostedFieldEvent>, 'post' | 'setTarget'>;
     let eventListener: Pick<IframeEventListener<HostedInputEventMap>, 'listen'>;
-    let location: Pick<Location, 'replace'>;
-    let storage: Pick<BrowserStorage, 'getItem' | 'setItem'>;
 
     beforeEach(() => {
         container = document.createElement('div');
         eventPoster = { post: jest.fn(), setTarget: jest.fn() };
         eventListener = { listen: jest.fn() };
-        location = { replace: jest.fn() };
-        storage = { getItem: jest.fn(), setItem: jest.fn() };
 
         container.id = 'field-container-id';
         document.body.appendChild(container);
 
         field = new HostedField(
-            'https://payment.bigcommerce.com',
-            'dc030783-6129-4ee3-8e06-6f4270df1527',
             HostedFieldType.CardNumber,
             'field-container-id',
             'Enter your card number here',
             'Card number',
             { default: { color: 'rgb(0, 0, 0)', fontFamily: 'Open Sans, Arial' } },
             eventPoster as IframeEventPoster<HostedFieldEvent>,
-            eventListener as IframeEventListener<HostedInputEventMap>,
-            storage as BrowserStorage,
-            location as Location
+            eventListener as IframeEventListener<HostedInputEventMap>
         );
     });
 
@@ -60,7 +51,7 @@ describe('HostedField', () => {
 
         // tslint:disable-next-line:no-non-null-assertion
         expect(document.querySelector<HTMLIFrameElement>('#field-container-id iframe')!.src)
-            .toEqual('https://payment.bigcommerce.com/pay/hosted_forms/dc030783-6129-4ee3-8e06-6f4270df1527/field?version=1.0.0');
+            .toEqual(`${location.origin}/checkout/payment/hosted-field?version=1.0.0`);
     });
 
     it('sets target for event poster', async () => {
@@ -132,56 +123,6 @@ describe('HostedField', () => {
             }, expect.any(Object));
     });
 
-    it('retries if unable to attach', async () => {
-        jest.spyOn(eventPoster, 'post')
-            .mockRejectedValue({
-                type: HostedInputEventType.AttachFailed,
-                payload: {
-                    error: { message: 'Invalid form', redirectUrl: 'https://store.foobar.com/checkout' },
-                },
-            });
-
-        process.nextTick(() => {
-            // tslint:disable-next-line:no-non-null-assertion
-            document.querySelector('#field-container-id iframe')!
-                .dispatchEvent(new Event('load'));
-        });
-
-        field.attach();
-
-        // Wait for a timeout because `attach` never resolves in this scenario
-        await new Promise(resolve => setTimeout(resolve, 1));
-
-        expect(location.replace)
-            .toHaveBeenCalled();
-    });
-
-    it('throws error if unable to attach or retry', async () => {
-        jest.spyOn(eventPoster, 'post')
-            .mockRejectedValue({
-                type: HostedInputEventType.AttachFailed,
-                payload: {
-                    error: { message: 'Invalid form', redirectUrl: 'https://store.foobar.com/checkout' },
-                },
-            });
-
-        jest.spyOn(storage, 'getItem')
-            .mockImplementation(key => key.includes(LAST_RETRY_KEY) ? `${Date.now()}` : undefined);
-
-        process.nextTick(() => {
-            // tslint:disable-next-line:no-non-null-assertion
-            document.querySelector('#field-container-id iframe')!
-                .dispatchEvent(new Event('load'));
-        });
-
-        try {
-            await field.attach();
-        } catch (error) {
-            expect(error)
-                .toBeInstanceOf(InvalidHostedFormError);
-        }
-    });
-
     it('throws error if container is invalid', async () => {
         container.remove();
 

src/hosted-form/hosted-field.spec.ts

@@ -1,10 +1,9 @@
 import { values } from 'lodash';
 import { fromEvent } from 'rxjs';
-import { catchError, switchMap, take } from 'rxjs/operators';
+import { switchMap, take } from 'rxjs/operators';
 
 import { mapFromPaymentErrorResponse } from '../common/error/errors';
 import { IframeEventListener, IframeEventPoster } from '../common/iframe';
-import { BrowserStorage } from '../common/storage';
 import { parseUrl } from '../common/url';
 import { CardInstrument } from '../payment/instrument';
 
@@ -13,7 +12,7 @@ import { HostedFieldEvent, HostedFieldEventType } from './hosted-field-events';
 import HostedFieldType from './hosted-field-type';
 import { HostedFieldStylesMap } from './hosted-form-options';
 import HostedFormOrderData from './hosted-form-order-data';
-import { HostedInputAttachErrorEvent, HostedInputEventMap, HostedInputEventType, HostedInputSubmitErrorEvent, HostedInputValidateEvent } from './iframe-content';
+import { HostedInputEventMap, HostedInputEventType, HostedInputSubmitErrorEvent, HostedInputValidateEvent } from './iframe-content';
 
 export const RETRY_INTERVAL = 60 * 1000;
 export const LAST_RETRY_KEY = 'lastRetry';
@@ -22,22 +21,18 @@ export default class HostedField {
     private _iframe: HTMLIFrameElement;
 
     constructor(
-        host: string,
-        formId: string,
         private _type: HostedFieldType,
         private _containerId: string,
         private _placeholder: string,
         private _accessibilityLabel: string,
         private _styles: HostedFieldStylesMap,
         private _eventPoster: IframeEventPoster<HostedFieldEvent>,
         private _eventListener: IframeEventListener<HostedInputEventMap>,
-        private _storage: BrowserStorage,
-        private _location: Location,
         private _cardInstrument?: CardInstrument
     ) {
         this._iframe = document.createElement('iframe');
 
-        this._iframe.src = `${host}/pay/hosted_forms/${formId}/field?version=${LIBRARY_VERSION}`;
+        this._iframe.src = `/checkout/payment/hosted-field?version=${LIBRARY_VERSION}`;
         this._iframe.style.border = 'none';
         this._iframe.style.height = '100%';
         this._iframe.style.overflow = 'hidden';
@@ -84,13 +79,6 @@ export default class HostedField {
                         errorType: HostedInputEventType.AttachFailed,
                     });
                 }),
-                catchError(error => {
-                    if (this._isAttachErrorEvent(error)) {
-                        return this._handleAttachErrorEvent(error);
-                    }
-
-                    throw error;
-                }),
                 take(1)
             ).toPromise();
     }
@@ -145,22 +133,6 @@ export default class HostedField {
         }
     }
 
-    private async _handleAttachErrorEvent(event: HostedInputAttachErrorEvent): Promise<void> {
-        const lastRetry = Number(this._storage.getItem(LAST_RETRY_KEY));
-
-        // This is to prevent the possibility of getting into a retry loop, in
-        // case there is something unexpected that prevents the shopper from
-        // being able to recover from an invalid hosted payment form error.
-        if (!lastRetry || Date.now() - lastRetry > RETRY_INTERVAL) {
-            this._storage.setItem(LAST_RETRY_KEY, Date.now());
-            this._location.replace(event.payload.error.redirectUrl);
-
-            return new Promise(() => {});
-        }
-
-        throw new InvalidHostedFormError(event.payload.error.message);
-    }
-
     private _getFontUrls(): string[] {
         const hostname = 'fonts.googleapis.com';
         const links = document.querySelectorAll(`link[href*='${hostname}'][rel='stylesheet']`);
@@ -178,8 +150,4 @@ export default class HostedField {
     private _isSubmitErrorEvent(event: any): event is HostedInputSubmitErrorEvent {
         return event.type === HostedInputEventType.SubmitFailed;
     }
-
-    private _isAttachErrorEvent(event: any): event is HostedInputAttachErrorEvent {
-        return event.type === HostedInputEventType.AttachFailed;
-    }
 }

src/hosted-form/hosted-field.ts

@@ -14,7 +14,7 @@ describe('HostedFormFactory', () => {
     });
 
     it('creates hosted form', () => {
-        const result = factory.create('https://store.foobar.com', 'dc030783-6129-4ee3-8e06-6f4270df1527', {
+        const result = factory.create('https://store.foobar.com', {
             fields: {
                 [HostedFieldType.CardCode]: { containerId: 'card-code' },
                 [HostedFieldType.CardExpiry]: { containerId: 'card-expiry' },

src/hosted-form/hosted-form-factory.spec.ts

@@ -4,7 +4,6 @@ import { pick } from 'lodash';
 import { ReadableCheckoutStore } from '../checkout';
 import { MissingDataError, MissingDataErrorType } from '../common/error/errors';
 import { IframeEventListener, IframeEventPoster } from '../common/iframe';
-import { BrowserStorage } from '../common/storage';
 import { CardInstrument } from '../payment/instrument';
 import { createSpamProtection, PaymentHumanVerificationHandler } from '../spam-protection';
 
@@ -14,14 +13,12 @@ import HostedForm from './hosted-form';
 import HostedFormOptions, { HostedCardFieldOptionsMap, HostedStoredCardFieldOptionsMap } from './hosted-form-options';
 import HostedFormOrderDataTransformer from './hosted-form-order-data-transformer';
 
-const STORAGE_NAMESPACE = 'BigCommerce.HostedField';
-
 export default class HostedFormFactory {
     constructor(
         private _store: ReadableCheckoutStore
     ) {}
 
-    create(host: string, formId: string, options: HostedFormOptions): HostedForm {
+    create(host: string, options: HostedFormOptions): HostedForm {
         const fieldTypes = Object.keys(options.fields) as HostedFieldType[];
         const fields = fieldTypes.reduce<HostedField[]>((result, type) => {
             const fields = options.fields as HostedStoredCardFieldOptionsMap & HostedCardFieldOptionsMap;
@@ -34,17 +31,13 @@ export default class HostedFormFactory {
             return [
                 ...result,
                 new HostedField(
-                    host,
-                    formId,
                     type,
                     fieldOptions.containerId,
                     fieldOptions.placeholder || '',
                     fieldOptions.accessibilityLabel || '',
                     options.styles || {},
                     new IframeEventPoster(host),
                     new IframeEventListener(host),
-                    new BrowserStorage(STORAGE_NAMESPACE),
-                    window.location,
                     'instrumentId' in fieldOptions ?
                         this._getCardInstrument(fieldOptions.instrumentId) :
                         undefined

src/hosted-form/hosted-form-factory.ts

@@ -0,0 +1,15 @@
+import { BrowserStorage } from '../../common/storage';
+
+import HostedInputStorage from './hosted-input-storage';
+
+const STORAGE_NAMESPACE = 'BigCommerce.HostedInput';
+
+let storage: HostedInputStorage | null;
+
+export default function getHostedInputStorage(): HostedInputStorage {
+    storage = storage || new HostedInputStorage(
+        new BrowserStorage(STORAGE_NAMESPACE)
+    );
+
+    return storage;
+}

src/hosted-form/iframe-content/get-hosted-input-storage.ts

@@ -7,6 +7,7 @@ import HostedFieldType from '../hosted-field-type';
 
 import CardExpiryFormatter from './card-expiry-formatter';
 import CardNumberFormatter from './card-number-formatter';
+import getHostedInputStorage from './get-hosted-input-storage';
 import HostedAutocompleteFieldset from './hosted-autocomplete-fieldset';
 import HostedCardExpiryInput from './hosted-card-expiry-input';
 import HostedCardNumberInput from './hosted-card-number-input';
@@ -139,6 +140,7 @@ export default class HostedInputFactory {
         return new HostedInputPaymentHandler(
             new HostedInputAggregator(window.parent),
             new HostedInputValidator(cardInstrument),
+            getHostedInputStorage(),
             new IframeEventPoster(this._parentOrigin, window.parent),
             new PaymentRequestSender(createBigpayClient()),
             new PaymentRequestTransformer()

src/hosted-form/iframe-content/hosted-input-factory.ts

@@ -7,21 +7,25 @@ import HostedFieldType from '../hosted-field-type';
 import HostedInput from './hosted-input';
 import HostedInputFactory from './hosted-input-factory';
 import HostedInputInitializer from './hosted-input-initializer';
+import HostedInputStorage from './hosted-input-storage';
 
 describe('HostedInputInitializer', () => {
     let container: HTMLElement;
     let eventListener: IframeEventListener<HostedFieldEventMap>;
     let factory: Pick<HostedInputFactory, 'create'>;
     let initializer: HostedInputInitializer;
     let input: Pick<HostedInput, 'attach'>;
+    let storage: Pick<HostedInputStorage, 'setNonce'>;
 
     beforeEach(() => {
         factory = { create: jest.fn() };
+        storage = { setNonce: jest.fn() };
         eventListener = new IframeEventListener('https://store.foobar.com');
         input = { attach: jest.fn() };
 
         initializer = new HostedInputInitializer(
             factory as HostedInputFactory,
+            storage as HostedInputStorage,
             eventListener
         );
 
@@ -83,6 +87,20 @@ describe('HostedInputInitializer', () => {
             .toHaveBeenCalled();
     });
 
+    it('stores nonce into storage', async () => {
+        process.nextTick(() => {
+            eventListener.trigger({
+                type: HostedFieldEventType.AttachRequested,
+                payload: { type: HostedFieldType.CardNumber },
+            });
+        });
+
+        await initializer.initialize('input-container', 'abc');
+
+        expect(storage.setNonce)
+            .toHaveBeenCalledWith('abc');
+    });
+
     it('returns newly created input', async () => {
         process.nextTick(() => {
             eventListener.trigger({

src/hosted-form/iframe-content/hosted-input-initializer.spec.ts

@@ -7,6 +7,7 @@ import { HostedFieldAttachEvent, HostedFieldEventMap, HostedFieldEventType } fro
 
 import HostedInput from './hosted-input';
 import HostedInputFactory from './hosted-input-factory';
+import HostedInputStorage from './hosted-input-storage';
 
 interface EventTargetLike<TEvent> {
     addListener(eventName: string, handler: (event: TEvent) => void): void;
@@ -16,10 +17,15 @@ interface EventTargetLike<TEvent> {
 export default class HostedInputInitializer {
     constructor(
         private _factory: HostedInputFactory,
+        private _storage: HostedInputStorage,
         private _eventListener: IframeEventListener<HostedFieldEventMap>
     ) {}
 
-    initialize(containerId: string): Promise<HostedInput> {
+    initialize(containerId: string, nonce?: string): Promise<HostedInput> {
+        if (nonce) {
+            this._storage.setNonce(nonce);
+        }
+
         const form = this._createFormContainer(containerId);
 
         this._resetPageStyles(containerId);