@fat-zebra/sdk 1.5.5 → 1.5.7-beta.0

package/.idea/fatzebra-js.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

package/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/fatzebra-js.iml" filepath="$PROJECT_DIR$/.idea/fatzebra-js.iml" />
+    </modules>
+  </component>
+</project>

package/.idea/prettier.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="PrettierConfiguration">
+    <option name="myConfigurationMode" value="AUTOMATIC" />
+  </component>
+</project>

package/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

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/applepaymanager.d.ts

@@ -0,0 +1,28 @@
+import { PaymentRequest } from './clients/apple-pay-client';
+import * as payNow from './clients/paynow-client';
+import { PostMessage } from '../shared/post-message-client';
+declare class ApplePayManager {
+    private merchantId;
+    private canMakePayments;
+    private iframe;
+    private applePaySession;
+    private postMessageClient;
+    private fzPayNowDomain;
+    private username?;
+    private token?;
+    constructor(config: {
+        iframe: HTMLIFrameElement;
+        fzPayNowDomain: string;
+        username?: string;
+        token?: 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 default ApplePayManager;

package/dist/applepay/applepaymanager.js

@@ -0,0 +1,115 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { createSession, getEligibilty, } from './clients/apple-pay-client';
+import * as payNow from './clients/paynow-client';
+import { PostMessageClient } from '../shared/post-message-client';
+// import * as process from "process";
+const channel = 'applepay';
+// const fzPayNowDomain = process.env.PAYNOW_BASE_URL
+// do the domain handling stuff better
+const paynowDomain = 'https://paynow.test';
+const merchantSessionPath = '/v2/apple_pay/payment_session';
+const purchaseTokenPath = '/v2/apple_pay/token';
+class ApplePayManager {
+    constructor(config) {
+        // if (!config.fzPayNowDomain) {
+        //   console.log('hitting i here')
+        //   this.fzPayNowDomain = process?.env?.PAYNOW_BASE_URL;
+        // } else {
+        this.fzPayNowDomain = config.fzPayNowDomain;
+        this.username = config.username;
+        this.token = config.token;
+        // }
+        this.iframe = config.iframe;
+        this.postMessageClient = new PostMessageClient({
+            channel: 'applepay',
+            target: this.iframe
+        });
+        this.initialize();
+    }
+    initialize() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.registerEventListener();
+            this.checkApplePayEligibility();
+            this.notifyApplePayEligibility();
+        });
+    }
+    checkApplePayEligibility() {
+        if (getEligibilty()) {
+            this.canMakePayments = true;
+        }
+    }
+    notifyApplePayEligibility() {
+        const message = {
+            channel,
+            subject: 'eligibility',
+            data: {
+                canMakePayments: this.canMakePayments
+            }
+        };
+        this.postMessageClient.send(message);
+    }
+    registerEventListener() {
+        return new Promise((resolve, reject) => {
+            this.postMessageClient.setEventListeners({
+                'paymentrequest': (data) => __awaiter(this, void 0, void 0, function* () {
+                    yield this.purchase(data);
+                })
+            });
+            resolve();
+        });
+    }
+    purchase(request) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const applePayPaymentRequest = this.extractApplePaymentRequestParams(request);
+            const payNowPaymentAttributes = this.extractPayNowPaymentAttributes(request);
+            this.applePaySession = yield createSession(applePayPaymentRequest);
+            this.applePaySession.onvalidatemerchant = (event) => __awaiter(this, void 0, void 0, function* () {
+                let merchantSession;
+                try {
+                    merchantSession = yield payNow.getMerchantSession(event.validationURL, Object.assign(Object.assign({}, payNowPaymentAttributes), { merchant: this.username, domain_name: window.location.hostname, display_name: this.username }), `${paynowDomain}${merchantSessionPath}`, this.username, this.token);
+                }
+                catch (e) {
+                    console.log('Unable to establish new merchant session');
+                    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), { merchant: this.username, token: event.payment.token }), `${paynowDomain}${purchaseTokenPath}`);
+                    this.applePaySession.completePayment(window.ApplePaySession.STATUS_SUCCESS);
+                }
+                catch (e) {
+                    this.applePaySession.completePayment(window.ApplePaySession.STATUS_FAILURE);
+                }
+            });
+            this.applePaySession.begin();
+        });
+    }
+    extractApplePaymentRequestParams(payload) {
+        const { countryCode, currencyCode, merchantCapabilities, supportedNetworks, total, } = payload;
+        return {
+            countryCode,
+            currencyCode,
+            merchantCapabilities,
+            supportedNetworks,
+            total,
+        };
+    }
+    extractPayNowPaymentAttributes(payload) {
+        const { paymentAttributes } = payload;
+        return paymentAttributes;
+    }
+    sendMessage(payload) {
+        this.iframe.contentWindow.postMessage(payload, this.fzPayNowDomain);
+    }
+}
+export default ApplePayManager;

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,27 +1,45 @@
 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 = {
     iframe: true,
     postmessage: true,
 };
+const OPTIONS_EXCLUDED_FROM_URL_PARAMS = ["mrt"];
 class ClickToPay {
     constructor(config) {
+        this.addMRTListener = (mrt) => {
+            const handlers = {};
+            handlers[PublicEvent.CLICK_TO_PAY_INITIAL_MRT_REQUEST] = (data) => {
+                const message = {
+                    channel: Channel.CLICK_TO_PAY,
+                    subject: PublicEvent.CLICK_TO_PAY_INITIAL_MRT_RESPONSE,
+                    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;
         this.iframe = document.createElement('iframe');
         document.getElementById(config.containerId).appendChild(this.iframe);
-        const payNowUrl = this.getPayNowUrl(config.options);
+        const urlParams = Object.fromEntries(Object.entries(config.options).filter(([key]) => !OPTIONS_EXCLUDED_FROM_URL_PARAMS.includes(key)));
+        const payNowUrl = this.getPayNowUrl(urlParams);
         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 +99,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;