@fat-zebra/sdk 1.5.16-beta.2 → 1.5.16-beta.5

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,8 +38,8 @@ class Hpp {
             // initial headless load
             this.ThreeDSecure = new ThreeDSecure({
                 bridge: this.headless,
-                iframe: this.iframe, // to handle loading spinner
-                environment: process.env.API_ENV
+                environment: process.env.API_ENV,
+                iframe: this.iframe
             });
             this.setCrossFramesEventListeners();
             this.setPublicEventListeners();
@@ -54,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
@@ -61,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);
@@ -114,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.',
@@ -140,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
                 }
@@ -150,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 {
@@ -207,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);
@@ -247,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,17 @@ 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";
+import { BridgeEvent } from "../shared/types";
+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 +39,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 +59,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,
@@ -60,6 +108,19 @@ const useMessage = ({ paymentIntent, options, handlers, sca }) => {
             yield handleTokenizeCardResponse(event.data.data);
         }
     });
+    useEffect(() => {
+        const message = {
+            channel: 'sca',
+            subject: BridgeEvent.READY,
+            data: {}
+        };
+        const iframe = document.querySelector('[name="renderIframe"]');
+        if (!iframe)
+            return;
+        iframe.onload = () => {
+            iframe.contentWindow.postMessage(message, '*');
+        };
+    }, []);
     useEffect(() => {
         window.addEventListener("message", messageHandler);
         return () => {

package/dist/three_d_secure/index.d.ts

@@ -26,7 +26,7 @@ declare class ThreeDSecure {
         paymentIntent: PaymentIntent;
         cardToken: string;
         merchantUsername: string;
-        challengeWindowSize: ChallengeWindowSize;
+        challengeWindowSize?: ChallengeWindowSize;
         test: boolean;
     }): void;
     setupResponse(data: DeviceDataCollectionMessage): void;

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