@fat-zebra/sdk 2.0.1-beta.9 → 2.0.2-beta.1

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?: {
@@ -72,5 +71,6 @@ declare class Hpp {
     createPurchase(extra?: {
         [key: string]: boolean | string;
     }): void;
+    private reportHppStatus;
 }
 export { Hpp, type HppLoadParams, HPP_DEFAULT_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,35 @@ 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);
+        this.reportHppStatus(this);
+        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 +136,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 +175,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 +237,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 +254,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,
@@ -268,8 +280,33 @@ class Hpp {
         }
         this.headless.contentWindow.postMessage(message, '*');
     }
+    reportHppStatus(hpp) {
+    }
 }
+__decorate([
+    logMethod()
+], Hpp.prototype, "setCrossFramesEventListeners", null);
+__decorate([
+    logMethod()
+], Hpp.prototype, "setPublicEventListeners", null);
 __decorate([
     logMethod()
 ], Hpp.prototype, "createPurchase", null);
+__decorate([
+    logMethod({
+        mapArgs: (args) => {
+            const hpp = args[0];
+            return [
+                {
+                    crossFrameListenersBound: hpp.crossFrameListenersBound,
+                    publicEventListenersBound: hpp.publicEventListenersBound,
+                    isThreeDSecureEnabled: hpp.isThreeDSecureEnabled,
+                    headlessLoaded: hpp.headlessLoaded,
+                    headlessPreviouslyLoaded: hpp.headlessPreviouslyLoaded,
+                    iframeLoaded: hpp.iframeLoaded,
+                },
+            ];
+        },
+    })
+], Hpp.prototype, "reportHppStatus", null);
 export { Hpp, HPP_DEFAULT_OPTIONS, };

package/dist/logging/instrument.d.ts

@@ -2,6 +2,7 @@ export type LogOptions<A extends unknown[]> = {
     endpoint?: string | ((...args: A) => string);
     mapArgs?: (args: A) => unknown;
     enabled?: () => boolean;
+    className?: string;
 };
 type LoggerConfig = {
     baseUrl?: string;

package/dist/logging/instrument.js

@@ -17,7 +17,6 @@ function sendLog(endpoint, payload) {
                 void axios.post(endpoint, payload);
         }
         else {
-            // fallback for non-browser or older environments
             void axios.post(endpoint, payload);
         }
     }
