@fat-zebra/sdk 2.0.1-beta.0 → 2.0.1-beta.10

package/dist/hpp/hpp.d.ts

@@ -1,6 +1,7 @@
 import Sca from '../sca';
 import { ChallengeWindowSize } from '../sca/types';
 import { Customer, PaymentIntent } from '../shared/types';
+import ThreeDSecure from "../three_d_secure";
 declare const HPP_DEFAULT_OPTIONS: {
     [key: string]: boolean | string;
 };
@@ -11,6 +12,8 @@ interface HppModuleConfig {
     customer: Customer;
     username: string;
     sca: Sca;
+    threeDSecure: ThreeDSecure;
+    requestThreeDSEnabled: () => Promise<boolean>;
     test?: boolean;
 }
 interface HppLoadParams {
@@ -42,7 +45,7 @@ declare class Hpp {
     private customer;
     private username;
     private sca;
-    private ThreeDSecure;
+    private threeDSecure;
     private cardToken;
     private postMessageClient;
     private test;
@@ -50,11 +53,14 @@ declare class Hpp {
     private headlessLoaded;
     private headlessPreviouslyLoaded;
     private iframeLoaded;
-    private threeDSecureEnabled;
+    private isThreeDSecureEnabled;
+    private requestThreeDSEnabled;
     private challengeWindowSize;
     private scaHandler;
+    private crossFrameListenersBound;
+    private publicEventListenersBound;
     constructor(config: HppModuleConfig);
-    setListenersAndEmitReady(): void;
+    setListenersAndEmitReady(): Promise<void>;
     load(config: HppLoadParams): void;
     purchase(): void;
     getPayNowUrl(options?: {
@@ -62,6 +68,7 @@ declare class Hpp {
     }): string;
     setCrossFramesEventListeners(): void;
     setPublicEventListeners(): void;
+    destroy(): void;
     createPurchase(extra?: {
         [key: string]: boolean | string;
     }): void;

package/dist/hpp/hpp.js

@@ -4,15 +4,25 @@ 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());
+    });
+};
 import * as bridge from '../shared/bridge-client';
 import { LocalStorageAccessTokenKey } from '../shared/constants';
 import { emit, off, on } from '../shared/event-manager';
 import { PostMessageClient } from '../shared/post-message-client';
 import { BridgeEvent, PublicEvent, } from '../shared/types';
 import * as util from '../shared/util';
-import { logMethod } from "../logging/logMethod";
 import { setTransactionReference } from "../logging/logger-context";
