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

package/dist/hpp/hpp.d.ts

@@ -13,7 +13,7 @@ interface HppModuleConfig {
     username: string;
     sca: Sca;
     threeDSecure: ThreeDSecure;
-    requestThreeDSEnabled: () => Promise<boolean>;
+    isThreeDSecureEnabled?: boolean;
     test?: boolean;
 }
 interface HppLoadParams {
@@ -54,13 +54,12 @@ declare class Hpp {
     private headlessPreviouslyLoaded;
     private iframeLoaded;
     private isThreeDSecureEnabled;
-    private requestThreeDSEnabled;
     private challengeWindowSize;
     private scaHandler;
     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';
@@ -30,6 +32,7 @@ const HPP_DEFAULT_OPTIONS = {
 };
 class Hpp {
     constructor(config) {
+        var _a;
         this.isThreeDSecureEnabled = false;
         this.paymentIntent = config.paymentIntent;
         this.customer = config.customer;
@@ -41,38 +44,34 @@ class Hpp {
         this.headlessPreviouslyLoaded = false;
         this.iframeLoaded = false;
         this.threeDSecure = config.threeDSecure;
-        this.requestThreeDSEnabled = config.requestThreeDSEnabled;
         this.crossFrameListenersBound = false;
         this.publicEventListenersBound = false;
+        this.isThreeDSecureEnabled = (_a = config.isThreeDSecureEnabled) !== null && _a !== void 0 ? _a : false;
         configureLogger({
             baseUrl: env[process.env.API_ENV].payNowUrl
         });
     }
     setListenersAndEmitReady() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.crossFrameListenersBound) {
-                this.setCrossFramesEventListeners();
-                this.crossFrameListenersBound = true;
-            }
-            if (this.headlessLoaded && this.iframeLoaded) {
-                this.isThreeDSecureEnabled = yield this.requestThreeDSEnabled();
-                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) {
-                this.isThreeDSecureEnabled = yield this.requestThreeDSEnabled();
-                // 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;
@@ -136,9 +135,12 @@ class Hpp {
         return queryString ? `${base}?${searchParams.toString()}` : `${base}`;
     }
     setCrossFramesEventListeners() {
+        console.log('setCrossFramesEventListeners');
         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,
@@ -233,11 +236,14 @@ class Hpp {
         this.postMessageClient.setEventListeners(handlers);
     }
     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);
@@ -247,8 +253,13 @@ 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');
         const message = {
             channel: 'sca',
             subject: BridgeEvent.CREATE_PAYMENT_REQUEST,

package/dist/main.d.ts

@@ -30,18 +30,21 @@ export default class FatZebra {
     private headless;
     private threeDSecure;
     private threeDSecureListenersBound;
+    private isThreeDSecureEnabled;
     private bridgeReady;
+    private authReady;
     constructor(config: FZConfig);
+    private setAuthImpl;
     tokenizeCard(card: Card): void;
     cardDidTokenize(callback: (data: any) => void): void;
-    private requestThreeDSEnabled;
+    private requestThreeDSecureEnabled;
     verifyCard(params: VerifyCardParams): Promise<void>;
-    setThreeDSecureListeners(): void;
     renderPaymentsPage(params: HppLoadParams): void;
     renderApplePayButton(params: ApplePayParams): void;
     renderClickToPay(params: HppClickToPayParams): void;
-    reportThreeDSecureFetched(data: any, paymentIntent?: PaymentIntent): void;
-    reportRequestThreedsEnabledTimeout(paymentIntent?: PaymentIntent): void;
+    private setThreeDSecureListeners;
+    private reportThreeDSecureFetched;
+    private reportRequestThreedsEnabledTimeout;
     checkout(): void;
     on(event: PublicEvent, callback: (e: any) => void): void;
     off(event: PublicEvent, callback: (e: any) => void): void;

package/dist/main.js

@@ -30,7 +30,10 @@ import { logMethod } from './logging/logMethod';
 import ThreeDSecure from './three_d_secure';
 export default class FatZebra {
     constructor(config) {
+        var _a;
         this.threeDSecureListenersBound = false;
+        this.isThreeDSecureEnabled = false;
+        console.log('initialising');
         setLoggerUsername(config.username);
         this.fzConfig = config;
         window.MerchantUsername = config.username;
@@ -38,40 +41,43 @@ export default class FatZebra {
             username: config.username,
             environment: process.env.API_ENV,
         });
-        this.sca = new Sca({
-            gatewayClient: this.gatewayClient,
-        });
-        this.sca.loadScript();
         const { el, isExisting } = bridge.load2(process.env.PAYNOW_BRIDGE_URL);
         this.headless = el;
-        this.threeDSecure = new ThreeDSecure({
-            bridge: this.headless,
-            environment: process.env.API_ENV,
-        });
-        // bridgeReady is a single promise created once. 
-        // After it resolves (bridge loaded), every subsequent "await this.bridgeReady" 
-        // returns instantly — there's no re-evaluation. 
-        // So for a SPA where the bridge is already loaded, there's zero overhead.
         if (isExisting) {
-            console.log('headless exists');
             this.bridgeReady = Promise.resolve();
-            this.setThreeDSecureListeners();
         }
         else {
             this.bridgeReady = new Promise((resolve) => {
-                this.headless.addEventListener('load', () => {
-                    console.log('headless loaded');
-                    this.setThreeDSecureListeners();
-                    resolve();
-                });
+                this.headless.addEventListener('load', () => resolve());
             });
         }
+        this.authReady = this.setAuthImpl();
         const message = {
             channel: 'sca',
             subject: BridgeEvent.READY,
             data: {},
         };
-        window.top.postMessage(message, '*');
+        (_a = window.top) === null || _a === void 0 ? void 0 : _a.postMessage(message, '*');
+    }
+    setAuthImpl() {
+        return __awaiter(this, void 0, void 0, function* () {
+            console.log('setAuthImpl()');
+            yield this.bridgeReady;
+            this.isThreeDSecureEnabled = yield this.requestThreeDSecureEnabled(500);
+            if (this.isThreeDSecureEnabled) {
+                this.threeDSecure = new ThreeDSecure({
+                    bridge: this.headless,
+                    environment: process.env.API_ENV,
+                });
+                this.setThreeDSecureListeners();
+            }
+            else {
+                this.sca = new Sca({
+                    gatewayClient: this.gatewayClient,
+                });
+                this.sca.loadScript();
+            }
+        });
     }
     tokenizeCard(card) {
         const channel = 'sca';
@@ -79,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,
@@ -98,20 +105,11 @@ export default class FatZebra {
         handlers[BridgeEvent.TOKENIZE_CARD_RESPONSE] = (data) => {
             callback(data);
         };
-        postMessageClient.setEventListeners(handlers);
+        postMessageClient.setEventListeners(handlers, { once: true });
     }
-    requestThreeDSEnabled(timeout, paymentIntent) {
+    requestThreeDSecureEnabled(timeout, paymentIntent) {
         return __awaiter(this, void 0, void 0, function* () {
             console.log('requestThreeDSEnabled');
-            // If the bridge loads in time, bridgeReady wins and we can continue requesting the flag. 
-            // If not, the timeout resolves the race and we fall through 
-            // — the postMessage is sent to an unready bridge, the response never arrives, 
-            // and the existing window.setTimeout at the bottom fires and resolves false. 
-            // The total worst-case wait is still bounded by timeout.
-            yield Promise.race([
-                this.bridgeReady,
-                new Promise((resolve) => window.setTimeout(resolve, timeout)),
-            ]);
             return new Promise((resolve) => {
                 const channel = 'sca';
                 const postMessageClient = new PostMessageClient({
@@ -128,7 +126,7 @@ export default class FatZebra {
                             resolve(enabled);
                         }
                     },
-                });
+                }, { once: true });
                 const message = {
                     channel,
                     subject: 'fzi.is-enabled-three-d-secure-req',
@@ -160,14 +158,14 @@ export default class FatZebra {
                 });
                 return;
             }
-            const threeDSEnabled = yield this.requestThreeDSEnabled(1000, params.paymentIntent);
+            yield this.authReady;
             switch (params.paymentMethod.type) {
                 case PaymentMethodType.CARD: {
                     console.log('Verify card (new card)');
                     const card = params.paymentMethod.data;
                     this.cardDidTokenize((data) => __awaiter(this, void 0, void 0, function* () {
                         var _a, _b;
-                        if (threeDSEnabled) {
+                        if (this.threeDSecure && this.isThreeDSecureEnabled) {
                             this.threeDSecure.run({
                                 paymentIntent: params.paymentIntent,
                                 cardToken: data.token,
@@ -180,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,
@@ -194,7 +193,7 @@ export default class FatZebra {
                 case PaymentMethodType.CARD_ON_FILE: {
                     console.log('Verify card (card on file)');
                     const cardToken = params.paymentMethod.data.token;
-                    if (threeDSEnabled) {
+                    if (this.threeDSecure && this.isThreeDSecureEnabled) {
                         this.threeDSecure.run({
                             paymentIntent: params.paymentIntent,
                             cardToken,
@@ -209,6 +208,7 @@ export default class FatZebra {
                             card_token: cardToken,
                         })).data.bin;
                         this.sca.run({
+                            source: 'verifyCard',
                             cardToken,
                             customer: params.customer,
                             paymentIntent: params.paymentIntent,
@@ -221,21 +221,7 @@ export default class FatZebra {
             }
         });
     }
-    setThreeDSecureListeners() {
-        console.log('setThreeDSecureListeners');
-        if (this.threeDSecureListenersBound)
-            return;
-        const channel = 'sca';
-        const postMessageClient = new PostMessageClient({
-            channel,
-            target: this.headless,
-        });
-        const handlers = this.threeDSecure.messageHandlers();
-        postMessageClient.setEventListeners(handlers);
-        this.threeDSecureListenersBound = true;
-    }
     renderPaymentsPage(params) {
-        var _a;
         console.log('renderPaymentsPage');
         const valid = validateHppLoadParams(params);
         if (!valid) {
@@ -245,20 +231,25 @@ export default class FatZebra {
             });
             return;
         }
-        if ((_a = window.HPP) === null || _a === void 0 ? void 0 : _a.destroy) {
-            window.HPP.destroy();
-        }
-        window.HPP = new Hpp({
-            version: params.version,
-            paymentIntent: params.paymentIntent,
-            customer: params.customer,
-            username: this.fzConfig.username,
-            sca: this.sca,
-            test: this.fzConfig.test,
-            threeDSecure: this.threeDSecure,
-            requestThreeDSEnabled: () => this.requestThreeDSEnabled(1000, params.paymentIntent),
+        // chaining here to avoid making renderPaymentsPage async
+        // this is ugly but should only be temporary while we need to call requestThreeDSecureEnabled to fetch the flag
+        this.authReady.then(() => {
+            var _a;
+            if ((_a = window.HPP) === null || _a === void 0 ? void 0 : _a.destroy) {
+                window.HPP.destroy();
+            }
+            window.HPP = new Hpp({
+                version: params.version,
+                paymentIntent: params.paymentIntent,
+                customer: params.customer,
+                username: this.fzConfig.username,
+                sca: this.sca,
+                test: this.fzConfig.test,
+                threeDSecure: this.threeDSecure,
+                isThreeDSecureEnabled: this.isThreeDSecureEnabled,
+            });
+            window.HPP.load(params);
         });
-        window.HPP.load(params);
     }
     renderApplePayButton(params) {
         const valid = validateApplePayLoadParams(params);
@@ -296,11 +287,24 @@ export default class FatZebra {
         });
         window.HPP.load(params);
     }
+    setThreeDSecureListeners() {
+        console.log('setThreeDSecureListeners');
+        if (this.threeDSecureListenersBound)
+            return;
+        const channel = 'sca';
+        const postMessageClient = new PostMessageClient({
+            channel,
+            target: this.headless,
+        });
+        const handlers = this.threeDSecure.messageHandlers();
+        postMessageClient.setEventListeners(handlers);
+        this.threeDSecureListenersBound = true;
+    }
     reportThreeDSecureFetched(data, paymentIntent) {
-        console.log("three_d_secure fetched", data);
+        console.log('three_d_secure fetched', data);
     }
     reportRequestThreedsEnabledTimeout(paymentIntent) {
-        console.log("3DS enabled check timed out");
+        console.log('3DS enabled check timed out');
     }
     checkout() {
         window.HPP.purchase();
@@ -325,7 +329,7 @@ __decorate([
             ];
         },
     })
-], FatZebra.prototype, "requestThreeDSEnabled", null);
+], FatZebra.prototype, "requestThreeDSecureEnabled", null);
 __decorate([
     logMethod({
         mapArgs: (args) => {

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.11",
+  "version": "2.0.1-beta.13",
   "description": "",
   "main": "index.js",
   "scripts": {