@@ -38,6 +37,7 @@ export function instrumentFunction(methodName, fn, opts = {}) {
             const payload = {
                 username: getLoggerUsername(),
                 reference: getTransactionReference(),
+                className: opts.className,
                 method: methodName,
                 arguments: mapArgs(args),
                 timestamp: new Date().toISOString(),

package/dist/logging/logMethod.js

@@ -31,13 +31,16 @@ import { instrumentFunction } from "./instrument";
 // Decorator factory
 export function logMethod(opts = {}) {
     return function (target, propertyKey, descriptor) {
-        var _a;
+        var _a, _b;
         const original = descriptor.value;
         if (typeof original !== "function") {
             console.error(`@logMethod can only decorate methods (${propertyKey})`);
             return descriptor;
         }
-        descriptor.value = instrumentFunction(propertyKey, original, Object.assign(Object.assign({}, opts), { mapArgs: (_a = opts.mapArgs) !== null && _a !== void 0 ? _a : ((args) => args.map((a) => {
+        const className = typeof target === "function"
+            ? target.name || "UnknownClass"
+            : ((_a = target === null || target === void 0 ? void 0 : target.constructor) === null || _a === void 0 ? void 0 : _a.name) || "UnknownClass";
+        descriptor.value = instrumentFunction(propertyKey, original, Object.assign(Object.assign({}, opts), { className, mapArgs: (_b = opts.mapArgs) !== null && _b !== void 0 ? _b : ((args) => args.map((a) => {
                 if (!a || typeof a !== "object")
                     return a;
                 return Object.assign(Object.assign({}, a), { js_sdk: true });

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;
-    reportThreeDSecureFetchedOnInit(data: any): 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

@@ -25,12 +25,15 @@ import { Hpp } from './hpp';
 import ClickToPay from './click_to_pay';
 import { validateApplePayLoadParams } from './validation/validators/apple-pay-load-params-button-validator';
 import { ApplePay } from './applepay';
-import { setLoggerUsername } from './logging/logger-context';
+import { setLoggerUsername, setTransactionReference } from './logging/logger-context';
 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,32 +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,
-        });
         if (isExisting) {
-            console.log('headless exists');
-            this.setThreeDSecureListeners();
+            this.bridgeReady = Promise.resolve();
         }
         else {
-            this.headless.addEventListener('load', () => {
-                console.log('headless loaded');
-                this.setThreeDSecureListeners();
+            this.bridgeReady = new Promise((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';
@@ -71,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,
@@ -90,51 +105,51 @@ export default class FatZebra {
         handlers[BridgeEvent.TOKENIZE_CARD_RESPONSE] = (data) => {
             callback(data);
         };
-        postMessageClient.setEventListeners(handlers);
+        postMessageClient.setEventListeners(handlers, { once: true });
     }
-    requestThreeDSEnabled(timeout, paymentIntent) {
-        console.log('requestThreeDSEnabled');
-        return new Promise((resolve) => {
-            const channel = 'sca';
-            const postMessageClient = new PostMessageClient({
-                channel,
-                target: this.headless,
-            });
-            let resolved = false;
-            postMessageClient.setEventListeners({
-                [BridgeEvent.THREE_D_SECURE_ENABLED]: (data) => {
-                    const enabled = typeof data === 'boolean' ? data : false;
+    requestThreeDSecureEnabled(timeout, paymentIntent) {
+        return __awaiter(this, void 0, void 0, function* () {
+            console.log('requestThreeDSEnabled');
+            return new Promise((resolve) => {
+                const channel = 'sca';
+                const postMessageClient = new PostMessageClient({
+                    channel,
+                    target: this.headless,
+                });
+                let resolved = false;
+                postMessageClient.setEventListeners({
+                    [BridgeEvent.THREE_D_SECURE_ENABLED]: (data) => {
+                        const enabled = typeof data === 'boolean' ? data : false;
+                        if (!resolved) {
+                            this.reportThreeDSecureFetched(data, paymentIntent);
+                            resolved = true;
+                            resolve(enabled);
+                        }
+                    },
+                }, { once: true });
+                const message = {
+                    channel,
+                    subject: 'fzi.is-enabled-three-d-secure-req',
+                    data: {
+                        merchant: this.fzConfig.username,
+                        access_token: window.localStorage.getItem(LocalStorageAccessTokenKey),
+                    },
+                };
+                postMessageClient.send(message);
+                window.setTimeout(() => {
                     if (!resolved) {
-                        this.reportThreeDSecureFetched(data, paymentIntent);
+                        this.reportRequestThreedsEnabledTimeout(paymentIntent);
                         resolved = true;
-                        resolve(enabled);
+                        resolve(false);
                     }
-                },
+                }, timeout);
             });
-            const message = {
-                channel,
-                subject: 'fzi.is-enabled-three-d-secure-req',
-                data: {
-                    merchant: this.fzConfig.username,
-                    access_token: window.localStorage.getItem(LocalStorageAccessTokenKey),
-                },
-            };
-            postMessageClient.send(message);
-            window.setTimeout(() => {
-                if (!resolved) {
-                    this.reportRequestThreedsEnabledTimeout(paymentIntent);
-                    resolved = true;
-                    resolve(false);
-                }
-            }, timeout);
         });
     }
     verifyCard(params) {
         return __awaiter(this, void 0, void 0, function* () {
             var _a, _b;
-            if (!this.threeDSecureListenersBound) {
-                this.setThreeDSecureListeners();
-            }
+            console.log('verifyCard');
             const valid = validateVerifyCardParams(params);
             if (!valid) {
                 emit(PublicEvent.VALIDATION_ERROR, {
@@ -143,14 +158,15 @@ export default class FatZebra {
                 });
                 return;
             }
-            const threeDSEnabled = yield this.requestThreeDSEnabled(3000, params.paymentIntent);
+            setTransactionReference(params.paymentIntent.payment.reference);
+            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,
@@ -163,6 +179,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,
@@ -177,7 +194,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,
@@ -192,6 +209,7 @@ export default class FatZebra {
                             card_token: cardToken,
                         })).data.bin;
                         this.sca.run({
+                            source: 'verifyCard',
                             cardToken,
                             customer: params.customer,
                             paymentIntent: params.paymentIntent,
@@ -204,21 +222,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) {
@@ -228,20 +232,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);
@@ -279,14 +288,24 @@ export default class FatZebra {
         });
         window.HPP.load(params);
     }
-    reportThreeDSecureFetchedOnInit(data) {
-        console.log("three_d_secure fetched on init", data);
+    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();
@@ -304,15 +323,14 @@ export default class FatZebra {
 __decorate([
     logMethod({
         mapArgs: (args) => {
-            const params = args[0];
             return [
                 {
-                    payment_intent: params === null || params === void 0 ? void 0 : params.paymentIntent
+                    payment_intent: args[1]
                 },
             ];
         },
     })
-], FatZebra.prototype, "requestThreeDSEnabled", null);
+], FatZebra.prototype, "requestThreeDSecureEnabled", null);
 __decorate([
     logMethod({
         mapArgs: (args) => {
@@ -323,6 +341,7 @@ __decorate([
                     merchant_username: window.MerchantUsername,
                     payment_intent: params === null || params === void 0 ? void 0 : params.paymentIntent,
                     payment_method: (_a = params === null || params === void 0 ? void 0 : params.paymentMethod) === null || _a === void 0 ? void 0 : _a.type,
+                    options: params === null || params === void 0 ? void 0 : params.options,
                 },
             ];
         },
@@ -335,31 +354,23 @@ __decorate([
             return [
                 {
                     payment_intent: params.paymentIntent,
-                    version: params.version
+                    version: params.version,
+                    options: params.options
                 },
             ];
         },
     })
 ], FatZebra.prototype, "renderPaymentsPage", null);
 __decorate([
-    logMethod({
-        mapArgs: (args) => {
-            const data = args[0];
-            return [
-                {
-                    data
-                },
-            ];
-        },
-    })
-], FatZebra.prototype, "reportThreeDSecureFetchedOnInit", null);
+    logMethod()
+], FatZebra.prototype, "renderClickToPay", null);
 __decorate([
     logMethod({
         mapArgs: (args) => {
-            const data = args[0];
             return [
                 {
-                    data
+                    data: args[0],
+                    payment_intent: args[1]
                 },
             ];
         },
@@ -368,13 +379,15 @@ __decorate([
 __decorate([
     logMethod({
         mapArgs: (args) => {
-            const data = args[0];
             return [
                 {
-                    data
+                    payment_intent: args[0]
                 },
             ];
         },
     })
 ], FatZebra.prototype, "reportRequestThreedsEnabledTimeout", null);
+__decorate([
+    logMethod()
+], FatZebra.prototype, "checkout", null);
 export { FatZebra, };

package/dist/react/useMessage.js

@@ -46,7 +46,7 @@ const useMessage = ({ paymentIntent, options, handlers, sca, config }) => {
                 cardToken: data.token,
                 merchantUsername: config.username,
                 test: config.environment !== Environment.production,
-                tokenizeOnly: config.options.tokenize_only,
+                tokenizeOnly: true,
                 iframe: iframe
             });
             return;

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

@@ -1,3 +1,9 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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) {
@@ -13,6 +19,7 @@ import { CardinalManager, } from './cardinal';
 import { emit, } from '../shared/event-manager';
 import env, { Environment } from "../shared/env";
 import { getEnrollmentResult, getValidationResult, threedsResponseData } from "./utility";
+import { logMethod } from '../logging/logMethod';
 class Sca {
     constructor({ gatewayClient, successCallback, failureCallback }) {
         this.gatewayClient = gatewayClient;
@@ -38,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();
@@ -221,4 +229,43 @@ class Sca {
         }
     }
 }
+__decorate([
+    logMethod({
+        mapArgs: (args) => {
+            return [
+                {
+                    message: args[0],
+                    data: args[1],
+                },
+            ];
+        },
+    })
+], Sca.prototype, "reportFailure", null);
+__decorate([
+    logMethod({
+        mapArgs: (args) => {
+            return [
+                {
+                    message: args[0],
+                    data: args[1],
+                },
+            ];
+        },
+    })
+], Sca.prototype, "reportSuccess", null);
+__decorate([
+    logMethod({
+        mapArgs: (args) => {
+            const params = args[0];
+            return [
+                {
+                    source: params.source,
+                    payment_intent: params.paymentIntent,
+                    card_token: params.cardToken,
+                    challenge_window_size: params.challengeWindowSize,
+                },
+            ];
+        },
+    })
+], Sca.prototype, "run", null);
 export default Sca;

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/dist/three_d_secure/index.d.ts

@@ -9,6 +9,15 @@ interface ThreeDSecureConfig {
     bridge: HTMLIFrameElement;
     iframe?: HTMLIFrameElement;
 }
+interface ThreeDSecureRunProps {
+    paymentIntent: PaymentIntent;
+    cardToken: string;
+    merchantUsername: string;
+    challengeWindowSize?: ChallengeWindowSize;
+    tokenizeOnly?: boolean;
+    iframe?: HTMLIFrameElement;
+    test: boolean;
+}
 declare class ThreeDSecure {
     private headlessBridge;
     private cybersourceReferenceId;
@@ -23,15 +32,7 @@ declare class ThreeDSecure {
     private tokenizeOnly;
     private iframe?;
     constructor({ successCallback, failureCallback, environment, bridge }: ThreeDSecureConfig);
-    run({ paymentIntent, cardToken, merchantUsername, challengeWindowSize, test, tokenizeOnly, iframe }: {
-        paymentIntent: PaymentIntent;
-        cardToken: string;
-        merchantUsername: string;
-        challengeWindowSize?: ChallengeWindowSize;
-        test: boolean;
-        tokenizeOnly?: boolean;
-        iframe?: HTMLIFrameElement;
-    }): void;
+    run({ paymentIntent, cardToken, merchantUsername, challengeWindowSize, test, tokenizeOnly, iframe }: ThreeDSecureRunProps): void;
     setupResponse(data: DeviceDataCollectionMessage): void;
     messageHandlers(): {
         [key: string]: (data: any) => void;

package/dist/three_d_secure/index.js

@@ -198,10 +198,43 @@ class ThreeDSecure {
     }
 }
 __decorate([
-    logMethod()
+    logMethod({
+        mapArgs: (args) => {
+            const params = args[0];
+            return [
+                {
+                    payment_intent: params.paymentIntent,
+                    card_token: params.cardToken,
+                    challenge_window_size: params.challengeWindowSize,
+                    tokenize_only: params.tokenizeOnly,
+                },
+            ];
+        },
+    })
+], ThreeDSecure.prototype, "run", null);
+__decorate([
+    logMethod({
+        mapArgs: (args) => {
+            return [
+                {
+                    message: args[0],
+                    data: args[1],
+                },
+            ];
+        },
+    })
 ], ThreeDSecure.prototype, "reportSuccess", null);
 __decorate([
-    logMethod()
+    logMethod({
+        mapArgs: (args) => {
+            return [
+                {
+                    message: args[0],
+                    data: args[1],
+                },
+            ];
+        },
+    })
 ], ThreeDSecure.prototype, "reportFailure", null);
 __decorate([
     logMethod()

package/dist/three_d_secure/utility/index.js

@@ -1,5 +1,6 @@
 import { toFzSli } from "../../sca/eci-mappings";
 const threeDResponseData = (response) => {
+    var _a;
     return {
         // CAVV: Visa & Amex only
         // AAV: Mastercard only, known as UCAF
@@ -8,7 +9,7 @@ const threeDResponseData = (response) => {
         sli: toFzSli(response.eci),
         eci: response.eci,
         xid: response.xid,
-        ver: response === null || response === void 0 ? void 0 : response.veres,
+        ver: (_a = response === null || response === void 0 ? void 0 : response.veres) !== null && _a !== void 0 ? _a : null,
         directoryServerTxnId: response.directory_server_txn_id,
         threedsVersion: response.threeds_version,
     };

package/package.json

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