-import ThreeDSecure from "../three_d_secure";
+import { logMethod } from "../logging/logMethod";
+import env from "../shared/env";
+import { configureLogger } from "../logging/instrument";
 const HPP_DEFAULT_OPTIONS = {
     enableSca: false,
     hideButton: false,
@@ -20,7 +30,7 @@ const HPP_DEFAULT_OPTIONS = {
 };
 class Hpp {
     constructor(config) {
-        this.threeDSecureEnabled = false;
+        this.isThreeDSecureEnabled = false;
         this.paymentIntent = config.paymentIntent;
         this.customer = config.customer;
         this.username = config.username;
@@ -30,58 +40,66 @@ class Hpp {
         this.headlessLoaded = false;
         this.headlessPreviouslyLoaded = false;
         this.iframeLoaded = false;
-        this.postMessageClient = new PostMessageClient({
-            channel: 'sca',
-            target: this.iframe
+        this.threeDSecure = config.threeDSecure;
+        this.requestThreeDSEnabled = config.requestThreeDSEnabled;
+        this.crossFrameListenersBound = false;
+        this.publicEventListenersBound = false;
+        configureLogger({
+            baseUrl: env[process.env.API_ENV].payNowUrl
         });
     }
     setListenersAndEmitReady() {
-        const message = {
-            channel: 'sca',
-            subject: BridgeEvent.READY,
-            data: {}
-        };
-        if (this.headlessLoaded && this.iframeLoaded) {
-            // initial headless load
-            this.ThreeDSecure = new ThreeDSecure({
-                bridge: this.headless,
-                environment: process.env.API_ENV,
-                iframe: this.iframe
-            });
-            this.setCrossFramesEventListeners();
-            this.setPublicEventListeners();
-            emit(PublicEvent.HPP_READY);
-            this.iframe.contentWindow.postMessage(message, '*');
-        }
-        else if (this.headlessPreviouslyLoaded && this.iframeLoaded) {
-            this.ThreeDSecure = new ThreeDSecure({
-                bridge: this.headless,
-                environment: process.env.API_ENV,
-                iframe: this.iframe
-            });
-            this.iframe.contentWindow.postMessage(message, '*');
-            // subsequent iframe loads after headless has been previously loaded
-            // this caters for the SPA scenario
-            emit(PublicEvent.HPP_READY);
-        }
+        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);
+            }
+            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);
+            }
+        });
     }
     load(config) {
-        this.challengeWindowSize = config.options.challengeWindowSize;
+        var _a;
+        this.challengeWindowSize = (_a = config.options) === null || _a === void 0 ? void 0 : _a.challengeWindowSize;
         setTransactionReference(config.paymentIntent.payment.reference);
-        this.hppOptions = config.options;
+        this.hppOptions = config.options || {};
         const { el, isExisting } = bridge.load2(process.env.PAYNOW_BRIDGE_URL);
         this.headless = el;
         this.headlessPreviouslyLoaded = isExisting;
         this.iframe = document.createElement('iframe');
         document.getElementById(config.containerId).appendChild(this.iframe);
-        this.headless.onload = () => {
+        this.postMessageClient = new PostMessageClient({
+            channel: 'sca',
+            target: this.iframe
+        });
+        this.headless.addEventListener('load', () => {
             this.headlessLoaded = true;
             this.setListenersAndEmitReady();
-        };
+        });
         this.iframe.onload = () => {
             this.iframeLoaded = true;
             this.setListenersAndEmitReady();
         };
+        if (this.headlessPreviouslyLoaded) {
+            this.headlessLoaded = true;
+            this.setListenersAndEmitReady();
+        }
         const payNowUrl = this.getPayNowUrl(config.options);
         this.iframe.setAttribute("src", payNowUrl);
         this.iframe.setAttribute('allow', 'payment');
@@ -141,13 +159,14 @@ class Hpp {
             if (this.hppOptions.tokenizeOnly)
                 return;
             if (this.hppOptions.enableSca) {
-                if (this.threeDSecureEnabled) {
-                    this.ThreeDSecure.run({
+                if (this.isThreeDSecureEnabled) {
+                    this.threeDSecure.run({
                         paymentIntent: this.paymentIntent,
                         merchantUsername: this.username,
                         cardToken: this.cardToken,
                         test: this.test,
                         challengeWindowSize: this.challengeWindowSize,
+                        iframe: this.iframe,
                         tokenizeOnly: false
                     });
                     return; // do not continue execution to old 3DS
@@ -211,16 +230,7 @@ class Hpp {
                 data: data,
             });
         };
-        handlers[BridgeEvent.THREE_D_SECURE_ENABLED] = (data) => {
-            this.threeDSecureEnabled = typeof data === "boolean" ? data : false;
-            if (this.threeDSecureEnabled) {
-                // setPublicEventListeners is set before this feature flag is returned.
-                // we need to therefore unset the scaHandler (for the old implementation or we will get two purchase requests
-                off(PublicEvent.SCA_SUCCESS, this.scaHandler);
-            }
-        };
-        const handlersIncludingThreeDSecure = Object.assign(Object.assign({}, handlers), this.ThreeDSecure.messageHandlers());
-        this.postMessageClient.setEventListeners(handlersIncludingThreeDSecure);
+        this.postMessageClient.setEventListeners(handlers);
     }
     setPublicEventListeners() {
         this.scaHandler = (event) => {
@@ -232,6 +242,12 @@ class Hpp {
         };
         on(PublicEvent.SCA_SUCCESS, this.scaHandler);
     }
+    destroy() {
+        if (this.publicEventListenersBound && this.scaHandler) {
+            off(PublicEvent.SCA_SUCCESS, this.scaHandler);
+            this.publicEventListenersBound = false;
+        }
+    }
     createPurchase(extra = null) {
         const message = {
             channel: 'sca',

package/dist/logging/instrument.d.ts

@@ -1,7 +1,11 @@
-type LogOptions = {
-    endpoint?: string;
-    mapArgs?: (args: unknown[]) => unknown;
+export type LogOptions<A extends unknown[]> = {
+    endpoint?: string | ((...args: A) => string);
+    mapArgs?: (args: A) => unknown;
     enabled?: () => boolean;
 };
-export declare function instrumentFunction<A extends any[], R>(methodName: string, fn: (...args: A) => R, opts?: LogOptions): (...args: A) => R;
+type LoggerConfig = {
+    baseUrl?: string;
+};
+export declare function configureLogger(config: LoggerConfig): void;
+export declare function instrumentFunction<A extends unknown[], R>(methodName: string, fn: (...args: A) => R, opts?: LogOptions<A>): (...args: A) => R;
 export {};

package/dist/logging/instrument.js

@@ -1,7 +1,13 @@
 import axios from "axios";
 import { getLoggerUsername, getTransactionReference } from "./logger-context";
+let loggerConfig = {};
+export function configureLogger(config) {
+    loggerConfig = config;
+}
 function defaultEndpoint() {
-    return `${process.env.PAYNOW_BASE_URL}/log_sdk`;
+    return loggerConfig.baseUrl
+        ? `${loggerConfig.baseUrl}/log_sdk`
+        : `${process.env.PAYNOW_BASE_URL}/log_sdk`;
 }
 function sendLog(endpoint, payload) {
     try {
@@ -20,12 +26,15 @@ function sendLog(endpoint, payload) {
     }
 }
 export function instrumentFunction(methodName, fn, opts = {}) {
-    var _a, _b, _c;
-    const endpoint = (_a = opts.endpoint) !== null && _a !== void 0 ? _a : defaultEndpoint();
-    const enabled = (_b = opts.enabled) !== null && _b !== void 0 ? _b : (() => true);
-    const mapArgs = (_c = opts.mapArgs) !== null && _c !== void 0 ? _c : ((a) => a);
+    var _a, _b;
+    const enabled = (_a = opts.enabled) !== null && _a !== void 0 ? _a : (() => true);
+    const mapArgs = (_b = opts.mapArgs) !== null && _b !== void 0 ? _b : ((a) => a);
     return function instrumented(...args) {
+        var _a;
         if (enabled()) {
+            const endpoint = typeof opts.endpoint === "function"
+                ? opts.endpoint(...args)
+                : (_a = opts.endpoint) !== null && _a !== void 0 ? _a : defaultEndpoint();
             const payload = {
                 username: getLoggerUsername(),
                 reference: getTransactionReference(),

package/dist/logging/logMethod.d.ts

@@ -1,7 +1,7 @@
-type LogOptions = {
-    endpoint?: string;
-    mapArgs?: (args: unknown[]) => unknown;
+type LogOptions<A extends unknown[]> = {
+    endpoint?: string | ((args: A) => string);
+    mapArgs?: (args: A) => unknown;
     enabled?: () => boolean;
 };
-export declare function logMethod(opts?: LogOptions): (target: any, propertyKey: string, descriptor: PropertyDescriptor) => PropertyDescriptor;
+export declare function logMethod(opts?: LogOptions<unknown[]>): (target: any, propertyKey: string, descriptor: PropertyDescriptor) => PropertyDescriptor;
 export {};

package/dist/logging/logMethod.js

@@ -35,6 +35,7 @@ export function logMethod(opts = {}) {
         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) => {
                 if (!a || typeof a !== "object")

package/dist/main.d.ts

@@ -28,13 +28,21 @@ export default class FatZebra {
     private fzConfig;
     private gatewayClient;
     private headless;
+    private threeDSecure;
+    private threeDSecureListenersBound;
+    private bridgeReady;
     constructor(config: FZConfig);
     tokenizeCard(card: Card): void;
     cardDidTokenize(callback: (data: any) => void): void;
+    private requestThreeDSEnabled;
     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;
     checkout(): void;
     on(event: PublicEvent, callback: (e: any) => void): void;
     off(event: PublicEvent, callback: (e: any) => void): void;

package/dist/main.js

@@ -23,13 +23,14 @@ import { toHumanizedErrors, validateClickToPayLoadParams, validateHppLoadParams,
 import GatewayClient from './shared/api-gateway-client';
 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 { logMethod } from "./logging/logMethod";
-import ThreeDSecure from "./three_d_secure";
+import { validateApplePayLoadParams } from './validation/validators/apple-pay-load-params-button-validator';
+import { ApplePay } from './applepay';
+import { setLoggerUsername } from './logging/logger-context';
+import { logMethod } from './logging/logMethod';
+import ThreeDSecure from './three_d_secure';
 export default class FatZebra {
     constructor(config) {
+        this.threeDSecureListenersBound = false;
         setLoggerUsername(config.username);
         this.fzConfig = config;
         window.MerchantUsername = config.username;
@@ -41,7 +42,36 @@ export default class FatZebra {
             gatewayClient: this.gatewayClient,
         });
         this.sca.loadScript();
-        this.headless = bridge.load(process.env.PAYNOW_BRIDGE_URL);
+        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();
+                });
+            });
+        }
+        const message = {
+            channel: 'sca',
+            subject: BridgeEvent.READY,
+            data: {},
+        };
+        window.top.postMessage(message, '*');
     }
     tokenizeCard(card) {
         const channel = 'sca';
@@ -54,7 +84,7 @@ export default class FatZebra {
                 card_number: card.number,
                 card_expiry: `${card.expiryMonth}/${card.expiryYear}`,
                 cvv: card.cvv,
-            }
+            },
         };
         this.headless.contentWindow.postMessage(message, '*');
     }
@@ -62,7 +92,7 @@ export default class FatZebra {
         const channel = 'sca';
         const postMessageClient = new PostMessageClient({
             channel,
-            target: this.headless
+            target: this.headless,
         });
         const handlers = {};
         handlers[BridgeEvent.TOKENIZE_CARD_RESPONSE] = (data) => {
@@ -70,66 +100,154 @@ export default class FatZebra {
         };
         postMessageClient.setEventListeners(handlers);
     }
+    requestThreeDSEnabled(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({
+                    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);
+                        }
+                    },
+                });
+                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;
+            var _a, _b;
+            console.log('verifyCard');
             const valid = validateVerifyCardParams(params);
             if (!valid) {
                 emit(PublicEvent.VALIDATION_ERROR, {
                     errors: toHumanizedErrors(validateVerifyCardParams.errors),
-                    data: null
+                    data: null,
                 });
                 return;
             }
-            const threeDSecure = new ThreeDSecure({
-                bridge: this.headless,
-                environment: process.env.API_ENV
-            });
+            const threeDSEnabled = yield this.requestThreeDSEnabled(1000, params.paymentIntent);
             switch (params.paymentMethod.type) {
-                case PaymentMethodType.CARD:
+                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;
-                        threeDSecure.run({
+                        var _a, _b;
+                        if (threeDSEnabled) {
+                            this.threeDSecure.run({
+                                paymentIntent: params.paymentIntent,
+                                cardToken: data.token,
+                                merchantUsername: this.fzConfig.username,
+                                challengeWindowSize: (_a = params.options) === null || _a === void 0 ? void 0 : _a.challengeWindowSize,
+                                test: this.fzConfig.test,
+                                tokenizeOnly: true,
+                            });
+                        }
+                        else {
+                            const bin = card.number.substr(0, 6);
+                            this.sca.run({
+                                cardToken: data.token,
+                                customer: params.customer,
+                                paymentIntent: params.paymentIntent,
+                                bin,
+                                challengeWindowSize: (_b = params.options) === null || _b === void 0 ? void 0 : _b.challengeWindowSize,
+                            });
+                        }
+                    }));
+                    this.tokenizeCard(card);
+                    break;
+                }
+                case PaymentMethodType.CARD_ON_FILE: {
+                    console.log('Verify card (card on file)');
+                    const cardToken = params.paymentMethod.data.token;
+                    if (threeDSEnabled) {
+                        this.threeDSecure.run({
                             paymentIntent: params.paymentIntent,
-                            cardToken: data.token,
+                            cardToken,
                             merchantUsername: this.fzConfig.username,
                             challengeWindowSize: (_a = params.options) === null || _a === void 0 ? void 0 : _a.challengeWindowSize,
                             test: this.fzConfig.test,
-                            tokenizeOnly: true
+                            tokenizeOnly: true,
                         });
-                    }));
-                    this.tokenizeCard(card);
-                    break;
-                case PaymentMethodType.CARD_ON_FILE:
-                    const cardToken = params.paymentMethod.data.token;
-                    threeDSecure.run({
-                        paymentIntent: params.paymentIntent,
-                        cardToken: cardToken,
-                        merchantUsername: this.fzConfig.username,
-                        challengeWindowSize: (_a = params.options) === null || _a === void 0 ? void 0 : _a.challengeWindowSize,
-                        test: this.fzConfig.test,
-                        tokenizeOnly: true
-                    });
+                    }
+                    else {
+                        const bin = (yield this.gatewayClient.getCard({
+                            card_token: cardToken,
+                        })).data.bin;
+                        this.sca.run({
+                            cardToken,
+                            customer: params.customer,
+                            paymentIntent: params.paymentIntent,
+                            bin,
+                            challengeWindowSize: (_b = params.options) === null || _b === void 0 ? void 0 : _b.challengeWindowSize,
+                        });
+                    }
                     break;
+                }
             }
-            const channel = 'sca';
-            const postMessageClient = new PostMessageClient({
-                channel,
-                target: this.headless
-            });
-            postMessageClient.setEventListeners(threeDSecure.messageHandlers());
         });
     }
+    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) {
             emit(PublicEvent.VALIDATION_ERROR, {
                 errors: toHumanizedErrors(validateHppLoadParams.errors),
-                data: null
+                data: null,
             });
             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,
@@ -137,6 +255,8 @@ export default class FatZebra {
             username: this.fzConfig.username,
             sca: this.sca,
             test: this.fzConfig.test,
+            threeDSecure: this.threeDSecure,
+            requestThreeDSEnabled: () => this.requestThreeDSEnabled(1000, params.paymentIntent),
         });
         window.HPP.load(params);
     }
