@fat-zebra/sdk 1.5.5 → 1.5.6

package/dist/applepay/applepay.d.ts

@@ -1,20 +1,35 @@
 import { PaymentRequest } from './clients/apple-pay-client';
 import * as payNow from './clients/paynow-client';
-import { PostMessage } from '../shared/post-message-client';
+import { OptionalUrlValues, PaymentIntent } from "../shared/types";
+import { Environment } from "../shared/env";
+interface ApplePayLoadParams {
+    containerId: string;
+    paymentIntent: PaymentIntent;
+    options?: OptionalUrlValues;
+}
 export declare class ApplePay {
-    private merchantId;
     private canMakePayments;
     private iframe;
     private applePaySession;
     private postMessageClient;
+    private fzPayNowDomain;
+    private domain_name;
+    private username;
+    private environment;
+    private paymentIntent;
     constructor(config: {
-        iframe: HTMLIFrameElement;
+        environment: Environment;
+        paymentIntent: PaymentIntent;
+        username: string;
     });
-    checkApplePayEligibilty(): void;
-    notifyApplePayEligibiity(): void;
-    registerEventListener(): void;
+    load(config: ApplePayLoadParams): void;
+    getPayNowUrl(options?: OptionalUrlValues): string;
+    initialize(): Promise<void>;
+    checkApplePayEligibility(): void;
+    notifyApplePayEligibility(): void;
+    registerEventListener(): Promise<void>;
     purchase(request: PaymentRequest): Promise<void>;
     extractApplePaymentRequestParams(payload: any): PaymentRequest;
     extractPayNowPaymentAttributes(payload: any): payNow.PaymentAttributes;
-    sendMessage(payload: PostMessage): void;
 }
+export {};

package/dist/applepay/applepay.js

@@ -7,28 +7,85 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { createSession, getEligibilty, } from './clients/apple-pay-client';
+import { createSession, getEligibility, } from './clients/apple-pay-client';
 import * as payNow from './clients/paynow-client';
 import { PostMessageClient } from '../shared/post-message-client';
+import * as FatZebra from "../shared/types";
+import env from "../shared/env";
+import { emit } from "../shared/event-manager";
 const channel = 'applepay';
-const fzPayNowDomain = process.env.PAYNOW_BASE_URL;
+const merchantSessionPath = '/v2/apple_pay/auth';
+const purchaseTokenPath = '/v2/apple_pay/token';
 export class ApplePay {
     constructor(config) {
-        this.iframe = config.iframe;
+        this.paymentIntent = config.paymentIntent;
+        this.environment = config.environment;
+        this.fzPayNowDomain = env[this.environment].payNowUrl;
+        this.username = config.username;
+    }
+    load(config) {
+        var _a, _b;
+        this.domain_name = (_b = (_a = config === null || config === void 0 ? void 0 : config.options) === null || _a === void 0 ? void 0 : _a.domain_name) !== null && _b !== void 0 ? _b : window.location.hostname;
+        this.iframe = document.createElement('iframe');
+        document.getElementById(config.containerId).appendChild(this.iframe);
+        const applePayUrl = this.getPayNowUrl(config.options);
+        this.iframe.setAttribute("src", applePayUrl);
+        this.iframe.setAttribute("height", '100%');
+        this.iframe.setAttribute("width", '100%');
+        this.iframe.setAttribute('allow', 'payment');
         this.postMessageClient = new PostMessageClient({
-            channel: 'applepay',
-            target: this.iframe
+            channel,
+            target: this.iframe,
+            environment: this.environment,
+        });
+        this.iframe.onload = () => __awaiter(this, void 0, void 0, function* () {
+            yield this.initialize();
         });
-        this.registerEventListener();
-        this.checkApplePayEligibilty();
-        this.notifyApplePayEligibiity();
     }
-    checkApplePayEligibilty() {
-        if (getEligibilty()) {
+    getPayNowUrl(options) {
+        const { payment, verification } = this.paymentIntent;
+        const base = [
+            this.fzPayNowDomain,
+            'sdk',
+            'apple_pay',
+            this.username,
+            payment.reference,
+            payment.currency,
+            payment.amount,
+            verification
+        ].join('/');
+        const query = new URLSearchParams();
+        if (options === null || options === void 0 ? void 0 : options.allowed_card_networks) {
+            query.append('allowed_card_networks', options.allowed_card_networks.toString());
+        }
+        if (options === null || options === void 0 ? void 0 : options.allowed_card_types) {
+            query.append('allowed_card_types', options.allowed_card_types.toString());
+        }
+        if (options === null || options === void 0 ? void 0 : options.apple_button_type) {
+            query.append('apple_button_type', options.apple_button_type.toString());
+        }
+        if (options === null || options === void 0 ? void 0 : options.apple_button_style) {
+            query.append('apple_button_style', options.apple_button_style.toString());
+        }
+        if (options === null || options === void 0 ? void 0 : options.apple_button_locale) {
+            query.append('apple_button_locale', options.apple_button_locale.toString());
+        }
+        query.append('domain_name', this.domain_name);
+        return `${base}?${query.toString()}`;
+    }
+    initialize() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.registerEventListener();
+            this.checkApplePayEligibility();
+            this.notifyApplePayEligibility();
+        });
+    }
+    checkApplePayEligibility() {
+        if (getEligibility()) {
             this.canMakePayments = true;
         }
     }
