@fat-zebra/sdk 2.0.1-beta.2 → 2.0.1-beta.3

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;
+    isThreeDSecureEnabled: () => 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,9 +53,11 @@ declare class Hpp {
     private headlessLoaded;
     private headlessPreviouslyLoaded;
     private iframeLoaded;
-    private threeDSecureEnabled;
+    private isThreeDSecureEnabled;
     private challengeWindowSize;
     private scaHandler;
+    private crossFrameListenersBound;
+    private publicEventListenersBound;
     constructor(config: HppModuleConfig);
     setListenersAndEmitReady(): void;
     load(config: HppLoadParams): void;
@@ -62,6 +67,7 @@ declare class Hpp {
     }): string;
     setCrossFramesEventListeners(): void;
     setPublicEventListeners(): void;
+    destroy(): void;
     createPurchase(extra?: {
         [key: string]: boolean | string;
     }): void;

package/dist/hpp/hpp.js

@@ -12,7 +12,6 @@ import { BridgeEvent, PublicEvent, } from '../shared/types';
 import * as util from '../shared/util';
 import { setTransactionReference } from "../logging/logger-context";
 import { logMethod } from "../logging/logMethod";
-import ThreeDSecure from "../three_d_secure";
 import env from "../shared/env";
 import { configureLogger } from "../logging/instrument";
 const HPP_DEFAULT_OPTIONS = {
@@ -22,7 +21,6 @@ const HPP_DEFAULT_OPTIONS = {
 };
 class Hpp {
     constructor(config) {
-        this.threeDSecureEnabled = false;
         this.paymentIntent = config.paymentIntent;
         this.customer = config.customer;
         this.username = config.username;
@@ -32,53 +30,50 @@ 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.isThreeDSecureEnabled = config.isThreeDSecureEnabled;
+        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
-            });
+        if (!this.crossFrameListenersBound) {
             this.setCrossFramesEventListeners();
-            this.setPublicEventListeners();
+            this.crossFrameListenersBound = true;
+        }
+        if (this.headlessLoaded && this.iframeLoaded) {
+            if (!this.publicEventListenersBound && !this.isThreeDSecureEnabled()) {
+                this.setPublicEventListeners();
+                this.publicEventListenersBound = true;
+            }
             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
+            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.postMessageClient = new PostMessageClient({
+            channel: 'sca',
+            target: this.iframe
+        });
         this.headless.onload = () => {
             this.headlessLoaded = true;
             this.setListenersAndEmitReady();
@@ -87,6 +82,10 @@ class Hpp {
             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');
@@ -146,13 +145,15 @@ 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
+                        challengeWindowSize: this.challengeWindowSize,
+                        iframe: this.iframe,
+                        tokenizeOnly: false
                     });
                     return; // do not continue execution to old 3DS
                 }
@@ -215,16 +216,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) => {
@@ -236,6 +228,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/main.d.ts

@@ -27,11 +27,17 @@ export default class FatZebra {
     private sca;
     private fzConfig;
     private gatewayClient;
+    private headless;
+    private threeDSecure;
+    private threeDSEnabled;
+    private threeDSecureListenersBound;
     constructor(config: FZConfig);
-    tokenizeCard(card: Card, headless: HTMLIFrameElement): void;
-    cardDidTokenize(headless: HTMLIFrameElement, callback: (data: any) => void): void;
+    tokenizeCard(card: Card): void;
+    cardDidTokenize(callback: (data: any) => void): void;
+    private requestThreeDSEnabled;
     verifyCard(params: VerifyCardParams): Promise<void>;
-    renderPaymentsPage(params: HppLoadParams): void;
+    setThreeDSecureListeners(): void;
+    renderPaymentsPage(params: HppLoadParams): Promise<void>;
     renderApplePayButton(params: ApplePayParams): void;
     renderClickToPay(params: HppClickToPayParams): void;
     checkout(): void;

package/dist/main.js

@@ -23,12 +23,15 @@ 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 { 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.threeDSEnabled = false;
+        this.threeDSecureListenersBound = false;
         setLoggerUsername(config.username);
         this.fzConfig = config;
         window.MerchantUsername = config.username;
@@ -40,29 +43,47 @@ export default class FatZebra {
             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) {
+            this.setThreeDSecureListeners();
+        }
+        else {
+            this.headless.onload = () => {
+                this.setThreeDSecureListeners();
+            };
+        }
+        const message = {
+            channel: 'sca',
+            subject: BridgeEvent.READY,
+            data: {},
+        };
+        window.top.postMessage(message, '*');
     }
-    tokenizeCard(card, headless) {
+    tokenizeCard(card) {
         const channel = 'sca';
-        headless.onload = () => {
-            const message = {
-                channel,
-                subject: BridgeEvent.TOKENIZE_CARD_REQUEST,
-                data: {
-                    access_token: window.localStorage.getItem(LocalStorageAccessTokenKey),
-                    card_holder: card.holder,
-                    card_number: card.number,
-                    card_expiry: `${card.expiryMonth}/${card.expiryYear}`,
-                    cvv: card.cvv,
-                }
-            };
-            headless.contentWindow.postMessage(message, '*');
+        const message = {
+            channel,
+            subject: BridgeEvent.TOKENIZE_CARD_REQUEST,
+            data: {
+                access_token: window.localStorage.getItem(LocalStorageAccessTokenKey),
+                card_holder: card.holder,
+                card_number: card.number,
+                card_expiry: `${card.expiryMonth}/${card.expiryYear}`,
+                cvv: card.cvv,
+            },
         };
+        this.headless.contentWindow.postMessage(message, '*');
     }
-    cardDidTokenize(headless, callback) {
+    cardDidTokenize(callback) {
         const channel = 'sca';
         const postMessageClient = new PostMessageClient({
             channel,
-            target: headless
+            target: this.headless,
         });
         const handlers = {};
         handlers[BridgeEvent.TOKENIZE_CARD_RESPONSE] = (data) => {
@@ -70,85 +91,183 @@ export default class FatZebra {
         };
         postMessageClient.setEventListeners(handlers);
     }
+    requestThreeDSEnabled() {
+        return new Promise((resolve) => {
+            var _a;
+            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;
+                    this.threeDSEnabled = enabled;
+                    if (!resolved) {
+                        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),
+                },
+            };
+            (_a = this.headless.contentWindow) === null || _a === void 0 ? void 0 : _a.postMessage(message, '*');
+            window.setTimeout(() => {
+                if (!resolved) {
+                    resolved = true;
+                    resolve(false);
+                }
+            }, 5000);
+        });
+    }
     verifyCard(params) {
         return __awaiter(this, void 0, void 0, function* () {
-            var _a;
+            var _a, _b;
             const valid = validateVerifyCardParams(params);
             if (!valid) {
                 emit(PublicEvent.VALIDATION_ERROR, {
                     errors: toHumanizedErrors(validateVerifyCardParams.errors),
-                    data: null
+                    data: null,
                 });
                 return;
             }
+            const threeDSEnabled = yield this.requestThreeDSEnabled();
             switch (params.paymentMethod.type) {
-                case PaymentMethodType.CARD:
-                    const headless = bridge.load(process.env.PAYNOW_BRIDGE_URL);
+                case PaymentMethodType.CARD: {
                     const card = params.paymentMethod.data;
-                    this.cardDidTokenize(headless, (data) => __awaiter(this, void 0, void 0, function* () {
-                        var _a;
-                        const bin = card.number.substr(0, 6);
+                    this.cardDidTokenize((data) => __awaiter(this, void 0, void 0, function* () {
+                        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: {
+                    const cardToken = params.paymentMethod.data.token;
+                    if (threeDSEnabled) {
+                        this.threeDSecure.run({
+                            paymentIntent: params.paymentIntent,
+                            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: data.token,
+                            cardToken,
                             customer: params.customer,
                             paymentIntent: params.paymentIntent,
                             bin,
-                            challengeWindowSize: (_a = params.options) === null || _a === void 0 ? void 0 : _a.challengeWindowSize,
+                            challengeWindowSize: (_b = params.options) === null || _b === void 0 ? void 0 : _b.challengeWindowSize,
                         });
-                    }));
-                    this.tokenizeCard(card, headless);
-                    break;
-                case PaymentMethodType.CARD_ON_FILE:
-                    const cardToken = params.paymentMethod.data.token;
-                    const bin = (yield this.gatewayClient.getCard({ card_token: cardToken })).data.bin;
-                    this.sca.run({
-                        cardToken,
-                        customer: params.customer,
-                        paymentIntent: params.paymentIntent,
-                        bin,
-                        challengeWindowSize: (_a = params.options) === null || _a === void 0 ? void 0 : _a.challengeWindowSize,
-                    });
+                    }
                     break;
+                }
             }
         });
     }
+    setThreeDSecureListeners() {
+        var _a;
+        if (this.threeDSecureListenersBound)
+            return;
+        this.threeDSecureListenersBound = true;
+        const channel = 'sca';
+        const postMessageClient = new PostMessageClient({
+            channel,
+            target: this.headless,
+        });
+        const handlers = this.threeDSecure.messageHandlers();
+        handlers[BridgeEvent.THREE_D_SECURE_ENABLED] = (data) => {
+            this.threeDSEnabled = typeof data === 'boolean' ? data : false;
+        };
+        postMessageClient.setEventListeners(handlers);
+        const message = {
+            channel,
+            subject: 'fzi.is-enabled-three-d-secure-req',
+            data: {
+                merchant: this.fzConfig.username,
+                access_token: window.localStorage.getItem(LocalStorageAccessTokenKey),
+            },
+        };
+        (_a = this.headless.contentWindow) === null || _a === void 0 ? void 0 : _a.postMessage(message, '*');
+    }
     renderPaymentsPage(params) {
-        const valid = validateHppLoadParams(params);
-        if (!valid) {
-            emit(PublicEvent.VALIDATION_ERROR, {
-                errors: toHumanizedErrors(validateHppLoadParams.errors),
-                data: null
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            const valid = validateHppLoadParams(params);
+            if (!valid) {
+                emit(PublicEvent.VALIDATION_ERROR, {
+                    errors: toHumanizedErrors(validateHppLoadParams.errors),
+                    data: null,
+                });
+                return;
+            }
+            yield this.requestThreeDSEnabled();
+            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.threeDSEnabled,
             });
-            return;
-        }
-        window.HPP = new Hpp({
-            version: params.version,
-            paymentIntent: params.paymentIntent,
-            customer: params.customer,
-            username: this.fzConfig.username,
-            sca: this.sca,
-            test: this.fzConfig.test,
+            window.HPP.load(params);
         });
-        window.HPP.load(params);
     }
     renderApplePayButton(params) {
         const valid = validateApplePayLoadParams(params);
         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) {
@@ -156,7 +275,7 @@ export default class FatZebra {
         if (!valid) {
             emit(PublicEvent.VALIDATION_ERROR, {
                 errors: toHumanizedErrors(validateClickToPayLoadParams.errors),
-                data: null
+                data: null,
             });
             return;
         }

package/dist/react/useMessage.js

@@ -40,11 +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
+                test: config.environment !== Environment.production,
+                tokenizeOnly: config.options.tokenize_only,
+                iframe: iframe
             });
             return;
         }
@@ -66,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/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

@@ -20,14 +20,17 @@ declare class ThreeDSecure {
     private challengeWindowSize;
     private successCallback;
     private failureCallback;
+    private tokenizeOnly;
     private iframe?;
-    constructor({ successCallback, failureCallback, environment, bridge, iframe }: ThreeDSecureConfig);
-    run({ paymentIntent, cardToken, merchantUsername, challengeWindowSize, test }: {
+    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(): {
@@ -41,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,15 +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 }) {
+    run({ paymentIntent, cardToken, merchantUsername, challengeWindowSize, test, tokenizeOnly, iframe }) {
+        this.iframe = iframe;
+        this.tokenizeOnly = tokenizeOnly;
         this.setLoading();
         this.paymentIntent = paymentIntent;
         this.test = test;
@@ -45,12 +48,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);
         };
@@ -61,7 +58,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;
     }
@@ -123,6 +120,8 @@ class ThreeDSecure {
         }
         if (scenario.outcome.success) {
             this.reportSuccess(`FatZebra.3DS: 3DS success - ${scenario.description}.`, threeDSecureData);
+            if (this.tokenizeOnly)
+                return; // DO NO process purchase if tokenizing only.
             const extra = util.toObjectWithSnakeCaseKeys(threeDSecureData);
             this.createPurchase(extra);
             return;
@@ -149,6 +148,8 @@ class ThreeDSecure {
         const extra = util.toObjectWithSnakeCaseKeys(threeDSecureData);
         if (scenario.outcome.success) {
             this.reportSuccess(`FatZebra.3DS: 3DS success - ${scenario.description}.`, threeDSecureData);
+            if (this.tokenizeOnly)
+                return; // DO NO process purchase if tokenizing only.
             this.createPurchase(extra);
         }
         else {
@@ -176,6 +177,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,7 +12,6 @@ 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;

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

@@ -50,18 +50,14 @@ 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") {
-            this.hasEmittedProfileReady = true;
             emit(PublicEvent.DEVICE_PROFILE_READY_THREE_D_SECURE_EVENT, { message: null, data: null });
         }
         else if (response["Status"] == false) {
-            this.hasEmittedProfileReady = true;
             // 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 });
         }
@@ -126,7 +122,6 @@ 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({

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