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

package/dist/hpp/hpp.d.ts

@@ -50,16 +50,10 @@ declare class Hpp {
     private postMessageClient;
     private test;
     private hppOptions;
-    private headlessLoaded;
-    private headlessPreviouslyLoaded;
-    private iframeLoaded;
     private isThreeDSecureEnabled;
     private challengeWindowSize;
     private scaHandler;
-    private crossFrameListenersBound;
-    private publicEventListenersBound;
     constructor(config: HppModuleConfig);
-    setListenersAndEmitReady(): void;
     load(config: HppLoadParams): void;
     purchase(): void;
     getPayNowUrl(options?: {
@@ -71,6 +65,7 @@ declare class Hpp {
     createPurchase(extra?: {
         [key: string]: boolean | string;
     }): void;
-    private reportHppStatus;
+    private reportIframeLoaded;
+    private reportTokenizeCardResponse;
 }
 export { Hpp, type HppLoadParams, HPP_DEFAULT_OPTIONS, };

package/dist/hpp/hpp.js

@@ -40,66 +40,33 @@ class Hpp {
         this.sca = config.sca;
         this.test = config.test;
         this.version = config.version || 2;
-        this.headlessLoaded = false;
-        this.headlessPreviouslyLoaded = false;
-        this.iframeLoaded = false;
         this.threeDSecure = config.threeDSecure;
-        this.crossFrameListenersBound = false;
-        this.publicEventListenersBound = false;
         this.isThreeDSecureEnabled = (_a = config.isThreeDSecureEnabled) !== null && _a !== void 0 ? _a : false;
         configureLogger({
             baseUrl: env[process.env.API_ENV].payNowUrl
         });
     }
-    setListenersAndEmitReady() {
-        this.reportHppStatus(this);
-        if (!this.crossFrameListenersBound) {
-            this.setCrossFramesEventListeners();
-            this.crossFrameListenersBound = true;
-        }
-        if (this.headlessLoaded && this.iframeLoaded) {
-            if (!this.publicEventListenersBound && !this.isThreeDSecureEnabled) {
-                this.setPublicEventListeners();
-                this.publicEventListenersBound = true;
-            }
-            emit(PublicEvent.HPP_READY);
-        }
-        else if (this.headlessPreviouslyLoaded && this.iframeLoaded) {
-            // 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) {
         var _a;
         this.challengeWindowSize = (_a = config.options) === null || _a === void 0 ? void 0 : _a.challengeWindowSize;
         setTransactionReference(config.paymentIntent.payment.reference);
         this.hppOptions = config.options || {};
-        const { el, isExisting } = bridge.load2(process.env.PAYNOW_BRIDGE_URL);
+        const { el } = 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.addEventListener('load', () => {
-            this.headlessLoaded = true;
-            this.setListenersAndEmitReady();
-        });
+        this.setCrossFramesEventListeners();
         this.iframe.onload = () => {
-            this.iframeLoaded = true;
-            this.setListenersAndEmitReady();
+            this.reportIframeLoaded();
+            if (!this.isThreeDSecureEnabled) {
+                this.setPublicEventListeners();
+            }
+            emit(PublicEvent.HPP_READY);
         };
-        if (this.headlessPreviouslyLoaded) {
-            this.headlessLoaded = true;
-            this.setListenersAndEmitReady();
-        }
         const payNowUrl = this.getPayNowUrl(config.options);
         this.iframe.setAttribute("src", payNowUrl);
         this.iframe.setAttribute('allow', 'payment');
@@ -140,6 +107,7 @@ class Hpp {
         const handlers = {};
         handlers[BridgeEvent.TOKENIZE_CARD_RESPONSE] = (data) => {
             var _a;
+            this.reportTokenizeCardResponse(data);
             if (data.source === 'verifyCard')
                 return;
             if (data.errors) {
@@ -250,14 +218,11 @@ class Hpp {
         on(PublicEvent.SCA_SUCCESS, this.scaHandler);
     }
     destroy() {
-        if (this.publicEventListenersBound && this.scaHandler) {
+        var _a;
+        if (this.scaHandler) {
             off(PublicEvent.SCA_SUCCESS, this.scaHandler);
-            this.publicEventListenersBound = false;
-        }
-        if (this.crossFrameListenersBound) {
-            this.postMessageClient.removeEventListeners();
-            this.crossFrameListenersBound = false;
         }
+        (_a = this.postMessageClient) === null || _a === void 0 ? void 0 : _a.removeEventListeners();
     }
     createPurchase(extra = null) {
         console.log('createPurchase');
@@ -280,7 +245,11 @@ class Hpp {
         }
         this.headless.contentWindow.postMessage(message, '*');
     }
-    reportHppStatus(hpp) {
+    reportIframeLoaded() {
+        console.log('Iframe loaded');
+    }
+    reportTokenizeCardResponse(data) {
+        console.log('Tokenize card response received');
     }
 }
 __decorate([
@@ -293,20 +262,9 @@ __decorate([
     logMethod()
 ], Hpp.prototype, "createPurchase", null);
 __decorate([
-    logMethod({
-        mapArgs: (args) => {
-            const hpp = args[0];
-            return [
-                {
-                    crossFrameListenersBound: hpp.crossFrameListenersBound,
-                    publicEventListenersBound: hpp.publicEventListenersBound,
-                    isThreeDSecureEnabled: hpp.isThreeDSecureEnabled,
-                    headlessLoaded: hpp.headlessLoaded,
-                    headlessPreviouslyLoaded: hpp.headlessPreviouslyLoaded,
-                    iframeLoaded: hpp.iframeLoaded,
-                },
-            ];
-        },
-    })
-], Hpp.prototype, "reportHppStatus", null);
+    logMethod()
+], Hpp.prototype, "reportIframeLoaded", null);
+__decorate([
+    logMethod()
+], Hpp.prototype, "reportTokenizeCardResponse", null);
 export { Hpp, HPP_DEFAULT_OPTIONS, };

package/dist/logging/instrument.d.ts

@@ -2,6 +2,7 @@ export type LogOptions<A extends unknown[]> = {
     endpoint?: string | ((...args: A) => string);
     mapArgs?: (args: A) => unknown;
     enabled?: () => boolean;
+    className?: string;
 };
 type LoggerConfig = {
     baseUrl?: string;

package/dist/logging/instrument.js

@@ -17,7 +17,6 @@ function sendLog(endpoint, payload) {
                 void axios.post(endpoint, payload);
         }
         else {
-            // fallback for non-browser or older environments
             void axios.post(endpoint, payload);
         }
     }
@@ -35,11 +34,14 @@ export function instrumentFunction(methodName, fn, opts = {}) {
             const endpoint = typeof opts.endpoint === "function"
                 ? opts.endpoint(...args)
                 : (_a = opts.endpoint) !== null && _a !== void 0 ? _a : defaultEndpoint();
+            // evaluate mapArgs(args) before constructing payload so any side effects in mapArgs (like setTransactionReference) are propagated
+            const mappedArgs = mapArgs(args);
             const payload = {
                 username: getLoggerUsername(),
                 reference: getTransactionReference(),
+                className: opts.className,
                 method: methodName,
-                arguments: mapArgs(args),
+                arguments: mappedArgs,
                 timestamp: new Date().toISOString(),
             };
             sendLog(endpoint, payload);

package/dist/logging/logMethod.js

@@ -31,13 +31,16 @@ import { instrumentFunction } from "./instrument";
 // Decorator factory
 export function logMethod(opts = {}) {
     return function (target, propertyKey, descriptor) {
-        var _a;
+        var _a, _b;
         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) => {
+        const className = typeof target === "function"
+            ? target.name || "UnknownClass"
+            : ((_a = target === null || target === void 0 ? void 0 : target.constructor) === null || _a === void 0 ? void 0 : _a.name) || "UnknownClass";
+        descriptor.value = instrumentFunction(propertyKey, original, Object.assign(Object.assign({}, opts), { className, mapArgs: (_b = opts.mapArgs) !== null && _b !== void 0 ? _b : ((args) => args.map((a) => {
                 if (!a || typeof a !== "object")
                     return a;
                 return Object.assign(Object.assign({}, a), { js_sdk: true });

package/dist/main.d.ts

@@ -45,6 +45,7 @@ export default class FatZebra {
     private setThreeDSecureListeners;
     private reportThreeDSecureFetched;
     private reportRequestThreedsEnabledTimeout;
+    private reportTokenizeCardResponse;
     checkout(): void;
     on(event: PublicEvent, callback: (e: any) => void): void;
     off(event: PublicEvent, callback: (e: any) => void): void;

package/dist/main.js

@@ -103,6 +103,7 @@ export default class FatZebra {
         });
         const handlers = {};
         handlers[BridgeEvent.TOKENIZE_CARD_RESPONSE] = (data) => {
+            this.reportTokenizeCardResponse(data);
             callback(data);
         };
         postMessageClient.setEventListeners(handlers, { once: true });
@@ -158,7 +159,6 @@ export default class FatZebra {
                 });
                 return;
             }
-            setTransactionReference(params.paymentIntent.payment.reference);
             yield this.authReady;
             switch (params.paymentMethod.type) {
                 case PaymentMethodType.CARD: {
@@ -307,6 +307,9 @@ export default class FatZebra {
     reportRequestThreedsEnabledTimeout(paymentIntent) {
         console.log('3DS enabled check timed out');
     }
+    reportTokenizeCardResponse(data) {
+        console.log('Tokenize card response received');
+    }
     checkout() {
         window.HPP.purchase();
     }
@@ -334,13 +337,15 @@ __decorate([
 __decorate([
     logMethod({
         mapArgs: (args) => {
-            var _a;
+            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);
             return [
                 {
                     merchant_username: window.MerchantUsername,
                     payment_intent: params === null || params === void 0 ? void 0 : params.paymentIntent,
-                    payment_method: (_a = params === null || params === void 0 ? void 0 : params.paymentMethod) === null || _a === void 0 ? void 0 : _a.type,
+                    payment_method: (_c = params === null || params === void 0 ? void 0 : params.paymentMethod) === null || _c === void 0 ? void 0 : _c.type,
+                    options: params === null || params === void 0 ? void 0 : params.options,
                 },
             ];
         },
@@ -349,16 +354,22 @@ __decorate([
 __decorate([
     logMethod({
         mapArgs: (args) => {
+            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);
             return [
                 {
                     payment_intent: params.paymentIntent,
-                    version: params.version
+                    version: params.version,
+                    options: params.options
                 },
             ];
         },
     })
 ], FatZebra.prototype, "renderPaymentsPage", null);
+__decorate([
+    logMethod()
+], FatZebra.prototype, "renderClickToPay", null);
 __decorate([
     logMethod({
         mapArgs: (args) => {
@@ -382,4 +393,10 @@ __decorate([
         },
     })
 ], FatZebra.prototype, "reportRequestThreedsEnabledTimeout", null);
+__decorate([
+    logMethod()
+], FatZebra.prototype, "reportTokenizeCardResponse", null);
+__decorate([
+    logMethod()
+], FatZebra.prototype, "checkout", null);
 export { FatZebra, };

package/dist/react/useMessage.js

@@ -46,7 +46,7 @@ const useMessage = ({ paymentIntent, options, handlers, sca, config }) => {
                 cardToken: data.token,
                 merchantUsername: config.username,
                 test: config.environment !== Environment.production,
-                tokenizeOnly: config.options.tokenize_only,
+                tokenizeOnly: true,
                 iframe: iframe
             });
             return;

package/dist/sca/index.js

@@ -236,7 +236,6 @@ __decorate([
                 {
                     message: args[0],
                     data: args[1],
-                    source: 'sca'
                 },
             ];
         },
@@ -249,7 +248,6 @@ __decorate([
                 {
                     message: args[0],
                     data: args[1],
-                    source: 'sca'
                 },
             ];
         },
@@ -262,7 +260,9 @@ __decorate([
             return [
                 {
                     source: params.source,
-                    payment_intent: params.paymentIntent
+                    payment_intent: params.paymentIntent,
+                    card_token: params.cardToken,
+                    challenge_window_size: params.challengeWindowSize,
                 },
             ];
         },

package/dist/three_d_secure/index.d.ts

@@ -9,6 +9,15 @@ interface ThreeDSecureConfig {
     bridge: HTMLIFrameElement;
     iframe?: HTMLIFrameElement;
 }
+interface ThreeDSecureRunProps {
+    paymentIntent: PaymentIntent;
+    cardToken: string;
+    merchantUsername: string;
+    challengeWindowSize?: ChallengeWindowSize;
+    tokenizeOnly?: boolean;
+    iframe?: HTMLIFrameElement;
+    test: boolean;
+}
 declare class ThreeDSecure {
     private headlessBridge;
     private cybersourceReferenceId;
@@ -23,15 +32,7 @@ declare class ThreeDSecure {
     private tokenizeOnly;
     private iframe?;
     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;
+    run({ paymentIntent, cardToken, merchantUsername, challengeWindowSize, test, tokenizeOnly, iframe }: ThreeDSecureRunProps): void;
     setupResponse(data: DeviceDataCollectionMessage): void;
     messageHandlers(): {
         [key: string]: (data: any) => void;

package/dist/three_d_secure/index.js

@@ -102,7 +102,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_FULL_PAGE, device_channel: "BROWSER" }), snakeCaseKeys(DeviceDataCollection.collectDeviceData()))
+            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()))
         };
         this.headlessBridge.contentWindow.postMessage(message, '*');
     }
@@ -115,7 +115,7 @@ class ThreeDSecure {
                 stepUpUrl: data.step_up_url,
                 cardToken: this.cardToken,
                 accessToken: data.access_token,
-                challengeWindowSize: (_a = this.challengeWindowSize) !== null && _a !== void 0 ? _a : ChallengeWindowSize.SIZE_FULL_PAGE,
+                challengeWindowSize: (_a = this.challengeWindowSize) !== null && _a !== void 0 ? _a : ChallengeWindowSize.SIZE_500X600,
             });
             return;
         }
@@ -197,6 +197,21 @@ class ThreeDSecure {
         }
     }
 }
+__decorate([
+    logMethod({
+        mapArgs: (args) => {
+            const params = args[0];
+            return [
+                {
+                    payment_intent: params.paymentIntent,
+                    card_token: params.cardToken,
+                    challenge_window_size: params.challengeWindowSize,
+                    tokenize_only: params.tokenizeOnly,
+                },
+            ];
+        },
+    })
+], ThreeDSecure.prototype, "run", null);
 __decorate([
     logMethod({
         mapArgs: (args) => {
@@ -204,7 +219,6 @@ __decorate([
                 {
                     message: args[0],
                     data: args[1],
-                    source: 'three_d_secure'
                 },
             ];
         },
@@ -217,7 +231,6 @@ __decorate([
                 {
                     message: args[0],
                     data: args[1],
-                    source: 'three_d_secure'
                 },
             ];
         },

package/dist/three_d_secure/utility/index.js

@@ -1,5 +1,6 @@
 import { toFzSli } from "../../sca/eci-mappings";
 const threeDResponseData = (response) => {
+    var _a;
     return {
         // CAVV: Visa & Amex only
         // AAV: Mastercard only, known as UCAF
@@ -8,7 +9,7 @@ const threeDResponseData = (response) => {
         sli: toFzSli(response.eci),
         eci: response.eci,
         xid: response.xid,
-        ver: response === null || response === void 0 ? void 0 : response.veres,
+        ver: (_a = response === null || response === void 0 ? void 0 : response.veres) !== null && _a !== void 0 ? _a : null,
         directoryServerTxnId: response.directory_server_txn_id,
         threedsVersion: response.threeds_version,
     };

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

@@ -13,5 +13,6 @@ declare class ThreeDSecureChallengeWindow {
         cardToken: string;
         challengeWindowSize?: ChallengeWindowSize;
     }): void;
+    private static reportChallengeIframeError;
 }
 export default ThreeDSecureChallengeWindow;

package/dist/three_d_secure/utility/three_d_secure_challenge_window.js

@@ -1,3 +1,10 @@
+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 { logMethod } from "../../logging/logMethod";
 import { ChallengeWindowSize } from "../../sca/types";
 class ThreeDSecureChallengeWindow {
     // Treat these as the *iframe viewport* sizes per 3DS spec.
@@ -134,7 +141,7 @@ class ThreeDSecureChallengeWindow {
         Object.assign(iframe.style, { border: "0", display: "block" });
         iframe.setAttribute("sandbox", "allow-scripts allow-same-origin allow-forms allow-popups allow-top-navigation-by-user-activation");
         iframe.addEventListener("load", () => console.log("✅ step-up iframe loaded"));
-        iframe.addEventListener("error", () => console.log("❌ step-up iframe error"));
+        iframe.addEventListener("error", ThreeDSecureChallengeWindow.reportChallengeIframeError);
         frameWrap.appendChild(iframe);
         // Hidden POST form -> targets the iframe
         let form = document.getElementById(ThreeDSecureChallengeWindow.CHALLENGE_FORM_ID);
@@ -162,9 +169,18 @@ class ThreeDSecureChallengeWindow {
         overlay.style.display = "flex";
         form.submit();
     }
+    static reportChallengeIframeError() {
+        console.log("❌ step-up iframe error");
+    }
 }
 ThreeDSecureChallengeWindow.OVERLAY_ID = "three_d_secure_challenge_overlay";
 ThreeDSecureChallengeWindow.CONTENT_ID = "three_d_secure_challenge_content";
 ThreeDSecureChallengeWindow.FRAME_WRAP_ID = "three_d_secure_challenge_frame_wrap";
 ThreeDSecureChallengeWindow.CHALLENGE_FORM_ID = "three_d_secure_challenge_form";
+__decorate([
+    logMethod()
+], ThreeDSecureChallengeWindow, "showChallengeIframe", null);
+__decorate([
+    logMethod()
+], ThreeDSecureChallengeWindow, "reportChallengeIframeError", null);
 export default ThreeDSecureChallengeWindow;

package/package.json

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