[PEV-20-375] New sample view endpoints for VPOS portal Iframe

Author: JuliCarracedo

.github/workflows/config.yml

@@ -9,15 +9,15 @@ jobs:
   build:
     name: 'Run tests'
     runs-on: ubuntu-latest
-    container: node:9.4.0
+    container: node:23.7.0
     defaults:
       run:
         working-directory: ./vpos/checkout/javascript
 
     timeout-minutes: 10
 
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
     - run: yarn install --frozen-lockfile
     - run: yarn test
 

vpos/checkout/javascript/src/bancard-checkout.js

@@ -2,7 +2,9 @@ import exceptions from './bancard-checkout-exceptions';
 import constants from './constants';
 
 const CHECKOUT_IFRAME_URL = `${constants.BANCARD_URL}/checkout/new`;
+const CHECKOUT_EXAMPLE_IFRAME_URL = `${constants.BANCARD_URL}/checkout/static_example`;
 const NEW_CARD_IFRAME_URL = `${constants.BANCARD_URL}/checkout/register_card/new`;
+const CARD_EXAMPLE_IFRAME_URL = `${constants.BANCARD_URL}/checkout/static_example/register_card`;
 const ZIMPLE_IFRAME_URL = `${constants.BANCARD_URL}/checkout/zimple/new`;
 const ALLOWED_STYLES_URL = `${constants.BANCARD_URL}/checkout/allowed_styles`;
 const CONFIRMATION_IFRAME_URL = `${constants.BANCARD_URL}/alias_token/confirmation/new`;
@@ -159,6 +161,18 @@ const internalMethods = {
     internalMethods.initializeIframe(divId, iFrameUrl, options);
   },
 
+  createStaticForm: ({
+    divId, applicationId, options, url,
+  }) => {
+    if (typeof applicationId !== 'string' || applicationId === '') {
+      throw new exceptions.InvalidParameter('Application id');
+    }
+
+    const iFrameUrl = internalMethods.addParamToUrl(url, 'application_id', applicationId);
+
+    internalMethods.initializeIframe(divId, iFrameUrl, options);
+  },
+
   loadPinPad: ({
     divId, aliasToken, options, url,
   }) => {
@@ -190,6 +204,17 @@ class Bancard {
     };
   }
 
+  get CheckoutExample() {
+    return {
+      createStaticForm: (divId, applicationId, options) => {
+        this.divId = divId;
+        internalMethods.createStaticForm({
+          divId, applicationId, options, url: CHECKOUT_EXAMPLE_IFRAME_URL,
+        });
+      },
+    };
+  }
+
   get Cards() {
     return {
       createForm: (divId, processId, options) => {
@@ -201,6 +226,17 @@ class Bancard {
     };
   }
 
+  get CardsExample() {
+    return {
+      createStaticForm: (divId, applicationId, options) => {
+        this.divId = divId;
+        internalMethods.createStaticForm({
+          divId, applicationId, options, url: CARD_EXAMPLE_IFRAME_URL,
+        });
+      },
+    };
+  }
+
   get Zimple() {
     return {
       createForm: (divId, processId, options) => {

vpos/checkout/javascript/src/specs/bancard-checkout.test.js

@@ -29,6 +29,24 @@ describe('Bancard', () => {
       });
     });
 
+    describe('CheckoutExample', () => {
+      beforeEach(() => {
+        instance.CheckoutExample.createStaticForm('targetDiv', '1234');
+        window.location.replace = jest.fn();
+      });
+
+      afterEach(() => { instance.destroy(); });
+
+      test('It creates the iframe', () => {
+        expect(document.querySelectorAll('iframe').length).toBe(1);
+      });
+
+      test('Iframe points to correct URL', () => {
+        expect(document.querySelectorAll('iframe')[0].getAttribute('src'))
+          .toBe('https://desa.infonet.com.py:8085/checkout/static_example?application_id=1234');
+      });
+    });
+
     describe('Cards', () => {
       beforeEach(() => {
         instance.Cards.createForm('targetDiv', '1234');
@@ -47,6 +65,24 @@ describe('Bancard', () => {
       });
     });
 
+    describe('CardsExample', () => {
+      beforeEach(() => {
+        instance.CardsExample.createStaticForm('targetDiv', '1234');
+        window.location.replace = jest.fn();
+      });
+
+      afterEach(() => { instance.destroy(); });
+
+      test('It creates the iframe', () => {
+        expect(document.querySelectorAll('iframe').length).toBe(1);
+      });
+
+      test('Iframe points to correct URL', () => {
+        expect(document.querySelectorAll('iframe')[0].getAttribute('src'))
+          .toBe('https://desa.infonet.com.py:8085/checkout/static_example/register_card?application_id=1234');
+      });
+    });
+
     describe('Zimple', () => {
       beforeEach(() => {
         instance.Zimple.createForm('targetDiv', '1234');