@fat-zebra/sdk 2.0.2-beta.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.js

@@ -34,12 +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/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,14 @@ __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,
                 },
             ];
@@ -350,7 +354,9 @@ __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,
@@ -387,6 +393,9 @@ __decorate([
         },
     })
 ], FatZebra.prototype, "reportRequestThreedsEnabledTimeout", null);
+__decorate([
+    logMethod()
+], FatZebra.prototype, "reportTokenizeCardResponse", null);
 __decorate([
     logMethod()
 ], FatZebra.prototype, "checkout", null);

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;
         }

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