-    notifyApplePayEligibiity() {
+    notifyApplePayEligibility() {
         const message = {
             channel,
             subject: 'eligibility',
@@ -39,10 +96,13 @@ export class ApplePay {
         this.postMessageClient.send(message);
     }
     registerEventListener() {
-        this.postMessageClient.setEventListeners({
-            'paymentrequest': (data) => __awaiter(this, void 0, void 0, function* () {
-                yield this.purchase(data);
-            })
+        return new Promise((resolve, _) => {
+            this.postMessageClient.setEventListeners({
+                'paymentrequest': (data) => __awaiter(this, void 0, void 0, function* () {
+                    yield this.purchase(data);
+                })
+            });
+            resolve();
         });
     }
     purchase(request) {
@@ -53,23 +113,44 @@ export class ApplePay {
             this.applePaySession.onvalidatemerchant = (event) => __awaiter(this, void 0, void 0, function* () {
                 let merchantSession;
                 try {
-                    merchantSession = yield payNow.getMerchantSession(event.validationURL, payNowPaymentAttributes);
+                    merchantSession = yield payNow.getMerchantSession(event.validationURL, Object.assign(Object.assign({}, payNowPaymentAttributes), { merchant: this.username, domain_name: this.domain_name, display_name: this.username }), `${this.fzPayNowDomain}${merchantSessionPath}`);
                 }
                 catch (e) {
-                    console.log('Unable to establish new merchant session');
+                    const payload = {
+                        data: 'Payment failed. Unable to establish session',
+                        errors: e,
+                    };
+                    emit(FatZebra.PublicEvent.PAYMENT_ERROR, payload);
                     return;
                 }
                 this.applePaySession.completeMerchantValidation(merchantSession);
             });
             this.applePaySession.onpaymentauthorized = (event) => __awaiter(this, void 0, void 0, function* () {
                 try {
-                    yield payNow.authorizePayment(Object.assign(Object.assign({}, payNowPaymentAttributes), event.payment.token));
+                    const result = yield payNow.authorizePayment(Object.assign(Object.assign({}, payNowPaymentAttributes), { merchant: this.username, token: event.payment.token, domain_name: this.domain_name }), `${this.fzPayNowDomain}${purchaseTokenPath}`);
                     this.applePaySession.completePayment(window.ApplePaySession.STATUS_SUCCESS);
+                    const payload = {
+                        message: 'Payment successful.',
+                        data: result,
+                    };
+                    emit(FatZebra.PublicEvent.PAYMENT_SUCCESS, payload);
                 }
                 catch (e) {
                     this.applePaySession.completePayment(window.ApplePaySession.STATUS_FAILURE);
+                    const payload = {
+                        data: 'Payment failed.',
+                        errors: ['Payment declined']
+                    };
+                    emit(FatZebra.PublicEvent.PAYMENT_ERROR, payload);
                 }
             });
+            this.applePaySession.oncancel = () => __awaiter(this, void 0, void 0, function* () {
+                const payload = {
+                    data: 'Payment failed.',
+                    errors: ['User cancelled payment.'],
+                };
+                emit(FatZebra.PublicEvent.PAYMENT_ERROR, payload);
+            });
             this.applePaySession.begin();
         });
     }
@@ -87,7 +168,4 @@ export class ApplePay {
         const { paymentAttributes } = payload;
         return paymentAttributes;
     }
-    sendMessage(payload) {
-        this.iframe.contentWindow.postMessage(payload, fzPayNowDomain);
-    }
 }

package/dist/applepay/clients/apple-pay-client.d.ts

@@ -1,7 +1,11 @@
 declare enum SupportedNetwork {
     Amex = "amex",
-    Visa = "visa",
-    MasterCard = "masterCard"
+    ChinaUnionPay = "chinaUnionPay",
+    Discover = "discover",
+    JCB = "jcb",
+    Maestro = "maestro",
+    MasterCard = "masterCard",
+    Visa = "visa"
 }
 declare enum MerchantCapability {
     Supports3DS = "supports3DS",
@@ -15,10 +19,10 @@ interface PaymentRequest {
     merchantCapabilities: MerchantCapability[];
     supportedNetworks: SupportedNetwork[];
     total: {
-        lable: string;
+        label: string;
         amount: string;
     };
 }
-declare const getEligibilty: () => boolean;
+declare const getEligibility: () => boolean;
 declare const createSession: (payload: PaymentRequest) => Promise<any>;
-export { createSession, type PaymentRequest, getEligibilty, MerchantCapability, SupportedNetwork, };
+export { createSession, type PaymentRequest, getEligibility, MerchantCapability, SupportedNetwork, };

package/dist/applepay/clients/apple-pay-client.js

@@ -7,11 +7,17 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+// valid schemes
+// https://developer.apple.com/documentation/apple_pay_on_the_web/applepaypaymentrequest/1916122-supportednetworks
 var SupportedNetwork;
 (function (SupportedNetwork) {
     SupportedNetwork["Amex"] = "amex";
-    SupportedNetwork["Visa"] = "visa";
+    SupportedNetwork["ChinaUnionPay"] = "chinaUnionPay";
+    SupportedNetwork["Discover"] = "discover";
+    SupportedNetwork["JCB"] = "jcb";
+    SupportedNetwork["Maestro"] = "maestro";
     SupportedNetwork["MasterCard"] = "masterCard";
+    SupportedNetwork["Visa"] = "visa";
 })(SupportedNetwork || (SupportedNetwork = {}));
 var MerchantCapability;
 (function (MerchantCapability) {
@@ -20,10 +26,10 @@ var MerchantCapability;
     MerchantCapability["SupportsDebit"] = "supportsDebit";
     MerchantCapability["SupportsEMV"] = "supportsEMV";
 })(MerchantCapability || (MerchantCapability = {}));
-const getEligibilty = () => {
+const getEligibility = () => {
     return window.ApplePaySession && window.ApplePaySession.canMakePayments();
 };
 const createSession = (payload) => __awaiter(void 0, void 0, void 0, function* () {
-    return yield new window.ApplePaySession(2, payload);
+    return yield new window.ApplePaySession(14, payload);
 });
-export { createSession, getEligibilty, MerchantCapability, SupportedNetwork, };
+export { createSession, getEligibility, MerchantCapability, SupportedNetwork, };

package/dist/applepay/clients/paynow-client.d.ts

@@ -8,10 +8,12 @@ export interface PaymentAttributes {
     merchant_id?: string;
     recurring: boolean;
     send_email?: string;
+    display_name?: string;
+    domain_name?: string;
 }
 export interface AuthorizePaymentRequestPayload extends PaymentAttributes {
     token: string;
 }
 export declare const objectToQueryString: (obj: any) => string;
-export declare const getMerchantSession: (validationUrl: string, paymentAttributes: PaymentAttributes) => Promise<any>;
-export declare const authorizePayment: (payload: AuthorizePaymentRequestPayload) => Promise<any>;
+export declare const getMerchantSession: (validationUrl: string, paymentAttributes: PaymentAttributes, baseUrl: string) => Promise<any>;
+export declare const authorizePayment: (payload: AuthorizePaymentRequestPayload, url: string) => Promise<any>;

package/dist/applepay/clients/paynow-client.js

@@ -7,9 +7,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-const paynowDomain = process.env.PAYNOW_BASE_URL;
-const merchantSessionPath = process.env.PAYNOW_APPLEPAY_AUTH_PATH;
-const purchaseTokenPath = process.env.PAYNOW_APPLEPAY_TOKEN_PATH;
 export const objectToQueryString = (obj) => {
     let queryString = [];
     for (const key of Object.keys(obj)) {
@@ -17,8 +14,7 @@ export const objectToQueryString = (obj) => {
     }
     return queryString.join("&");
 };
-export const getMerchantSession = (validationUrl, paymentAttributes) => __awaiter(void 0, void 0, void 0, function* () {
-    const baseUrl = `${paynowDomain}${merchantSessionPath}`;
+export const getMerchantSession = (validationUrl, paymentAttributes, baseUrl) => __awaiter(void 0, void 0, void 0, function* () {
     const queryString = `url=${validationUrl}&${objectToQueryString(paymentAttributes)}`;
     return new Promise((resolve, reject) => {
         const request = new XMLHttpRequest();
@@ -35,8 +31,7 @@ export const getMerchantSession = (validationUrl, paymentAttributes) => __awaite
         request.send();
     });
 });
-export const authorizePayment = (payload) => __awaiter(void 0, void 0, void 0, function* () {
-    const url = `${paynowDomain}${purchaseTokenPath}`;
+export const authorizePayment = (payload, url) => __awaiter(void 0, void 0, void 0, function* () {
     return new Promise((resolve, reject) => {
         const request = new XMLHttpRequest();
         request.onload = () => {

package/dist/applepay/types.d.ts

@@ -0,0 +1,15 @@
+import { Environment } from "../shared/env";
+import { PaymentIntent } from "../shared/types";
+import { MerchantCapability, SupportedNetwork } from "./clients/apple-pay-client";
+interface ApplePayOptions {
+    allowed_card_networks?: Array<SupportedNetwork>;
+    allowed_card_types?: Array<MerchantCapability>;
+    domain_name?: string;
+}
+interface ApplePayParams {
+    containerId: string;
+    environment: Environment;
+    paymentIntent: PaymentIntent;
+    options?: ApplePayOptions;
+}
+export { type ApplePayParams, type ApplePayOptions };

package/dist/applepay/types.js

@@ -0,0 +1 @@
+export {};

package/dist/click_to_pay/index.d.ts

@@ -22,6 +22,7 @@ declare class ClickToPay {
     private options;
     constructor(config: ClickToPayModuleConfig);
     load(config: ClickToPayLoadParams): void;
+    addMRTListener: (mrt: string) => void;
     getPayNowUrl(options?: {
         [key: string]: any;
     }): string;

package/dist/click_to_pay/index.js

@@ -1,5 +1,5 @@
 import { PostMessageClient } from "../shared/post-message-client";
-import { BridgeEvent, PublicEvent } from "../shared/types";
+import { BridgeEvent, Channel, PublicEvent } from "../shared/types";
 import * as util from '../shared/util';
 import { emit } from "../shared/event-manager";
 export const CLICK_TO_PAY_DEFAULT_OPTIONS = {
@@ -8,13 +8,23 @@ export const CLICK_TO_PAY_DEFAULT_OPTIONS = {
 };
 class ClickToPay {
     constructor(config) {
+        this.addMRTListener = (mrt) => {
+            const handlers = {};
+            handlers[BridgeEvent.CLICK_TO_PAY_REQUEST_MRT] = (data) => {
+                const message = {
+                    channel: Channel.CLICK_TO_PAY,
+                    subject: BridgeEvent.CLICK_TO_PAY_RETURN_MRT,
+                    data: {
+                        mrt
+                    },
+                };
+                this.postMessageClient.send(message);
+            };
+            this.postMessageClient.setEventListeners(handlers);
+        };
         this.paymentIntent = config.paymentIntent;
         this.username = config.username;
         this.test = config.test;
-        this.postMessageClient = new PostMessageClient({
-            channel: 'click_to_pay',
-            target: this.iframe
-        });
     }
     load(config) {
         this.options = config.options;
@@ -22,6 +32,12 @@ class ClickToPay {
         document.getElementById(config.containerId).appendChild(this.iframe);
         const payNowUrl = this.getPayNowUrl(config.options);
         this.iframe.setAttribute("src", payNowUrl);
+        this.postMessageClient = new PostMessageClient({
+            channel: Channel.CLICK_TO_PAY,
+            target: this.iframe
+        });
+        // Adding this before other crossframe event listener setup as we miss handling the MRT request event if we wait for this.iframe.onload to trigger
+        this.addMRTListener(this.options.mrt);
         this.iframe.onload = () => {
             this.setCrossFramesEventListeners();
         };
@@ -81,6 +97,24 @@ class ClickToPay {
                 data
             });
         };
+        handlers[PublicEvent.CLICK_TO_PAY_RESIZE] = (data) => {
+            emit(PublicEvent.CLICK_TO_PAY_RESIZE, {
+                message: 'Container resized.',
+                data
+            });
+        };
+        handlers[PublicEvent.CLICK_TO_PAY_DCF_LOADED] = (data) => {
+            emit(PublicEvent.CLICK_TO_PAY_DCF_LOADED, {
+                message: 'Digital checkout form loaded.',
+                data
+            });
+        };
+        handlers[PublicEvent.CLICK_TO_PAY_MRT] = (data) => {
+            emit(PublicEvent.CLICK_TO_PAY_MRT, {
+                message: 'MRT created.',
+                data
+            });
+        };
         this.postMessageClient.setEventListeners(handlers);
     }
     purchase() {

package/dist/click_to_pay/types.d.ts

@@ -1,9 +1,19 @@
 import { PaymentIntent } from "../shared/types";
 interface ClickToPayOptions {
-    hideConfirmButton?: boolean;
-    tokenizeOnly?: boolean;
+    auth?: boolean;
+    cardListButtonText?: string;
     css?: string;
     cssSignature?: string;
+    displayName?: string;
+    hideConfirmButton?: boolean;
+    hideManualEntryLink?: boolean;
+    returnPath?: string;
+    returnTarget?: string;
+    saveCard?: boolean;
+    sharedData?: string;
+    submitPaymentButtonText?: string;
+    tokenizeOnly?: boolean;
+    mrt?: string;
 }
 interface HppClickToPayParams {
     containerId: string;

package/dist/fatzebra.css

@@ -0,0 +1,91 @@
+.checkout-button-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 200px;
+}
+
+.iframe-checkout {
+    flex: 1;
+    border: none;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+}
+
+.iframe-foreground,
+.iframe-background {
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    flex-direction: column;
+}
+
+.iframe-foreground,
+.iframe-background {
+    position: fixed;
+}
+
+.iframe-foreground {
+    z-index: -1;
+}
+
+.iframe-background {
+    background: rgba(0, 0, 0, 0.5);
+}
+
+.iframe-foreground {
+    flex-grow: 1;
+    top: auto;
+    width: 100%;
+    max-width: 480px;
+    height: 80vh;
+    background-color: #ffffff;
+    border-radius: 25px 25px 0 0;
+}
+
+.slide-in .iframe-foreground {
+    transform: translateY(100vh);
+    transition: transform 0.4s ease, z-index 0.3s ease 0.4s;
+    z-index: -1;
+}
+
+.slide-in .iframe-background {
+    opacity: 0;
+    z-index: -1;
+    transition: opacity 0.3s ease, z-index 0.3s ease 0.3s;
+}
+
+.slide-in.show .iframe-foreground {
+    transform: none;
+    transition: transform 0.4s ease;
+    z-index: 100;
+}
+
+.slide-in.show .iframe-background {
+    opacity: 1;
+    z-index: 0;
+    transition: opacity 0.3s ease;
+}
+
+@media only screen and (min-width: 480px) {
+    .iframe-foreground {
+        margin: 0 auto;
+    }
+}
+
+@media only screen and (min-width: 768px) {
+    .iframe-foreground {
+        margin: 0;
+        width: 400px;
+        height: 100vh;
+        left: 0;
+    }
+
+    .slide-in .iframe-foreground {
+        transform: translateX(-400px);
+    }
+}

package/dist/hpp/hpp.js

@@ -31,6 +31,7 @@ class Hpp {
             this.iframe.onload = () => {
                 this.setCrossFramesEventListeners();
                 this.setPublicEventListeners();
+                emit(PublicEvent.HPP_READY);
             };
         };
         const payNowUrl = this.getPayNowUrl(config.options);