@fat-zebra/sdk 2.0.1-beta.12 → 2.0.1-beta.13

package/dist/hpp/hpp.d.ts

@@ -59,7 +59,7 @@ declare class Hpp {
     private crossFrameListenersBound;
     private publicEventListenersBound;
     constructor(config: HppModuleConfig);
-    setListenersAndEmitReady(): Promise<void>;
+    setListenersAndEmitReady(): void;
     load(config: HppLoadParams): void;
     purchase(): void;
     getPayNowUrl(options?: {

package/dist/hpp/hpp.js

@@ -4,14 +4,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
 };
 import * as bridge from '../shared/bridge-client';
 import { LocalStorageAccessTokenKey } from '../shared/constants';
@@ -50,28 +52,26 @@ class Hpp {
         });
     }
     setListenersAndEmitReady() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.crossFrameListenersBound) {
-                this.setCrossFramesEventListeners();
-                this.crossFrameListenersBound = true;
-            }
-            if (this.headlessLoaded && this.iframeLoaded) {
-                if (!this.publicEventListenersBound && !this.isThreeDSecureEnabled) {
-                    this.setPublicEventListeners();
-                    this.publicEventListenersBound = true;
-                }
-                emit(PublicEvent.HPP_READY);
+        if (!this.crossFrameListenersBound) {
+            this.setCrossFramesEventListeners();
+            this.crossFrameListenersBound = true;
+        }
+        if (this.headlessLoaded && this.iframeLoaded) {
+            if (!this.publicEventListenersBound && !this.isThreeDSecureEnabled) {
+                this.setPublicEventListeners();
+                this.publicEventListenersBound = true;
             }
-            else if (this.headlessPreviouslyLoaded && this.iframeLoaded) {
-                // subsequent iframe loads after headless has been previously loaded
-                // this caters for the SPA scenario
-                if (!this.publicEventListenersBound && !this.isThreeDSecureEnabled) {
-                    this.setPublicEventListeners();
-                    this.publicEventListenersBound = true;
-                }
-                emit(PublicEvent.HPP_READY);
+            emit(PublicEvent.HPP_READY);
+        }
+        else if (this.headlessPreviouslyLoaded && this.iframeLoaded) {
+            // subsequent iframe loads after headless has been previously loaded
+            // this caters for the SPA scenario
+            if (!this.publicEventListenersBound && !this.isThreeDSecureEnabled) {
+                this.setPublicEventListeners();
+                this.publicEventListenersBound = true;
             }
-        });
+            emit(PublicEvent.HPP_READY);
+        }
     }
     load(config) {
         var _a;
@@ -139,6 +139,8 @@ class Hpp {
         const handlers = {};
         handlers[BridgeEvent.TOKENIZE_CARD_RESPONSE] = (data) => {
             var _a;
+            if (data.source === 'verifyCard')
+                return;
             if (data.errors) {
                 emit(PublicEvent.TOKENIZATION_ERROR, {
                     message: 'Card tokenization failed.',
@@ -172,6 +174,7 @@ class Hpp {
                     return; // do not continue execution to old 3DS
                 }
                 this.sca.run({
+                    source: 'hpp',
                     cardToken: data.token,
                     customer: this.customer,
                     paymentIntent: this.paymentIntent,
@@ -235,10 +238,12 @@ class Hpp {
     setPublicEventListeners() {
         console.log('setPublicEventListeners');
         this.scaHandler = (event) => {
+            if (event.detail.data.source === 'verifyCard')
+                return;
             if (this.hppOptions.tokenizeOnly)
                 return;
             const threedsData = event.detail.data;
-            const extra = util.toObjectWithSnakeCaseKeys(threedsData);
+            const _a = util.toObjectWithSnakeCaseKeys(threedsData), { source } = _a, extra = __rest(_a, ["source"]);
             this.createPurchase(extra);
         };
         on(PublicEvent.SCA_SUCCESS, this.scaHandler);
@@ -248,6 +253,10 @@ class Hpp {
             off(PublicEvent.SCA_SUCCESS, this.scaHandler);
             this.publicEventListenersBound = false;
         }
+        if (this.crossFrameListenersBound) {
+            this.postMessageClient.removeEventListeners();
+            this.crossFrameListenersBound = false;
+        }
     }
     createPurchase(extra = null) {
         console.log('createPurchase');

package/dist/main.js

@@ -85,6 +85,7 @@ export default class FatZebra {
             channel,
             subject: BridgeEvent.TOKENIZE_CARD_REQUEST,
             data: {
+                source: 'verifyCard',
                 access_token: window.localStorage.getItem(LocalStorageAccessTokenKey),
                 card_holder: card.holder,
                 card_number: card.number,
@@ -104,7 +105,7 @@ export default class FatZebra {
         handlers[BridgeEvent.TOKENIZE_CARD_RESPONSE] = (data) => {
             callback(data);
         };
-        postMessageClient.setEventListeners(handlers);
+        postMessageClient.setEventListeners(handlers, { once: true });
     }
     requestThreeDSecureEnabled(timeout, paymentIntent) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -125,7 +126,7 @@ export default class FatZebra {
                             resolve(enabled);
                         }
                     },
-                });
+                }, { once: true });
                 const message = {
                     channel,
                     subject: 'fzi.is-enabled-three-d-secure-req',
@@ -177,6 +178,7 @@ export default class FatZebra {
                         else {
                             const bin = card.number.substr(0, 6);
                             this.sca.run({
+                                source: 'verifyCard',
                                 cardToken: data.token,
                                 customer: params.customer,
                                 paymentIntent: params.paymentIntent,
@@ -206,6 +208,7 @@ export default class FatZebra {
                             card_token: cardToken,
                         })).data.bin;
                         this.sca.run({
+                            source: 'verifyCard',
                             cardToken,
                             customer: params.customer,
                             paymentIntent: params.paymentIntent,

package/dist/sca/index.d.ts

@@ -3,7 +3,9 @@ import { EventCallback, Customer, PaymentIntent } from '../shared/types';
 import { CardinalManager } from './cardinal';
 import GatewayClient from '../shared/api-gateway-client';
 import { Environment } from "../shared/env";
+type ScaSource = 'verifyCard' | 'hpp';
 export interface ScaRunProps {
+    source?: ScaSource;
     cardToken: string;
     customer?: Customer;
     paymentIntent: PaymentIntent;
@@ -39,6 +41,7 @@ declare class Sca {
     private successCallback;
     private failureCallback;
     private environmentConfig;
+    private source;
     constructor({ gatewayClient, successCallback, failureCallback }: ScaConfig);
     loadScript(): void;
     get cardinal(): CardinalManager;

package/dist/sca/index.js

@@ -45,27 +45,28 @@ class Sca {
     }
     reportFailure(message, data) {
         if (this.failureCallback) {
-            const event = new CustomEvent(PublicEvent.SCA_ERROR, { detail: { errors: [message], data: data } });
+            const event = new CustomEvent(PublicEvent.SCA_ERROR, { detail: { errors: [message], data: Object.assign(Object.assign({}, data), { source: this.source }) } });
             this.failureCallback(event);
         }
         else {
-            emit(PublicEvent.SCA_ERROR, { errors: [message], data: data });
+            emit(PublicEvent.SCA_ERROR, { errors: [message], data: Object.assign(Object.assign({}, data), { source: this.source }) });
         }
         console.log(message);
     }
     reportSuccess(message, data) {
         if (this.successCallback) {
-            const event = new CustomEvent(PublicEvent.SCA_SUCCESS, { detail: data });
+            const event = new CustomEvent(PublicEvent.SCA_SUCCESS, { detail: { data: Object.assign(Object.assign({}, data), { source: this.source }) } });
             this.successCallback(event);
         }
         else {
-            emit(PublicEvent.SCA_SUCCESS, { message, data });
+            emit(PublicEvent.SCA_SUCCESS, { message, data: Object.assign(Object.assign({}, data), { source: this.source }) });
         }
         console.log(message);
     }
     run(config) {
         return __awaiter(this, void 0, void 0, function* () {
             console.log('Running 3DS (SCA)');
+            this.source = config.source;
             try {
                 if (!this._cardinal) {
                     this._cardinal = new CardinalManager();
@@ -260,6 +261,7 @@ __decorate([
             const params = args[0];
             return [
                 {
+                    source: params.source,
                     payment_intent: params.paymentIntent
                 },
             ];

package/dist/shared/post-message-client.d.ts

@@ -42,9 +42,13 @@ declare class PostMessageClient {
     private fzEnv;
     private target;
     private domain;
+    private messageListener;
     constructor(config: PostMessageClientConfig);
-    setEventListeners(handlers: EventHandlers): void;
+    setEventListeners(handlers: EventHandlers, options?: {
+        once?: boolean;
+    }): void;
     setEventListenersLegacy(handlers: EventHandlers): void;
+    removeEventListeners(): void;
     send(message: PostMessage | PostMessageLegacy): void;
 }
 export { PostMessageClient, };

package/dist/shared/post-message-client.js

@@ -10,14 +10,15 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import env, { Environment } from "./env";
 class PostMessageClient {
     constructor(config) {
+        this.messageListener = null;
         this.channel = config.channel;
         this.fzEnv = config.environment || process.env.API_ENV;
         this.domain = env[this.fzEnv].payNowUrl;
         this.target = config.target;
     }
     // Handle event messages that conform to PostMessage format.
-    setEventListeners(handlers) {
-        window.addEventListener("message", (event) => __awaiter(this, void 0, void 0, function* () {
+    setEventListeners(handlers, options = {}) {
+        this.messageListener = (event) => __awaiter(this, void 0, void 0, function* () {
             const validationEnabled = ![Environment.test, Environment.local, Environment.development].includes(this.fzEnv);
             const isChannelValid = event.data.channel === this.channel;
             const isOriginValid = event.origin === this.domain;
@@ -29,6 +30,14 @@ class PostMessageClient {
             const subject = message.subject;
             const handler = handlers[subject];
             if (handler) {
+                // Intentionally not using addEventListener's built-in { once } option. 
+                // That would remove the listener on the first message event of any kind, 
+                // so an unrelated message arriving before the expected subject would silently consume the listener 
+                // and cause a timeout. Instead, we remove only after a matching subject is found.
+                if (options.once && this.messageListener) {
+                    console.log(subject, 'Removing message listener after first use');
+                    window.removeEventListener('message', this.messageListener);
+                }
                 handler(message.data);
             }
             else {
@@ -36,7 +45,8 @@ class PostMessageClient {
                 // not to handle certain messages posted from child frame.
                 console.log(`[WARNING] No handler registered for subject ${subject}, message ${JSON.stringify(message)}`);
             }
-        }));
+        });
+        window.addEventListener("message", this.messageListener);
     }
     // Handle event messages that do not conform to PostMessage format.
     setEventListenersLegacy(handlers) {
@@ -59,6 +69,12 @@ class PostMessageClient {
             }
         });
     }
+    removeEventListeners() {
+        if (this.messageListener) {
+            window.removeEventListener("message", this.messageListener);
+            this.messageListener = null;
+        }
+    }
     send(message) {
         this.target.contentWindow.postMessage(message, this.domain);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fat-zebra/sdk",
-  "version": "2.0.1-beta.12",
+  "version": "2.0.1-beta.13",
   "description": "",
   "main": "index.js",
   "scripts": {