feat(payments): INT-1997 Add optional target parameter

package.json

@@ -55,7 +55,7 @@
     "webpack": "^1.13.2"
   },
   "dependencies": {
-    "@bigcommerce/form-poster": "^1.2.1",
+    "@bigcommerce/form-poster": "^1.4.0",
     "deep-assign": "^2.0.0",
     "object-assign": "^4.1.0"
   }

src/client/client.js

@@ -82,10 +82,11 @@ export default class Client {
     /**
      * @param {PaymentRequestData} data
      * @param {Function} [callback]
+     * @param {string} target
      * @returns {void}
      */
-    initializeOffsitePayment(data, callback) {
-        this.offsitePaymentInitializer.initializeOffsitePayment(data, callback);
+    initializeOffsitePayment(data, callback, target) {
+        this.offsitePaymentInitializer.initializeOffsitePayment(data, callback, target);
     }
 
     /**

src/payment/offsite-payment-initializer.js

@@ -45,10 +45,11 @@ export default class OffsitePaymentInitializer {
     /**
      * @param {PaymentRequestData} data
      * @param {Function} [callback]
+     * @param {string} target
      * @returns {void}
      * @throws {Error}
      */
-    initializeOffsitePayment(data, callback) {
+    initializeOffsitePayment(data, callback, target) {
         const { paymentMethod = {} } = data;
 
         if (paymentMethod.type !== HOSTED) {
@@ -58,6 +59,6 @@ export default class OffsitePaymentInitializer {
         const payload = this.payloadMapper.mapToPayload(data);
         const url = this.urlHelper.getOffsitePaymentUrl();
 
-        this.formPoster.postForm(url, payload, callback);
+        this.formPoster.postForm(url, payload, callback, target);
     }
 }

test/client/client.spec.js

@@ -11,6 +11,7 @@ describe('Client', () => {
     let offsitePaymentInitializer;
     let paymentSubmitter;
     let storeRequestSender;
+    let target;
 
     beforeEach(() => {
         config = { host: 'https://bigpay.dev' };
@@ -34,6 +35,8 @@ describe('Client', () => {
             deleteShopperInstrument: jasmine.createSpy('deleteShopperInstrument'),
         };
 
+        target = undefined;
+
         client = new Client(
             config,
             paymentSubmitter,
@@ -59,7 +62,7 @@ describe('Client', () => {
         expect(instance instanceof Client).toEqual(true);
     });
 
-    it('initializes the offsite payment flow', () => {
+    it('initializes the offsite payment flow with the default target', () => {
         const callback = () => {};
         const data = merge({}, paymentRequestDataMock, {
             paymentMethod: {
@@ -69,7 +72,21 @@ describe('Client', () => {
 
         client.initializeOffsitePayment(data, callback);
 
-        expect(offsitePaymentInitializer.initializeOffsitePayment).toHaveBeenCalledWith(data, callback);
+        expect(offsitePaymentInitializer.initializeOffsitePayment).toHaveBeenCalledWith(data, callback, target);
+    });
+
+    it('initializes the offsite payment flow with the provided target', () => {
+        target = 'target_iframe';
+        const callback = () => {};
+        const data = merge({}, paymentRequestDataMock, {
+            paymentMethod: {
+                type: HOSTED,
+            },
+        });
+
+        client.initializeOffsitePayment(data, callback, target);
+
+        expect(offsitePaymentInitializer.initializeOffsitePayment).toHaveBeenCalledWith(data, callback, target);
     });
 
     it('submits the payment data', () => {

test/payment/offsite-payment-initializer.spec.js

@@ -8,6 +8,7 @@ describe('OffsitePaymentInitializer', () => {
     let formPoster;
     let offsitePaymentInitializer;
     let payloadMapper;
+    let target;
     let transformedData;
     let urlHelper;
 
@@ -32,6 +33,8 @@ describe('OffsitePaymentInitializer', () => {
             mapToPayload: jasmine.createSpy('mapToPayload').and.returnValue(transformedData),
         };
 
+        target = undefined;
+
         offsitePaymentInitializer = new OffsitePaymentInitializer(urlHelper, formPoster, payloadMapper);
     });
 
@@ -48,13 +51,23 @@ describe('OffsitePaymentInitializer', () => {
         expect(payloadMapper.mapToPayload).toHaveBeenCalled();
     });
 
-    it('posts the request payload containing payment information to the server using a hidden HTML form', () => {
+    it('posts the request payload containing payment information to the server using a hidden HTML form with the default target', () => {
         const callback = () => {};
         const url = urlHelper.getOffsitePaymentUrl();
 
         offsitePaymentInitializer.initializeOffsitePayment(data, callback);
 
-        expect(formPoster.postForm).toHaveBeenCalledWith(url, transformedData, callback);
+        expect(formPoster.postForm).toHaveBeenCalledWith(url, transformedData, callback, target);
+    });
+
+    it('posts the request payload containing payment information to the server using a hidden HTML form with the provided target', () => {
+        target = 'target_iframe';
+        const callback = () => {};
+        const url = urlHelper.getOffsitePaymentUrl();
+
+        offsitePaymentInitializer.initializeOffsitePayment(data, callback, target);
+
+        expect(formPoster.postForm).toHaveBeenCalledWith(url, transformedData, callback, target);
     });
 
     it('throws an error if the payment method is not a hosted provider', () => {