@@ -145,19 +265,19 @@ export default class FatZebra {
         if (!valid) {
             emit(PublicEvent.VALIDATION_ERROR, {
                 errors: toHumanizedErrors(validateApplePayLoadParams.errors),
-                data: null
+                data: null,
             });
             return;
         }
         window.ApplePayButton = new ApplePay({
             environment: params.environment,
             paymentIntent: params.paymentIntent,
-            username: this.fzConfig.username
+            username: this.fzConfig.username,
         });
         window.ApplePayButton.load({
             containerId: params.containerId,
             paymentIntent: params.paymentIntent,
-            options: params.options
+            options: params.options,
         });
     }
     renderClickToPay(params) {
@@ -165,7 +285,7 @@ export default class FatZebra {
         if (!valid) {
             emit(PublicEvent.VALIDATION_ERROR, {
                 errors: toHumanizedErrors(validateClickToPayLoadParams.errors),
-                data: null
+                data: null,
             });
             return;
         }
@@ -176,6 +296,15 @@ export default class FatZebra {
         });
         window.HPP.load(params);
     }
+    reportThreeDSecureFetchedOnInit(data) {
+        console.log("three_d_secure fetched on init", data);
+    }
+    reportThreeDSecureFetched(data, paymentIntent) {
+        console.log("three_d_secure fetched", data);
+    }
+    reportRequestThreedsEnabledTimeout(paymentIntent) {
+        console.log("3DS enabled check timed out");
+    }
     checkout() {
         window.HPP.purchase();
     }
