@fat-zebra/sdk 2.0.5 → 2.0.6-beta.2

package/dist/hpp/hpp.js

@@ -131,6 +131,7 @@ class Hpp {
                 return;
             if (this.hppOptions.enableSca) {
                 if (this.isThreeDSecureEnabled) {
+                    const flowId = crypto.randomUUID();
                     this.threeDSecure.run({
                         paymentIntent: this.paymentIntent,
                         merchantUsername: this.username,
@@ -138,7 +139,8 @@ class Hpp {
                         test: this.test,
                         challengeWindowSize: this.challengeWindowSize,
                         iframe: this.iframe,
-                        tokenizeOnly: false
+                        tokenizeOnly: false,
+                        flowId,
                     });
                     return; // do not continue execution to old 3DS
                 }

package/dist/logging/instrument.js

@@ -1,5 +1,5 @@
 import axios from "axios";
-import { getLoggerUsername, getTransactionReference } from "./logger-context";
+import { getFlowId, getIsReactSdk, getLoggerUsername, getTransactionReference } from "./logger-context";
 let loggerConfig = {};
 export function configureLogger(config) {
     loggerConfig = config;
@@ -39,6 +39,8 @@ export function instrumentFunction(methodName, fn, opts = {}) {
             const payload = {
                 username: getLoggerUsername(),
                 reference: getTransactionReference(),
+                flowId: getFlowId(),
+                reactSdk: getIsReactSdk(),
                 className: opts.className,
                 method: methodName,
                 arguments: mappedArgs,

package/dist/logging/logger-context.d.ts

@@ -2,3 +2,7 @@ export declare function setLoggerUsername(username: string): void;
 export declare function setTransactionReference(reference: string): void;
 export declare function getLoggerUsername(): string | undefined;
 export declare function getTransactionReference(): string | undefined;
+export declare function getFlowId(): string | undefined;
+export declare function setFlowId(flowId: string | undefined): void;
+export declare function setIsReactSdk(value: boolean): void;
+export declare function getIsReactSdk(): boolean;

package/dist/logging/logger-context.js

@@ -1,5 +1,7 @@
 let globalLoggerUsername;
 let globalTransactionReference;
+let globalFlowId;
+let globalIsReactSdk = false;
 export function setLoggerUsername(username) {
     globalLoggerUsername = username;
 }
@@ -12,3 +14,15 @@ export function getLoggerUsername() {
 export function getTransactionReference() {
     return globalTransactionReference;
 }
+export function getFlowId() {
+    return globalFlowId;
+}
+export function setFlowId(flowId) {
+    globalFlowId = flowId;
+}
+export function setIsReactSdk(value) {
+    globalIsReactSdk = value;
+}
+export function getIsReactSdk() {
+    return globalIsReactSdk;
+}

package/dist/main.d.ts

@@ -36,7 +36,7 @@ export default class FatZebra {
     private authReady;
     constructor(config: FZConfig);
     private setAuthImpl;
-    tokenizeCard(card: Card): void;
+    tokenizeCard(card: Card, flowId: string): void;
     cardDidTokenize(callback: (data: any) => void): void;
     private requestThreeDSecureEnabled;
     verifyCard(params: VerifyCardParams): Promise<void>;

package/dist/main.js

@@ -25,7 +25,7 @@ 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, setTransactionReference } from './logging/logger-context';
+import { setFlowId, setLoggerUsername, setTransactionReference } from './logging/logger-context';
 import { logMethod } from './logging/logMethod';
 import ThreeDSecure from './three_d_secure';
 class FatZebra {
@@ -79,13 +79,14 @@ class FatZebra {
             }
         });
     }
-    tokenizeCard(card) {
+    tokenizeCard(card, flowId) {
         const channel = 'sca';
         const message = {
             channel,
             subject: BridgeEvent.TOKENIZE_CARD_REQUEST,
             data: {
                 source: 'verifyCard',
+                flow_id: flowId,
                 access_token: window.localStorage.getItem(LocalStorageAccessTokenKey),
                 card_holder: card.holder,
                 card_number: card.number,
@@ -160,6 +161,7 @@ class FatZebra {
                 return;
             }
             yield this.authReady;
+            const flowId = crypto.randomUUID();
             switch (params.paymentMethod.type) {
                 case PaymentMethodType.CARD: {
                     console.log('Verify card (new card)');
@@ -174,6 +176,7 @@ class FatZebra {
                                 challengeWindowSize: (_a = params.options) === null || _a === void 0 ? void 0 : _a.challengeWindowSize,
                                 test: this.fzConfig.test,
                                 tokenizeOnly: true,
+                                flowId,
                             });
                         }
                         else {
@@ -188,7 +191,7 @@ class FatZebra {
                             });
                         }
                     }));
-                    this.tokenizeCard(card);
+                    this.tokenizeCard(card, flowId);
                     break;
                 }
                 case PaymentMethodType.CARD_ON_FILE: {
@@ -202,6 +205,7 @@ class FatZebra {
                             challengeWindowSize: (_a = params.options) === null || _a === void 0 ? void 0 : _a.challengeWindowSize,
                             test: this.fzConfig.test,
                             tokenizeOnly: true,
+                            flowId,
                         });
                     }
                     else {
@@ -331,6 +335,7 @@ __decorate([
             var _a, _b, _c;
             const params = args[0];
             setTransactionReference((_b = (_a = params.paymentIntent) === null || _a === void 0 ? void 0 : _a.payment) === null || _b === void 0 ? void 0 : _b.reference);
+            setFlowId(undefined);
             return [
                 {
                     merchant_username: window.MerchantUsername,
@@ -348,6 +353,7 @@ __decorate([
             var _a, _b;
             const params = args[0];
             setTransactionReference((_b = (_a = params.paymentIntent) === null || _a === void 0 ? void 0 : _a.payment) === null || _b === void 0 ? void 0 : _b.reference);
+            setFlowId(undefined);
             return [
                 {
                     payment_intent: params.paymentIntent,
@@ -361,6 +367,18 @@ __decorate([
 __decorate([
     logMethod()
 ], FatZebra.prototype, "renderClickToPay", null);
+__decorate([
+    logMethod({
+        mapArgs: (args) => {
+            return [
+                {
+                    data: args[0],
+                    payment_intent: args[1]
+                },
+            ];
+        },
+    })
+], FatZebra.prototype, "reportThreeDSecureFetched", null);
 __decorate([
     logMethod({
         mapArgs: (args) => {

package/dist/react/logging.d.ts

@@ -0,0 +1,13 @@
+import { Environment } from "../shared/env";
+import type { TokenizeCardResponse, PaymentIntent } from "../shared/types";
+type UseFatZebraLogMeta = {
+    environment: Environment;
+    reference: string;
+    username: string;
+    react_sdk: boolean;
+};
+declare const logUseFatZebra: (args_0: UseFatZebraLogMeta) => UseFatZebraLogMeta;
+declare const logReportTokenizeCardResponse: (args_0: TokenizeCardResponse) => void;
+declare const logReportThreeDSecureFetched: (data: boolean, paymentIntent?: PaymentIntent) => void;
+declare const logReportRequestThreedsEnabledTimeout: (paymentIntent?: PaymentIntent) => void;
+export { logUseFatZebra, logReportTokenizeCardResponse, logReportThreeDSecureFetched, logReportRequestThreedsEnabledTimeout, };

package/dist/react/logging.js

@@ -0,0 +1,36 @@
+import { instrumentFunction } from "../logging/instrument";
+import { setLoggerUsername, setTransactionReference, setFlowId, setIsReactSdk, } from "../logging/logger-context";
+import env from "../shared/env";
+const logUseFatZebra = instrumentFunction("useFatZebra", (meta) => meta, {
+    mapArgs: ([meta]) => {
+        setLoggerUsername(meta.username);
+        setTransactionReference(meta.reference);
+        setFlowId(undefined);
+        setIsReactSdk(true);
+        return meta;
+    },
+    className: "useFatZebra",
+    endpoint: (meta) => `${env[meta.environment].payNowUrl}/log_sdk`,
+});
+const logReportTokenizeCardResponse = instrumentFunction("reportTokenizeCardResponse", () => {
+    console.log("Tokenize card response received");
+}, {
+    mapArgs: ([data]) => ({ token: data.token, bin: data.bin }),
+    className: "useMessage",
+});
+const logReportThreeDSecureFetched = instrumentFunction("reportThreeDSecureFetched", (data) => {
+    console.log("three_d_secure fetched", data);
+}, {
+    mapArgs: ([data, paymentIntent]) => ({
+        data,
+        payment_intent: paymentIntent,
+    }),
+    className: "useMessage",
+});
+const logReportRequestThreedsEnabledTimeout = instrumentFunction("reportRequestThreedsEnabledTimeout", () => {
+    console.log("3DS enabled check timed out");
+}, {
+    mapArgs: ([paymentIntent]) => ({ payment_intent: paymentIntent }),
+    className: "useMessage",
+});
+export { logUseFatZebra, logReportTokenizeCardResponse, logReportThreeDSecureFetched, logReportRequestThreedsEnabledTimeout, };

package/dist/react/useFatZebra.js

@@ -5,12 +5,9 @@ import Sca from "../sca";
 import GatewayClient from "../shared/api-gateway-client";
 import { generateVerifyURL } from "./verifyUrl";
 import useMessage from "./useMessage";
-import { configureLogger, instrumentFunction } from "../logging/instrument";
+import { configureLogger } 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`,
-});
+import { logUseFatZebra } from "./logging";
 const useFatZebra = ({ config, handlers, cardToken }) => {
     const { options, accessToken, paymentIntent, username } = config;
     const sca = useMemo(() => {

package/dist/react/useMessage.js

@@ -7,17 +7,34 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef } from 'react';
 import * as FatZebra from "../shared/types";
 import ThreeDSecure from "../three_d_secure";
 import * as bridge from "../shared/bridge-client";
 import env, { Environment } from "../shared/env";
+import { PostMessageClient } from "../shared/post-message-client";
 import { BridgeEvent } from "../shared/types";
+import { setFlowId } from '../logging/logger-context';
+import { LocalStorageAccessTokenKey } from '../shared/constants';
+import { logReportRequestThreedsEnabledTimeout, logReportThreeDSecureFetched, logReportTokenizeCardResponse } from './logging';
 const useMessage = ({ paymentIntent, options, handlers, sca, config }) => {
-    const [threeDSecureEnabled, setThreeDSecureEnabled] = useState(false);
+    const isThreeDSecureEnabled = useRef(false);
     const threeDSecureRef = useRef(null);
-    const successCallback = handlers[FatZebra.PublicEvent.SCA_SUCCESS];
-    const failureCallback = handlers[FatZebra.PublicEvent.SCA_ERROR];
+    const headlessRef = useRef(null);
+    const initAuthClientRef = useRef(null);
+    const listenersClientRef = useRef(null);
+    // defaults to a resolved promise so handleTokenizeCardResponse doesn't hang if initAuth never runs (no config)
+    const authReadyRef = useRef(Promise.resolve());
+    // ThreeDSecure is instantiated once in a [] useEffect, so it would capture stale handler
+    // references if callbacks were passed directly. Instead we keep refs that are updated on
+    // every render, and pass stable wrapper functions so ThreeDSecure always invokes the
+    // latest callbacks without needing to be recreated.
+    const successCallbackRef = useRef(handlers[FatZebra.PublicEvent.SCA_SUCCESS]);
+    const failureCallbackRef = useRef(handlers[FatZebra.PublicEvent.SCA_ERROR]);
+    successCallbackRef.current = handlers[FatZebra.PublicEvent.SCA_SUCCESS];
+    failureCallbackRef.current = handlers[FatZebra.PublicEvent.SCA_ERROR];
+    const successCallback = (e) => { var _a; return (_a = successCallbackRef.current) === null || _a === void 0 ? void 0 : _a.call(successCallbackRef, e); };
+    const failureCallback = (e) => { var _a; return (_a = failureCallbackRef.current) === null || _a === void 0 ? void 0 : _a.call(failureCallbackRef, e); };
     const emit = (event, data) => {
         const handler = handlers[event];
         if (handler) {
@@ -33,26 +50,29 @@ const useMessage = ({ paymentIntent, options, handlers, sca, config }) => {
             });
             return;
         }
-        else {
-            emit(FatZebra.PublicEvent.TOKENIZATION_SUCCESS, {
-                message: "Card tokenization success.",
-                data,
-            });
-        }
-        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: true,
-                iframe: iframe
-            });
-            return;
-        }
-        if (options && sca && options.sca_enabled) {
-            yield sca.run({ paymentIntent, bin: data.bin, cardToken: data.token });
+        emit(FatZebra.PublicEvent.TOKENIZATION_SUCCESS, {
+            message: "Card tokenization success.",
+            data,
+        });
+        if (options && options.sca_enabled) {
+            yield authReadyRef.current;
+            if (threeDSecureRef.current && isThreeDSecureEnabled.current && config) {
+                const iframe = document.querySelector('[name="renderIframe"]');
+                const flowId = crypto.randomUUID();
+                setFlowId(flowId);
+                threeDSecureRef.current.run({
+                    paymentIntent,
+                    cardToken: data.token,
+                    merchantUsername: config.username,
+                    test: config.environment !== Environment.production,
+                    tokenizeOnly: true,
+                    iframe: iframe,
+                    flowId
+                });
+            }
+            else if (sca) {
+                yield sca.run({ paymentIntent, bin: data.bin, cardToken: data.token });
+            }
         }
     });
     const messageHandler = (event) => __awaiter(void 0, void 0, void 0, function* () {
@@ -62,35 +82,6 @@ const useMessage = ({ paymentIntent, options, handlers, sca, config }) => {
             return;
         if (event.data.subject === FatZebra.BridgeEvent.BIN_LOOKUP)
             return;
-        if (event.data.subject === FatZebra.BridgeEvent.THREE_D_SECURE_ENABLED) {
-            setThreeDSecureEnabled(event.data.data);
-            if (event.data.data) {
-                const { el } = bridge.load2(env[config.environment].bridgeUrl);
-                const headless = el;
-                let onMessage;
-                headless.onload = () => {
-                    const threeDS = new ThreeDSecure({
-                        successCallback,
-                        failureCallback,
-                        bridge: headless,
-                        environment: config.environment,
-                    });
-                    threeDSecureRef.current = threeDS;
-                    const messages = threeDS.messageHandlers(); // { [subject]: (payload) => void }
-                    onMessage = (ev) => {
-                        var _a, _b;
-                        const subject = (_a = ev === null || ev === void 0 ? void 0 : ev.data) === null || _a === void 0 ? void 0 : _a.subject;
-                        const payload = (_b = ev === null || ev === void 0 ? void 0 : ev.data) === null || _b === void 0 ? void 0 : _b.data;
-                        if (!subject)
-                            return;
-                        const handler = messages[subject];
-                        if (handler)
-                            handler(payload);
-                    };
-                    window.addEventListener("message", onMessage);
-                };
-            }
-        }
         if (event.data.subject === FatZebra.BridgeEvent.FORM_VALIDATION_ERROR) {
             emit(FatZebra.PublicEvent.FORM_VALIDATION_ERROR, {
                 errors: event.data.data,
@@ -106,20 +97,92 @@ const useMessage = ({ paymentIntent, options, handlers, sca, config }) => {
             return;
         }
         if (event.data.subject === FatZebra.BridgeEvent.TOKENIZE_CARD_RESPONSE) {
+            logReportTokenizeCardResponse(event.data.data);
             yield handleTokenizeCardResponse(event.data.data);
         }
     });
     useEffect(() => {
-        const message = {
+        if (!config)
+            return;
+        const { el, isExisting } = bridge.load2(env[config.environment].bridgeUrl);
+        headlessRef.current = el;
+        const initAuth = () => {
+            const postMessageClient = new PostMessageClient({
+                channel: 'sca',
+                target: el,
+                environment: config.environment,
+            });
+            initAuthClientRef.current = postMessageClient;
+            let resolved = false;
+            let resolveAuthReady;
+            authReadyRef.current = new Promise((resolve) => { resolveAuthReady = resolve; });
+            postMessageClient.setEventListeners({
+                [BridgeEvent.THREE_D_SECURE_ENABLED]: (data) => {
+                    const enabled = typeof data === 'boolean' ? data : false;
+                    if (!resolved) {
+                        logReportThreeDSecureFetched(enabled, paymentIntent);
+                        resolved = true;
+                        isThreeDSecureEnabled.current = enabled;
+                        resolveAuthReady();
+                        if (enabled) {
+                            const threeDS = new ThreeDSecure({
+                                successCallback,
+                                failureCallback,
+                                bridge: el,
+                                environment: config.environment,
+                            });
+                            threeDSecureRef.current = threeDS;
+                            const listenersClient = new PostMessageClient({
+                                channel: 'sca',
+                                target: el,
+                                environment: config.environment,
+                            });
+                            listenersClient.setEventListeners(threeDS.messageHandlers());
+                            listenersClientRef.current = listenersClient;
+                        }
+                    }
+                },
+            }, { once: true });
+            const message = {
+                channel: 'sca',
+                subject: 'fzi.is-enabled-three-d-secure-req',
+                data: {
+                    merchant: config.username,
+                    access_token: window.localStorage.getItem(LocalStorageAccessTokenKey),
+                },
+            };
+            postMessageClient.send(message);
+            window.setTimeout(() => {
+                if (!resolved) {
+                    logReportRequestThreedsEnabledTimeout(paymentIntent);
+                    resolved = true;
+                    resolveAuthReady();
+                }
+            }, 500);
+        };
+        if (isExisting) {
+            initAuth();
+        }
+        else {
+            el.addEventListener('load', initAuth, { once: true });
+        }
+        const readyMessage = {
             channel: 'sca',
             subject: BridgeEvent.READY,
             data: {}
         };
         const iframe = document.querySelector('[name="renderIframe"]');
-        if (!iframe)
-            return;
-        iframe.onload = () => {
-            iframe.contentWindow.postMessage(message, '*');
+        if (iframe) {
+            iframe.onload = () => {
+                var _a;
+                (_a = iframe.contentWindow) === null || _a === void 0 ? void 0 : _a.postMessage(readyMessage, '*');
+            };
+        }
+        return () => {
+            var _a, _b;
+            el.removeEventListener('load', initAuth);
+            (_a = initAuthClientRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListeners();
+            (_b = listenersClientRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListeners();
         };
     }, []);
     useEffect(() => {

package/dist/shared/api-gateway-client.d.ts

@@ -7,6 +7,7 @@ export type GatewayClientProps = {
     accessToken?: string;
 };
 declare class GatewayClient {
+    static readonly displayName = "GatewayClient";
     username: string;
     environment?: Environment;
     client: AxiosInstance;

package/dist/shared/api-gateway-client.js

@@ -84,6 +84,7 @@ class GatewayClient {
         });
     }
 }
+GatewayClient.displayName = "GatewayClient";
 __decorate([
     logMethod()
 ], GatewayClient.prototype, "createSCASession", null);

package/dist/three_d_secure/index.d.ts

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

package/dist/three_d_secure/index.js

@@ -17,6 +17,7 @@ import { getThreeDSecureEnrollmentResult } from "./utility/getEnrollmentResult";
 import { getThreeDSecureValidationResult } from "./utility/getValidationResult";
 import { ChallengeWindowSize } from "../sca/types";
 import * as util from "../shared/util";
+import { setFlowId } from "../logging/logger-context";
 class ThreeDSecure {
     constructor({ successCallback, failureCallback, environment, bridge }) {
         this.tokenizeOnly = false;
@@ -27,8 +28,9 @@ class ThreeDSecure {
         this.failureCallback = failureCallback;
         DeviceDataCollection.listenDataCollectionResponse(environment);
     }
-    run({ paymentIntent, cardToken, merchantUsername, challengeWindowSize, test, tokenizeOnly, iframe }) {
+    run({ paymentIntent, cardToken, merchantUsername, challengeWindowSize, test, tokenizeOnly, iframe, flowId }) {
         console.log('Running 3DS (ThreeDSecure)');
+        this.flowId = flowId;
         this.iframe = iframe;
         this.tokenizeOnly = tokenizeOnly;
         this.setLoading();
@@ -48,18 +50,28 @@ class ThreeDSecure {
     messageHandlers() {
         const handlers = {};
         handlers[BridgeEvent.SETUP_THREE_D_SECURE_SUCCESS_RESPONSE] = (data) => {
+            if (data.flow_id !== this.flowId)
+                return;
             this.setupResponse(data);
         };
         handlers[BridgeEvent.ENROL_THREE_D_SECURE_RESPONSE] = (data) => {
+            if (data.flow_id !== this.flowId)
+                return;
             this.enrolmentResponse(data);
         };
         handlers[BridgeEvent.THREE_D_SECURE_CHALLENGE_COMPLETE] = (data) => {
+            if (data.flow_id !== this.flowId)
+                return;
             this.validateAuthentication(data);
         };
         handlers[BridgeEvent.VALIDATE_THREE_D_SECURE_RESPONSE] = (data) => {
+            if (data.flow_id !== this.flowId)
+                return;
             this.validationAuthenticationResponse(data);
         };
         handlers[BridgeEvent.THREE_D_SECURE_FAILURE_RESPONSE] = (data) => {
+            if (data.flow_id !== this.flowId)
+                return;
             emit(PublicEvent.SCA_ERROR, { errors: [data.errors], data });
         };
         return handlers;
@@ -89,6 +101,7 @@ class ThreeDSecure {
             channel: 'sca',
             subject: BridgeEvent.SETUP_THREE_D_SECURE_REQUEST,
             data: {
+                flow_id: this.flowId,
                 access_token: window.localStorage.getItem(LocalStorageAccessTokenKey),
                 reference: this.paymentIntent.payment.reference,
                 amount: this.paymentIntent.payment.amount,
@@ -103,7 +116,7 @@ class ThreeDSecure {
         const message = {
             channel: 'sca',
             subject: BridgeEvent.ENROL_THREE_D_SECURE_REQUEST,
-            data: Object.assign(Object.assign(Object.assign({ access_token: window.localStorage.getItem(LocalStorageAccessTokenKey), merchant_username: merchantUsername, card_token: cardToken }, paymentIntent.payment), { verification: paymentIntent.verification, reference_id: cybersourceReferenceId, return_url: env[this.environment].returnCybersourceUrl, acs_window_size: (_a = this.challengeWindowSize) !== null && _a !== void 0 ? _a : ChallengeWindowSize.SIZE_500X600, device_channel: "BROWSER" }), snakeCaseKeys(DeviceDataCollection.collectDeviceData()))
+            data: Object.assign(Object.assign(Object.assign({ flow_id: this.flowId, access_token: window.localStorage.getItem(LocalStorageAccessTokenKey), merchant_username: merchantUsername, card_token: cardToken }, paymentIntent.payment), { verification: paymentIntent.verification, reference_id: cybersourceReferenceId, return_url: `${env[this.environment].returnCybersourceUrl}?flow_id=${this.flowId}`, acs_window_size: (_a = this.challengeWindowSize) !== null && _a !== void 0 ? _a : ChallengeWindowSize.SIZE_500X600, device_channel: "BROWSER" }), snakeCaseKeys(DeviceDataCollection.collectDeviceData()))
         };
         this.headlessBridge.contentWindow.postMessage(message, '*');
     }
@@ -138,7 +151,7 @@ class ThreeDSecure {
         const message = {
             channel: 'sca',
             subject: BridgeEvent.VALIDATE_THREE_D_SECURE_REQUEST,
-            data: Object.assign(Object.assign({ access_token: window.localStorage.getItem(LocalStorageAccessTokenKey), merchant_username: this.merchantUsername, card_token: data.cardToken }, this.paymentIntent.payment), { authentication_transaction_id: data.transactionId })
+            data: Object.assign(Object.assign({ flow_id: this.flowId, access_token: window.localStorage.getItem(LocalStorageAccessTokenKey), merchant_username: this.merchantUsername, card_token: data.cardToken }, this.paymentIntent.payment), { authentication_transaction_id: data.transactionId })
         };
         this.headlessBridge.contentWindow.postMessage(message, '*');
     }
@@ -211,6 +224,9 @@ __decorate([
     logMethod({
         mapArgs: (args) => {
             const params = args[0];
+            if (params.flowId) {
+                setFlowId(params.flowId);
+            }
             return [
                 {
                     payment_intent: params.paymentIntent,
@@ -222,6 +238,19 @@ __decorate([
         },
     })
 ], ThreeDSecure.prototype, "run", null);
+__decorate([
+    logMethod({
+        mapArgs: (args) => {
+            const params = args[0];
+            return [
+                {
+                    device_data_collection_url: params.device_data_collection_url,
+                    reference_id: params.reference_id,
+                },
+            ];
+        },
+    })
+], ThreeDSecure.prototype, "setupResponse", null);
 __decorate([
     logMethod({
         mapArgs: (args) => {

package/dist/three_d_secure/utility/types.d.ts

@@ -7,6 +7,7 @@ interface CheckEnrollmentProps {
     cybersourceReferenceId: string;
 }
 interface ValidationThreeDSecureResponse {
+    "flow_id": string;
     "pares": PARes;
     "eci": string;
     "aav"?: string;
@@ -16,6 +17,7 @@ interface ValidationThreeDSecureResponse {
     "threeds_version": string;
 }
 interface EnrollThreeDSecureResponse {
+    "flow_id": string;
     "cavv": string;
     "aav"?: string;
     "directory_server_txn_id": string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fat-zebra/sdk",
-  "version": "2.0.5",
+  "version": "2.0.6-beta.2",
   "description": "",
   "main": "index.js",
   "scripts": {