@fat-zebra/sdk 1.5.16-beta.0 → 1.5.16-beta.3

package/dist/hpp/hpp.d.ts

@@ -51,6 +51,7 @@ declare class Hpp {
     private headlessPreviouslyLoaded;
     private iframeLoaded;
     private threeDSecureEnabled;
+    private challengeWindowSize;
     private scaHandler;
     constructor(config: HppModuleConfig);
     setListenersAndEmitReady(): void;

package/dist/hpp/hpp.js

@@ -1,16 +1,9 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
 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";
 const HPP_DEFAULT_OPTIONS = {
@@ -45,7 +38,8 @@ class Hpp {
             // initial headless load
             this.ThreeDSecure = new ThreeDSecure({
                 bridge: this.headless,
-                environment: process.env.API_ENV
+                environment: process.env.API_ENV,
+                iframe: this.iframe
             });
             this.setCrossFramesEventListeners();
             this.setPublicEventListeners();
@@ -53,6 +47,11 @@ class Hpp {
             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
@@ -60,6 +59,7 @@ class Hpp {
         }
     }
     load(config) {
+        this.challengeWindowSize = config.options.challengeWindowSize;
         setTransactionReference(config.paymentIntent.payment.reference);
         this.hppOptions = config.options;
         const { el, isExisting } = bridge.load2(process.env.PAYNOW_BRIDGE_URL);
@@ -113,7 +113,7 @@ class Hpp {
     setCrossFramesEventListeners() {
         const handlers = {};
         handlers[BridgeEvent.TOKENIZE_CARD_RESPONSE] = (data) => {
-            var _a, _b;
+            var _a;
             if (data.errors) {
                 emit(PublicEvent.TOKENIZATION_ERROR, {
                     message: 'Card tokenization failed.',
@@ -139,8 +139,8 @@ class Hpp {
                         paymentIntent: this.paymentIntent,
                         merchantUsername: this.username,
                         cardToken: this.cardToken,
-                        challengeWindowSize: (_a = this.hppOptions) === null || _a === void 0 ? void 0 : _a.challengeWindowSize,
-                        test: this.test
+                        test: this.test,
+                        challengeWindowSize: this.challengeWindowSize
                     });
                     return; // do not continue execution to old 3DS
                 }
@@ -149,7 +149,7 @@ class Hpp {
                     customer: this.customer,
                     paymentIntent: this.paymentIntent,
                     bin: data.bin,
-                    challengeWindowSize: (_b = this.hppOptions) === null || _b === void 0 ? void 0 : _b.challengeWindowSize,
+                    challengeWindowSize: (_a = this.hppOptions) === null || _a === void 0 ? void 0 : _a.challengeWindowSize,
                 });
             }
             else {
@@ -206,7 +206,6 @@ class Hpp {
         handlers[BridgeEvent.THREE_D_SECURE_ENABLED] = (data) => {
             this.threeDSecureEnabled = typeof data === "boolean" ? data : false;
             if (this.threeDSecureEnabled) {
-                console.log("this is a three_d_secure enabled page: ", 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);
@@ -246,7 +245,4 @@ class Hpp {
         this.headless.contentWindow.postMessage(message, '*');
     }
 }
-__decorate([
-    logMethod()
-], Hpp.prototype, "createPurchase", null);
 export { Hpp, HPP_DEFAULT_OPTIONS, };

package/dist/react/VerifyCard.js

@@ -6,6 +6,6 @@ const VerifyCard = ({ handlers, config, iframeProps }) => {
         handlers: handlers,
     });
     return (React.createElement("div", null,
-        React.createElement("iframe", Object.assign({ src: paymentUrl, "data-test-id": "verify-card", title: "verification-form" }, iframeProps))));
+        React.createElement("iframe", Object.assign({ src: paymentUrl, name: 'renderIframe', "data-test-id": "verify-card", title: "verification-form" }, iframeProps))));
 };
 export default VerifyCard;

package/dist/react/useFatZebra.js

@@ -21,7 +21,8 @@ const useFatZebra = ({ config, handlers, cardToken }) => {
         paymentIntent,
         options,
         handlers,
-        sca
+        sca,
+        config
     });
     useEffect(() => {
         logUseFatZebra({

package/dist/react/useMessage.d.ts

@@ -5,6 +5,7 @@ type UseMessageProps = {
     handlers: FatZebra.Handlers;
     options?: FatZebra.OptionalUrlValues;
     sca?: InstanceType<typeof Sca>;
+    config?: FatZebra.PaymentConfig;
 };
-declare const useMessage: ({ paymentIntent, options, handlers, sca }: UseMessageProps) => void;
+declare const useMessage: ({ paymentIntent, options, handlers, sca, config }: UseMessageProps) => void;
 export default useMessage;

package/dist/react/useMessage.js

@@ -7,9 +7,16 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { useEffect } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import * as FatZebra from "../shared/types";
-const useMessage = ({ paymentIntent, options, handlers, sca }) => {
+import ThreeDSecure from "../three_d_secure";
+import * as bridge from "../shared/bridge-client";
+import env, { Environment } from "../shared/env";
+const useMessage = ({ paymentIntent, options, handlers, sca, config }) => {
+    const [threeDSecureEnabled, setThreeDSecureEnabled] = useState(false);
+    const threeDSecureRef = useRef(null);
+    const successCallback = handlers[FatZebra.PublicEvent.SCA_SUCCESS];
+    const failureCallback = handlers[FatZebra.PublicEvent.SCA_ERROR];
     const emit = (event, data) => {
         const handler = handlers[event];
         if (handler) {
@@ -31,6 +38,15 @@ const useMessage = ({ paymentIntent, options, handlers, sca }) => {
                 data,
             });
         }
+        if (options && options.sca_enabled && threeDSecureEnabled) {
+            threeDSecureRef.current.run({
+                paymentIntent,
+                cardToken: data.token,
+                merchantUsername: config.username,
+                test: config.environment !== Environment.production
+            });
+            return;
+        }
         if (options && sca && options.sca_enabled) {
             yield sca.run({ paymentIntent, bin: data.bin, cardToken: data.token });
         }
@@ -42,6 +58,37 @@ const useMessage = ({ paymentIntent, options, handlers, sca }) => {
             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 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 }
+                    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,

package/dist/shared/types.d.ts

@@ -43,7 +43,8 @@ declare enum BridgeEvent {
     VALIDATE_THREE_D_SECURE_REQUEST = "fzi.3ds_val8_req",
     VALIDATE_THREE_D_SECURE_RESPONSE = "fzi.3ds_val8_res",
     THREE_D_SECURE_FAILURE_RESPONSE = "fzi.3ds_fail",
-    THREE_D_SECURE_CHALLENGE_COMPLETE = "fzi.3ds_chlnge_cmplte"
+    THREE_D_SECURE_CHALLENGE_COMPLETE = "fzi.3ds_chlnge_cmplte",
+    LOADING_THREE_D_SECURE = "fzi.loading_three_d_secure"
 }
 declare enum PaymentMethodType {
     CARD = "card",

package/dist/shared/types.js

@@ -45,6 +45,7 @@ var BridgeEvent;
     BridgeEvent["VALIDATE_THREE_D_SECURE_RESPONSE"] = "fzi.3ds_val8_res";
     BridgeEvent["THREE_D_SECURE_FAILURE_RESPONSE"] = "fzi.3ds_fail";
     BridgeEvent["THREE_D_SECURE_CHALLENGE_COMPLETE"] = "fzi.3ds_chlnge_cmplte";
+    BridgeEvent["LOADING_THREE_D_SECURE"] = "fzi.loading_three_d_secure";
 })(BridgeEvent || (BridgeEvent = {}));
 var PaymentMethodType;
 (function (PaymentMethodType) {

package/dist/three_d_secure/index.d.ts

@@ -7,6 +7,7 @@ interface ThreeDSecureConfig {
     failureCallback?: EventCallback | null;
     environment?: Environment;
     bridge: HTMLIFrameElement;
+    iframe?: HTMLIFrameElement;
 }
 declare class ThreeDSecure {
     private headlessBridge;
@@ -19,12 +20,13 @@ declare class ThreeDSecure {
     private challengeWindowSize;
     private successCallback;
     private failureCallback;
-    constructor({ successCallback, failureCallback, environment, bridge }: ThreeDSecureConfig);
+    private iframe?;
+    constructor({ successCallback, failureCallback, environment, bridge, iframe }: ThreeDSecureConfig);
     run({ paymentIntent, cardToken, merchantUsername, challengeWindowSize, test }: {
         paymentIntent: PaymentIntent;
         cardToken: string;
         merchantUsername: string;
-        challengeWindowSize: ChallengeWindowSize;
+        challengeWindowSize?: ChallengeWindowSize;
         test: boolean;
     }): void;
     setupResponse(data: DeviceDataCollectionMessage): void;
@@ -39,5 +41,6 @@ declare class ThreeDSecure {
     private validateAuthentication;
     private validationAuthenticationResponse;
     private createPurchase;
+    private setLoading;
 }
 export default ThreeDSecure;

package/dist/three_d_secure/index.js

@@ -18,14 +18,16 @@ import { getThreeDSecureValidationResult } from "./utility/getValidationResult";
 import { ChallengeWindowSize } from "../sca/types";
 import * as util from "../shared/util";
 class ThreeDSecure {
-    constructor({ successCallback, failureCallback, environment, bridge }) {
+    constructor({ successCallback, failureCallback, environment, bridge, iframe }) {
         this.headlessBridge = bridge;
         this.environment = environment;
         this.successCallback = successCallback;
         this.failureCallback = failureCallback;
+        this.iframe = iframe;
         DeviceDataCollection.listenDataCollectionResponse(environment);
     }
     run({ paymentIntent, cardToken, merchantUsername, challengeWindowSize, test }) {
+        this.setLoading();
         this.paymentIntent = paymentIntent;
         this.test = test;
         this.cardToken = cardToken;
@@ -71,7 +73,7 @@ class ThreeDSecure {
         else {
             emit(PublicEvent.SCA_SUCCESS, { message, data });
         }
-        console.log(message);
+        this.setLoading(false);
     }
     reportFailure(message, data) {
         if (this.failureCallback) {
@@ -81,7 +83,7 @@ class ThreeDSecure {
         else {
             emit(PublicEvent.SCA_ERROR, { errors: [message], data: data });
         }
-        console.log(message);
+        this.setLoading(false);
     }
     setup() {
         const message = {
@@ -174,6 +176,16 @@ class ThreeDSecure {
         message.data.extra = Object.assign(Object.assign({}, extra), { sli: toFzSli(extra.eci) });
         this.headlessBridge.contentWindow.postMessage(message, '*');
     }
+    setLoading(loading = true) {
+        var _a;
+        if ((_a = this === null || this === void 0 ? void 0 : this.iframe) === null || _a === void 0 ? void 0 : _a.contentWindow) {
+            this.iframe.contentWindow.postMessage({
+                channel: 'sca',
+                subject: BridgeEvent.LOADING_THREE_D_SECURE,
+                data: loading
+            }, '*');
+        }
+    }
 }
 __decorate([
     logMethod()

package/dist/three_d_secure/utility/index.js

@@ -8,7 +8,7 @@ const threeDResponseData = (response) => {
         sli: toFzSli(response.eci),
         eci: response.eci,
         xid: response.xid,
-        ver: "veres" in response ? response === null || response === void 0 ? void 0 : response.veres : null,
+        ver: response === null || response === void 0 ? void 0 : response.veres,
         directoryServerTxnId: response.directory_server_txn_id,
         threedsVersion: response.threeds_version,
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fat-zebra/sdk",
-  "version": "1.5.16-beta.0",
+  "version": "1.5.16-beta.3",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -48,7 +48,16 @@
   },
   "overrides": {
     "test-exclude": "^7.0.1",
-    "minimatch": "^10.2.2"
+    "minimatch": "^10.2.2",
+    "jest-util": {
+      "picomatch": "^4.0.4"
+    },
+    "micromatch": {
+      "picomatch": "^2.3.2"
+    },
+    "anymatch": {
+      "picomatch": "^2.3.2"
+    }
   },
   "dependencies": {
     "ajv": "^8.17.1",