@@ -189,6 +318,18 @@ export default class FatZebra {
         onOnce(event, callback);
     }
 }
+__decorate([
+    logMethod({
+        mapArgs: (args) => {
+            const params = args[0];
+            return [
+                {
+                    payment_intent: params === null || params === void 0 ? void 0 : params.paymentIntent
+                },
+            ];
+        },
+    })
+], FatZebra.prototype, "requestThreeDSEnabled", null);
 __decorate([
     logMethod({
         mapArgs: (args) => {
@@ -204,4 +345,53 @@ __decorate([
         },
     })
 ], FatZebra.prototype, "verifyCard", null);
+__decorate([
+    logMethod({
+        mapArgs: (args) => {
+            const params = args[0];
+            return [
+                {
+                    payment_intent: params.paymentIntent,
+                    version: params.version
+                },
+            ];
+        },
+    })
+], FatZebra.prototype, "renderPaymentsPage", null);
+__decorate([
+    logMethod({
+        mapArgs: (args) => {
+            const data = args[0];
+            return [
+                {
+                    data
+                },
+            ];
+        },
+    })
+], FatZebra.prototype, "reportThreeDSecureFetchedOnInit", null);
+__decorate([
+    logMethod({
+        mapArgs: (args) => {
+            const data = args[0];
+            return [
+                {
+                    data
+                },
+            ];
+        },
+    })
+], FatZebra.prototype, "reportThreeDSecureFetched", null);
+__decorate([
+    logMethod({
+        mapArgs: (args) => {
+            const data = args[0];
+            return [
+                {
+                    data
+                },
+            ];
+        },
+    })
+], FatZebra.prototype, "reportRequestThreedsEnabledTimeout", null);
 export { FatZebra, };

package/dist/react/useFatZebra.js

@@ -5,8 +5,12 @@ import Sca from "../sca";
 import GatewayClient from "../shared/api-gateway-client";
 import { generateVerifyURL } from "./verifyUrl";
 import useMessage from "./useMessage";
-import { instrumentFunction } from "../logging/instrument";
-const logUseFatZebra = instrumentFunction("useFatZebra", (meta) => meta, { mapArgs: ([meta]) => [meta] });
+import { configureLogger, instrumentFunction } from "../logging/instrument";
+import env from "../shared/env";
+const logUseFatZebra = instrumentFunction("useFatZebra", (meta) => meta, {
+    mapArgs: ([meta]) => meta,
+    endpoint: (meta) => `${env[meta.environment].payNowUrl}/log_sdk`,
+});
 const useFatZebra = ({ config, handlers, cardToken }) => {
     const { options, accessToken, paymentIntent, username } = config;
     const sca = useMemo(() => {
@@ -25,6 +29,9 @@ const useFatZebra = ({ config, handlers, cardToken }) => {
         config
     });
     useEffect(() => {
+        configureLogger({
+            baseUrl: env[config.environment].payNowUrl
+        });
         logUseFatZebra({
             environment: config.environment,
             reference: config.paymentIntent.payment.reference,

package/dist/react/useMessage.js

@@ -40,12 +40,14 @@ const useMessage = ({ paymentIntent, options, handlers, sca, config }) => {
             });
         }
         if (options && options.sca_enabled && threeDSecureEnabled) {
+            const iframe = document.querySelector('[name="renderIframe"]');
             threeDSecureRef.current.run({
                 paymentIntent,
                 cardToken: data.token,
                 merchantUsername: config.username,
                 test: config.environment !== Environment.production,
-                tokenizeOnly: config.options.tokenize_only
+                tokenizeOnly: config.options.tokenize_only,
+                iframe: iframe
             });
             return;
         }
@@ -67,13 +69,11 @@ const useMessage = ({ paymentIntent, options, handlers, sca, config }) => {
                 const headless = el;
                 let onMessage;
                 headless.onload = () => {
-                    const iframe = document.querySelector('[name="renderIframe"]');
                     const threeDS = new ThreeDSecure({
                         successCallback,
                         failureCallback,
                         bridge: headless,
                         environment: config.environment,
-                        iframe: iframe
                     });
                     threeDSecureRef.current = threeDS;
                     const messages = threeDS.messageHandlers(); // { [subject]: (payload) => void }

package/dist/sca/index.js

@@ -58,6 +58,7 @@ class Sca {
     }
     run(config) {
         return __awaiter(this, void 0, void 0, function* () {
+            console.log('Running 3DS (SCA)');
             try {
                 if (!this._cardinal) {
                     this._cardinal = new CardinalManager();

package/dist/shared/envs/local.d.ts

@@ -1,7 +1,7 @@
-declare const bridgeUrl = "https://paynow.test/sdk/bridge";
+declare const bridgeUrl = "http://localhost:3006/sdk/bridge";
 declare const apiUrl = "https://api.test/sdk";
 declare const payNowUrl = "https://paynow.test";
 declare const songbirdUrl = "https://songbirdstag.cardinalcommerce.com/edge/v1/songbird.js";
 declare const cybersourceUrl = "https://centinelapistag.cardinalcommerce.com";
-declare const returnCybersourceUrl = "https://paynow.test/return";
+declare const returnCybersourceUrl = "https://48e5-115-130-65-211.ngrok-free.app/return";
 export { bridgeUrl, apiUrl, payNowUrl, songbirdUrl, cybersourceUrl, returnCybersourceUrl };

package/dist/shared/envs/local.js

@@ -1,7 +1,7 @@
-const bridgeUrl = "https://paynow.test/sdk/bridge";
+const bridgeUrl = "http://localhost:3006/sdk/bridge";
 const apiUrl = "https://api.test/sdk";
 const payNowUrl = "https://paynow.test";
 const songbirdUrl = "https://songbirdstag.cardinalcommerce.com/edge/v1/songbird.js";
 const cybersourceUrl = "https://centinelapistag.cardinalcommerce.com";
-const returnCybersourceUrl = "https://paynow.test/return";
+const returnCybersourceUrl = "https://48e5-115-130-65-211.ngrok-free.app/return";
 export { bridgeUrl, apiUrl, payNowUrl, songbirdUrl, cybersourceUrl, returnCybersourceUrl };

package/dist/three_d_secure/index.d.ts

@@ -22,14 +22,15 @@ declare class ThreeDSecure {
     private failureCallback;
     private tokenizeOnly;
     private iframe?;
-    constructor({ successCallback, failureCallback, environment, bridge, iframe }: ThreeDSecureConfig);
-    run({ paymentIntent, cardToken, merchantUsername, challengeWindowSize, test, tokenizeOnly }: {
+    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;
     setupResponse(data: DeviceDataCollectionMessage): void;
     messageHandlers(): {
@@ -43,6 +44,7 @@ declare class ThreeDSecure {
     private validateAuthentication;
     private validationAuthenticationResponse;
     private createPurchase;
+    private listenDeviceCollectionReady;
     private setLoading;
 }
 export default ThreeDSecure;

package/dist/three_d_secure/index.js

@@ -18,16 +18,18 @@ import { getThreeDSecureValidationResult } from "./utility/getValidationResult";
 import { ChallengeWindowSize } from "../sca/types";
 import * as util from "../shared/util";
 class ThreeDSecure {
-    constructor({ successCallback, failureCallback, environment, bridge, iframe }) {
+    constructor({ successCallback, failureCallback, environment, bridge }) {
         this.tokenizeOnly = false;
         this.headlessBridge = bridge;
         this.environment = environment;
         this.successCallback = successCallback;
         this.failureCallback = failureCallback;
-        this.iframe = iframe;
         DeviceDataCollection.listenDataCollectionResponse(environment);
+        this.listenDeviceCollectionReady();
     }
-    run({ paymentIntent, cardToken, merchantUsername, challengeWindowSize, test, tokenizeOnly }) {
+    run({ paymentIntent, cardToken, merchantUsername, challengeWindowSize, test, tokenizeOnly, iframe }) {
+        console.log('Running 3DS (ThreeDSecure)');
+        this.iframe = iframe;
         this.tokenizeOnly = tokenizeOnly;
         this.setLoading();
         this.paymentIntent = paymentIntent;
@@ -47,12 +49,6 @@ class ThreeDSecure {
         handlers[BridgeEvent.SETUP_THREE_D_SECURE_SUCCESS_RESPONSE] = (data) => {
             this.setupResponse(data);
         };
-        on(PublicEvent.DEVICE_PROFILE_READY_THREE_D_SECURE_EVENT, () => this.checkEnrollment({
-            paymentIntent: this.paymentIntent,
-            cardToken: this.cardToken,
-            merchantUsername: this.merchantUsername,
-            cybersourceReferenceId: this.cybersourceReferenceId,
-        }));
         handlers[BridgeEvent.ENROL_THREE_D_SECURE_RESPONSE] = (data) => {
             this.enrolmentResponse(data);
         };
@@ -63,7 +59,7 @@ class ThreeDSecure {
             this.validationAuthenticationResponse(data);
         };
         handlers[BridgeEvent.THREE_D_SECURE_FAILURE_RESPONSE] = (data) => {
-            emit(PublicEvent.SCA_ERROR, { errors: [data.errors], data: data });
+            emit(PublicEvent.SCA_ERROR, { errors: [data.errors], data });
         };
         return handlers;
     }
@@ -125,9 +121,9 @@ class ThreeDSecure {
         }
         if (scenario.outcome.success) {
             this.reportSuccess(`FatZebra.3DS: 3DS success - ${scenario.description}.`, threeDSecureData);
-            const extra = util.toObjectWithSnakeCaseKeys(threeDSecureData);
             if (this.tokenizeOnly)
                 return; // DO NO process purchase if tokenizing only.
+            const extra = util.toObjectWithSnakeCaseKeys(threeDSecureData);
             this.createPurchase(extra);
             return;
         }
@@ -182,6 +178,14 @@ class ThreeDSecure {
         message.data.extra = Object.assign(Object.assign({}, extra), { sli: toFzSli(extra.eci) });
         this.headlessBridge.contentWindow.postMessage(message, '*');
     }
+    listenDeviceCollectionReady() {
+        on(PublicEvent.DEVICE_PROFILE_READY_THREE_D_SECURE_EVENT, () => this.checkEnrollment({
+            paymentIntent: this.paymentIntent,
+            cardToken: this.cardToken,
+            merchantUsername: this.merchantUsername,
+            cybersourceReferenceId: this.cybersourceReferenceId,
+        }));
+    }
     setLoading(loading = true) {
         var _a;
         if ((_a = this === null || this === void 0 ? void 0 : this.iframe) === null || _a === void 0 ? void 0 : _a.contentWindow) {

package/dist/three_d_secure/utility/device-data-collection.d.ts

@@ -12,8 +12,8 @@ export default class DeviceDataCollection {
     private static readonly INPUT_ID;
     createIframe(): void;
     static listenDataCollectionResponse(environment: Environment): void;
-    private static hasEmittedProfileReady;
     private static handleDataCollectionResponse;
+    private static handleCollectionResponse;
     static collectDeviceData(): DeviceDataType;
     static setIframeUrl(url: string, jwt: string): void;
     static getForm(): HTMLFormElement | null;

package/dist/three_d_secure/utility/device-data-collection.js

@@ -1,6 +1,13 @@
+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;
+};
 import { PublicEvent } from "../../shared/types";
 import { emit } from "../../shared/event-manager";
 import env from "../../shared/env";
+import { logMethod } from "../../logging/logMethod";
 class DeviceDataCollection {
     // Create elements if they don't already exist
     createIframe() {
@@ -43,17 +50,17 @@ class DeviceDataCollection {
         // https://developer.cybersource.com/docs/cybs/en-us/payer-authentication/developer/all/so/payer-auth/pa2-ccdc-ddc-intro.html#reference_qmk_jrl_xpb
         if (event.origin !== env[environment].cybersourceUrl)
             return;
-        if (this.hasEmittedProfileReady)
-            return;
+        this.handleCollectionResponse(event);
+    }
+    static handleCollectionResponse(event) {
         const response = JSON.parse(event.data);
         if (response["MessageType"] == "profile.completed") {
             emit(PublicEvent.DEVICE_PROFILE_READY_THREE_D_SECURE_EVENT, { message: null, data: null });
         }
-        // Still proceed, even if status is false (as per recommendations from cybersource support team.
-        if (response["Status"] === false) {
+        else if (response["Status"] == false) {
+            // Still proceed, even if status is false (as per recommendations from cybersource support team.
             emit(PublicEvent.DEVICE_PROFILE_READY_THREE_D_SECURE_EVENT, { message: null, data: null });
         }
-        this.hasEmittedProfileReady = true;
     }
     static collectDeviceData() {
         var _a, _b, _c, _d;
@@ -115,5 +122,12 @@ DeviceDataCollection.IFRAME_ID = "cardinal_collection_iframe";
 DeviceDataCollection.IFRAME_NAME = "collectionIframe";
 DeviceDataCollection.FORM_ID = "cardinal_collection_form";
 DeviceDataCollection.INPUT_ID = "cardinal_collection_form_input";
-DeviceDataCollection.hasEmittedProfileReady = false;
 export default DeviceDataCollection;
+__decorate([
+    logMethod({
+        mapArgs: (args) => {
+            const params = args[0]; // grab the first argument.
+            return JSON.parse(params.data);
+        },
+    })
+], DeviceDataCollection, "handleCollectionResponse", null);

package/dist/three_d_secure/utility/three_d_secure_challenge_window.js

@@ -66,11 +66,6 @@ class ThreeDSecureChallengeWindow {
         });
         content.appendChild(frameWrap);
         overlay.appendChild(content);
-        // Backdrop click to close (optional)
-        overlay.addEventListener("click", (e) => {
-            if (e.target === overlay)
-                ThreeDSecureChallengeWindow.hide();
-        });
         document.body.appendChild(overlay);
         return { overlay, content, frameWrap };
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fat-zebra/sdk",
-  "version": "2.0.1-beta.0",
+  "version": "2.0.1-beta.10",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -63,7 +63,7 @@
     "ajv": "^8.17.1",
     "ajv-formats": "^3.0.1",
     "ajv-keywords": "^5.1.0",
-    "axios": "1.15.0",
+    "axios": "1.16.0",
     "custom-event-polyfill": "^1.0.7",
     "glob": "^13.0.6",
     "ts-polyfill": "^3.8.2",