@coinflowlabs/angular 1.0.1 → 1.0.3

package/README.md

@@ -4,6 +4,20 @@ This library was generated with [Angular CLI](https://github.com/angular/angular
 
 # Changelog
 
+## 1.0.2
+
+- Added `allowedPaymentMethods` to `CoinflowPurchase`
+- Options are:
+  - 'card' = Credit and debit cards
+  - 'ach' = ACH bank account transfers
+  - 'fasterPayments' = UK Faster Payments (GBP Bank Transfers)
+  - 'sepa' = SEPA bank account transfers (EUR Bank Transfers)
+  - 'pix' = Pix bank account transfers (BRL Bank Transfers)
+  - 'usdc' = USDC
+  - 'googlePay' = Google Pay
+  - 'applePay' = Apple Pay
+  - 'credits' = Credits
+
 ## 1.0.1
 
 - Allow copy to clipboard for Coinflow Iframe
@@ -30,6 +44,10 @@ or
 }
 ```
 
+## 0.3.6
+
+- Added 3DS Challenge Handling to the standalone Google Pay button
+
 ## 0.3.5
 
 - Added cleanup code to handle arg changes in `CoinflowCvvOnlyInputComponent`

package/fesm2022/coinflowlabs-angular.mjs

@@ -23,6 +23,18 @@ var ThreeDsChallengePreference;
     ThreeDsChallengePreference["Frictionless"] = "Frictionless";
     ThreeDsChallengePreference["Challenge"] = "Challenge";
 })(ThreeDsChallengePreference || (ThreeDsChallengePreference = {}));
+var PaymentMethods;
+(function (PaymentMethods) {
+    PaymentMethods["card"] = "card";
+    PaymentMethods["ach"] = "ach";
+    PaymentMethods["fasterPayments"] = "fasterPayments";
+    PaymentMethods["sepa"] = "sepa";
+    PaymentMethods["pix"] = "pix";
+    PaymentMethods["usdc"] = "usdc";
+    PaymentMethods["googlePay"] = "googlePay";
+    PaymentMethods["applePay"] = "applePay";
+    PaymentMethods["credits"] = "credits";
+})(PaymentMethods || (PaymentMethods = {}));
 var CardType;
 (function (CardType) {
     CardType["VISA"] = "VISA";
@@ -75,6 +87,9 @@ class CoinflowUtils {
     static getCoinflowBaseUrl(env) {
         if (!env || env === 'prod')
             return 'https://coinflow.cash';
+        // @ts-expect-error This is for testing
+        if (env === 'ngrok')
+            return 'https://coinflow.ngrok.app';
         if (env === 'local')
             return 'http://localhost:3000';
         return `https://${env}.coinflow.cash`;
@@ -86,7 +101,7 @@ class CoinflowUtils {
             return 'http://localhost:5000';
         return `https://api-${env}.coinflow.cash`;
     }
-    static getCoinflowUrl({ walletPubkey, sessionKey, route, routePrefix, env, subtotal, transaction, blockchain = 'solana', webhookInfo, email, loaderBackground, handleHeightChange, bankAccountLinkRedirect, additionalWallets, nearDeposit, chargebackProtectionData, merchantCss, color, rent, lockDefaultToken, tokens, planCode, disableApplePay, disableGooglePay, customerInfo, settlementType, lockAmount, nativeSolToConvert, theme, usePermit, transactionSigner, authOnly, deviceId, jwtToken, origins, threeDsChallengePreference, supportEmail, destinationAuthKey, }) {
+    static getCoinflowUrl({ walletPubkey, sessionKey, route, routePrefix, env, subtotal, transaction, blockchain = 'solana', webhookInfo, email, loaderBackground, handleHeightChangeId, bankAccountLinkRedirect, additionalWallets, nearDeposit, chargebackProtectionData, merchantCss, color, rent, lockDefaultToken, tokens, planCode, disableApplePay, disableGooglePay, customerInfo, settlementType, lockAmount, nativeSolToConvert, theme, usePermit, transactionSigner, authOnly, deviceId, jwtToken, origins, threeDsChallengePreference, supportEmail, destinationAuthKey, allowedPaymentMethods, }) {
         const prefix = routePrefix
             ? `/${routePrefix}/${blockchain}`
             : `/${blockchain}`;
@@ -133,8 +148,8 @@ class CoinflowUtils {
         if (loaderBackground) {
             url.searchParams.append('loaderBackground', loaderBackground);
         }
-        if (handleHeightChange) {
-            url.searchParams.append('useHeightChange', 'true');
+        if (handleHeightChangeId) {
+            url.searchParams.append('useHeightChange', handleHeightChangeId.toString());
         }
         if (bankAccountLinkRedirect) {
             url.searchParams.append('bankAccountLinkRedirect', bankAccountLinkRedirect);
@@ -187,6 +202,8 @@ class CoinflowUtils {
             url.searchParams.append('jwtToken', jwtToken);
         if (origins)
             url.searchParams.append('origins', LZString.compressToEncodedURIComponent(JSON.stringify(origins)));
+        if (allowedPaymentMethods)
+            url.searchParams.append('allowedPaymentMethods', allowedPaymentMethods.join(','));
         if (threeDsChallengePreference)
             url.searchParams.append('threeDsChallengePreference', threeDsChallengePreference);
         if (destinationAuthKey)
@@ -268,6 +285,25 @@ class CoinflowUtils {
         }
     }
 }
+function getCustomerName(info) {
+    if (!info)
+        return undefined;
+    let firstName, lastName;
+    if ('name' in info && info.name) {
+        firstName = info.name.split(' ')[0];
+        lastName = info.name.split(' ').slice(1).join(' ');
+    }
+    if ('firstName' in info && info.firstName)
+        firstName = info.firstName;
+    if ('lastName' in info && info.lastName)
+        lastName = info.lastName;
+    if (firstName && lastName)
+        return {
+            firstName,
+            lastName,
+        };
+    return undefined;
+}
 
 var IFrameMessageMethods;
 (function (IFrameMessageMethods) {
@@ -301,7 +337,7 @@ function getWalletPubkey(input) {
     }
     return null;
 }
-function handleIFrameMessage(rawMessage, handlers) {
+function handleIFrameMessage(rawMessage, handlers, handleHeightChangeId) {
     let walletCall;
     try {
         walletCall = JSON.parse(rawMessage);
@@ -324,7 +360,7 @@ function handleIFrameMessage(rawMessage, handlers) {
             return handlers.handleSignTransaction(data);
         case IFrameMessageMethods.SendTransaction:
             return handlers.handleSendTransaction(data);
-        case IFrameMessageMethods.HeightChange:
+        case IFrameMessageMethods.HeightChange + ':' + handleHeightChangeId:
             if (!handlers.handleHeightChange)
                 return;
             return handlers.handleHeightChange(data);
@@ -653,7 +689,7 @@ class CoinflowIFrameComponent {
         if (!event.origin.includes(CoinflowUtils.getCoinflowBaseUrl(this.iframeProps.env)))
             return;
         this.messageEvent.emit(event);
-        const promise = handleIFrameMessage(event.data, this.messageHandlers);
+        const promise = handleIFrameMessage(event.data, this.messageHandlers, this.iframeProps.handleHeightChangeId);
         if (!promise)
             return;
         promise
@@ -665,19 +701,19 @@ class CoinflowIFrameComponent {
             return;
         this.iframe.nativeElement.contentWindow.postMessage(message, '*');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CoinflowIFrameComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: CoinflowIFrameComponent, isStandalone: true, selector: "lib-coinflow-iframe", inputs: { iframeProps: "iframeProps", messageHandlers: "messageHandlers" }, outputs: { messageEvent: "messageEvent" }, host: { listeners: { "window:message": "onPostMessage($event)" } }, viewQueries: [{ propertyName: "iframe", first: true, predicate: ["iframe"], descendants: true }], ngImport: i0, template: ` <iframe
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: CoinflowIFrameComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.1", type: CoinflowIFrameComponent, isStandalone: true, selector: "lib-coinflow-iframe", inputs: { iframeProps: "iframeProps", messageHandlers: "messageHandlers" }, outputs: { messageEvent: "messageEvent" }, host: { listeners: { "window:message": "onPostMessage($event)" } }, viewQueries: [{ propertyName: "iframe", first: true, predicate: ["iframe"], descendants: true }], ngImport: i0, template: ` <iframe
     width="100%"
     height="100%"
     #iframe
-    scrolling="{{ iframeProps?.handleHeightChange ? 'no' : 'yes' }}"
+    scrolling="{{ iframeProps?.handleHeightChangeId ? 'no' : 'yes' }}"
     allow="payment;camera;clipboard-write"
     title="withdraw"
     frameBorder="0"
     [src]="dynamicUrl"
   ></iframe>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CoinflowIFrameComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: CoinflowIFrameComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-coinflow-iframe',
@@ -687,7 +723,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
     width="100%"
     height="100%"
     #iframe
-    scrolling="{{ iframeProps?.handleHeightChange ? 'no' : 'yes' }}"
+    scrolling="{{ iframeProps?.handleHeightChangeId ? 'no' : 'yes' }}"
     allow="payment;camera;clipboard-write"
     title="withdraw"
     frameBorder="0"
@@ -714,17 +750,19 @@ class CoinflowPurchaseComponent {
         this.messageHandlers = getHandlers(this.purchaseProps);
         this.messageHandlers.handleHeightChange =
             this.purchaseProps.handleHeightChange;
+        const handleHeightChangeId = Math.random().toString(16).substring(2);
         this.iframeProps = {
             ...this.purchaseProps,
             walletPubkey,
             route: `/purchase-v2/${this.purchaseProps?.merchantId}`,
             transaction: CoinflowUtils.getTransaction(this.purchaseProps),
+            handleHeightChangeId,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CoinflowPurchaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: CoinflowPurchaseComponent, isStandalone: true, selector: "lib-coinflow-purchase", inputs: { purchaseProps: "purchaseProps" }, ngImport: i0, template: ' <lib-coinflow-iframe ng-if="iframeProps && messageHandlers" [iframeProps]="iframeProps!" [messageHandlers]="messageHandlers!"></lib-coinflow-iframe> ', isInline: true, dependencies: [{ kind: "component", type: CoinflowIFrameComponent, selector: "lib-coinflow-iframe", inputs: ["iframeProps", "messageHandlers"], outputs: ["messageEvent"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: CoinflowPurchaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.1", type: CoinflowPurchaseComponent, isStandalone: true, selector: "lib-coinflow-purchase", inputs: { purchaseProps: "purchaseProps" }, ngImport: i0, template: ' <lib-coinflow-iframe ng-if="iframeProps && messageHandlers" [iframeProps]="iframeProps!" [messageHandlers]="messageHandlers!"></lib-coinflow-iframe> ', isInline: true, dependencies: [{ kind: "component", type: CoinflowIFrameComponent, selector: "lib-coinflow-iframe", inputs: ["iframeProps", "messageHandlers"], outputs: ["messageEvent"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CoinflowPurchaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: CoinflowPurchaseComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-coinflow-purchase',
@@ -737,10 +775,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
             }] } });
 
 class CoinflowPurchaseHistoryComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CoinflowPurchaseHistoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: CoinflowPurchaseHistoryComponent, isStandalone: true, selector: "lib-coinflow-purchase-history", ngImport: i0, template: ' <p>coinflow-purchase-history works!</p> ', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: CoinflowPurchaseHistoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.1", type: CoinflowPurchaseHistoryComponent, isStandalone: true, selector: "lib-coinflow-purchase-history", ngImport: i0, template: ' <p>coinflow-purchase-history works!</p> ', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CoinflowPurchaseHistoryComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: CoinflowPurchaseHistoryComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-coinflow-purchase-history',
@@ -751,10 +789,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
         }] });
 
 class CoinflowPurchaseProtectionComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CoinflowPurchaseProtectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: CoinflowPurchaseProtectionComponent, isStandalone: true, selector: "lib-coinflow-purchase-protection", ngImport: i0, template: ' <p>coinflow-purchase-protection works!</p> ', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: CoinflowPurchaseProtectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.1", type: CoinflowPurchaseProtectionComponent, isStandalone: true, selector: "lib-coinflow-purchase-protection", ngImport: i0, template: ' <p>coinflow-purchase-protection works!</p> ', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CoinflowPurchaseProtectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: CoinflowPurchaseProtectionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-coinflow-purchase-protection',
@@ -770,17 +808,19 @@ class CoinflowWithdrawComponent {
         this.messageHandlers = getHandlers(this.withdrawProps);
         this.messageHandlers.handleHeightChange =
             this.withdrawProps.handleHeightChange;
+        const handleHeightChangeId = Math.random().toString(16).substring(2);
         this.iframeProps = {
             ...this.withdrawProps,
             walletPubkey,
             route: `/withdraw/${this.withdrawProps?.merchantId}`,
             transaction: undefined,
+            handleHeightChangeId,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CoinflowWithdrawComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: CoinflowWithdrawComponent, isStandalone: true, selector: "lib-coinflow-withdraw", inputs: { withdrawProps: "withdrawProps" }, ngImport: i0, template: '  <lib-coinflow-iframe ng-if="iframeProps && messageHandlers" [iframeProps]="iframeProps!" [messageHandlers]="messageHandlers!"></lib-coinflow-iframe> ', isInline: true, dependencies: [{ kind: "component", type: CoinflowIFrameComponent, selector: "lib-coinflow-iframe", inputs: ["iframeProps", "messageHandlers"], outputs: ["messageEvent"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: CoinflowWithdrawComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.1", type: CoinflowWithdrawComponent, isStandalone: true, selector: "lib-coinflow-withdraw", inputs: { withdrawProps: "withdrawProps" }, ngImport: i0, template: '  <lib-coinflow-iframe ng-if="iframeProps && messageHandlers" [iframeProps]="iframeProps!" [messageHandlers]="messageHandlers!"></lib-coinflow-iframe> ', isInline: true, dependencies: [{ kind: "component", type: CoinflowIFrameComponent, selector: "lib-coinflow-iframe", inputs: ["iframeProps", "messageHandlers"], outputs: ["messageEvent"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CoinflowWithdrawComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: CoinflowWithdrawComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-coinflow-withdraw',
@@ -793,10 +833,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
             }] } });
 
 class CoinflowWithdrawHistoryComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CoinflowWithdrawHistoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: CoinflowWithdrawHistoryComponent, isStandalone: true, selector: "lib-coinflow-withdraw-history", ngImport: i0, template: ' <p>coinflow-withdraw-history works!</p> ', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: CoinflowWithdrawHistoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.1", type: CoinflowWithdrawHistoryComponent, isStandalone: true, selector: "lib-coinflow-withdraw-history", ngImport: i0, template: ' <p>coinflow-withdraw-history works!</p> ', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CoinflowWithdrawHistoryComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: CoinflowWithdrawHistoryComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-coinflow-withdraw-history',
@@ -857,10 +897,10 @@ class CardFormService {
             iframe.load();
         return iframe;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CardFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CardFormService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: CardFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: CardFormService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CardFormService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: CardFormService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -901,10 +941,10 @@ class CoinflowCardNumberInput {
     tokenize() {
         return this.iframe.tokenize();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CoinflowCardNumberInput, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: CoinflowCardNumberInput, isStandalone: true, selector: "lib-coinflow-card-number-input", inputs: { args: "args" }, ngImport: i0, template: '<div id="{{TokenExCardNumberIframeId}}"></div>', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: CoinflowCardNumberInput, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.1", type: CoinflowCardNumberInput, isStandalone: true, selector: "lib-coinflow-card-number-input", inputs: { args: "args" }, ngImport: i0, template: '<div id="{{TokenExCardNumberIframeId}}"></div>', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CoinflowCardNumberInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: CoinflowCardNumberInput, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-coinflow-card-number-input',
@@ -950,10 +990,10 @@ class CoinflowCardNumberOnlyInput {
     tokenize() {
         return this.iframe.tokenize();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CoinflowCardNumberOnlyInput, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: CoinflowCardNumberOnlyInput, isStandalone: true, selector: "lib-coinflow-card-number-only-input", inputs: { args: "args" }, ngImport: i0, template: '<div id="{{TokenExCardNumberIframeId}}"></div>', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: CoinflowCardNumberOnlyInput, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.1", type: CoinflowCardNumberOnlyInput, isStandalone: true, selector: "lib-coinflow-card-number-only-input", inputs: { args: "args" }, ngImport: i0, template: '<div id="{{TokenExCardNumberIframeId}}"></div>', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CoinflowCardNumberOnlyInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: CoinflowCardNumberOnlyInput, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-coinflow-card-number-only-input',
@@ -969,10 +1009,10 @@ class CoinflowCvvInputComponent {
     constructor() {
         this.TokenExCvvContainerID = TokenExCvvContainerID;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CoinflowCvvInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: CoinflowCvvInputComponent, isStandalone: true, selector: "lib-coinflow-cvv-input", ngImport: i0, template: '<div id="{{TokenExCvvContainerID}}" ></div>', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: CoinflowCvvInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.1", type: CoinflowCvvInputComponent, isStandalone: true, selector: "lib-coinflow-cvv-input", ngImport: i0, template: '<div id="{{TokenExCvvContainerID}}" ></div>', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CoinflowCvvInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: CoinflowCvvInputComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-coinflow-cvv-input',
@@ -1033,10 +1073,10 @@ class CoinflowCvvOnlyInputComponent {
     tokenize() {
         return this.iframe.tokenize();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CoinflowCvvOnlyInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: CoinflowCvvOnlyInputComponent, isStandalone: true, selector: "lib-coinflow-cvv-only-input", inputs: { args: "args" }, usesOnChanges: true, ngImport: i0, template: '<div id="{{TokenExCvvContainerID}}"></div>', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: CoinflowCvvOnlyInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.1", type: CoinflowCvvOnlyInputComponent, isStandalone: true, selector: "lib-coinflow-cvv-only-input", inputs: { args: "args" }, usesOnChanges: true, ngImport: i0, template: '<div id="{{TokenExCvvContainerID}}"></div>', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CoinflowCvvOnlyInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: CoinflowCvvOnlyInputComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-coinflow-cvv-only-input',
@@ -1075,16 +1115,18 @@ class CoinflowMobileWalletButtonComponent {
         this.messageHandlers = getHandlers(this.purchaseProps);
         this.messageHandlers.handleHeightChange =
             this.purchaseProps.handleHeightChange;
+        const handleHeightChangeId = Math.random().toString(16).substring(2);
         this.iframeProps = {
             ...this.purchaseProps,
             walletPubkey,
             route: `/${this.route}/${this.purchaseProps?.merchantId}`,
             routePrefix: 'form',
             transaction: CoinflowUtils.getTransaction(this.purchaseProps),
+            handleHeightChangeId,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CoinflowMobileWalletButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: CoinflowMobileWalletButtonComponent, isStandalone: true, selector: "lib-coinflow-mobile-wallet-button", inputs: { purchaseProps: "purchaseProps", route: "route", overlayDisplayOverride: "overlayDisplayOverride", alignItems: "alignItems" }, ngImport: i0, template: ` <div style="position: relative; height: 100%;">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: CoinflowMobileWalletButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.1", type: CoinflowMobileWalletButtonComponent, isStandalone: true, selector: "lib-coinflow-mobile-wallet-button", inputs: { purchaseProps: "purchaseProps", route: "route", overlayDisplayOverride: "overlayDisplayOverride", alignItems: "alignItems" }, ngImport: i0, template: ` <div style="position: relative; height: 100%;">
     <div
       [style.background-color]="purchaseProps.color"
       [style.display]="overlayDisplayOverride ?? display"
@@ -1104,7 +1146,7 @@ class CoinflowMobileWalletButtonComponent {
     </div>
   </div>`, isInline: true, dependencies: [{ kind: "component", type: CoinflowIFrameComponent, selector: "lib-coinflow-iframe", inputs: ["iframeProps", "messageHandlers"], outputs: ["messageEvent"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CoinflowMobileWalletButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: CoinflowMobileWalletButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-coinflow-mobile-wallet-button',
@@ -1144,8 +1186,8 @@ class CoinflowApplePayOverlayComponent {
     fill() {
         return this.color === 'white' ? '#000' : '#FFF';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CoinflowApplePayOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: CoinflowApplePayOverlayComponent, isStandalone: true, selector: "coinflow-apple-pay-overlay", inputs: { color: "color" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: CoinflowApplePayOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.1", type: CoinflowApplePayOverlayComponent, isStandalone: true, selector: "coinflow-apple-pay-overlay", inputs: { color: "color" }, ngImport: i0, template: `
     <svg id="svg-logo" viewBox="0 0 35 15">
       <svg
         id="svg-logo"
@@ -1183,7 +1225,7 @@ class CoinflowApplePayOverlayComponent {
     </svg>
   `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CoinflowApplePayOverlayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: CoinflowApplePayOverlayComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'coinflow-apple-pay-overlay',
@@ -1235,8 +1277,8 @@ class CoinflowApplePayButtonComponent {
     fill() {
         return this.purchaseProps.color === 'white' ? '#000' : '#FFF';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CoinflowApplePayButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: CoinflowApplePayButtonComponent, isStandalone: true, selector: "lib-coinflow-apple-pay-button", inputs: { purchaseProps: "purchaseProps" }, ngImport: i0, template: ` <lib-coinflow-mobile-wallet-button
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: CoinflowApplePayButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.1", type: CoinflowApplePayButtonComponent, isStandalone: true, selector: "lib-coinflow-apple-pay-button", inputs: { purchaseProps: "purchaseProps" }, ngImport: i0, template: ` <lib-coinflow-mobile-wallet-button
     ng-if="iframeProps && messageHandlers"
     [purchaseProps]="purchaseProps"
     route="apple-pay"
@@ -1278,7 +1320,7 @@ class CoinflowApplePayButtonComponent {
     </svg>
   </lib-coinflow-mobile-wallet-button>`, isInline: true, dependencies: [{ kind: "component", type: CoinflowMobileWalletButtonComponent, selector: "lib-coinflow-mobile-wallet-button", inputs: ["purchaseProps", "route", "overlayDisplayOverride", "alignItems"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CoinflowApplePayButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: CoinflowApplePayButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-coinflow-apple-pay-button',
@@ -1334,8 +1376,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
             }] } });
 
 class CoinflowGooglePayOverlayComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CoinflowGooglePayOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.10", type: CoinflowGooglePayOverlayComponent, isStandalone: true, selector: "coinflow-google-pay-overlay", inputs: { color: "color" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: CoinflowGooglePayOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: CoinflowGooglePayOverlayComponent, isStandalone: true, selector: "coinflow-google-pay-overlay", inputs: { color: "color" }, ngImport: i0, template: `
     @if (color === 'white') {
       <svg xmlns="http://www.w3.org/2000/svg" width="41" height="17">
         <g fill="none" fill-rule="evenodd">
@@ -1390,7 +1432,7 @@ class CoinflowGooglePayOverlayComponent {
     }
   `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CoinflowGooglePayOverlayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: CoinflowGooglePayOverlayComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'coinflow-google-pay-overlay',
@@ -1456,8 +1498,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
             }] } });
 
 class CoinflowGooglePayButtonComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CoinflowGooglePayButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: CoinflowGooglePayButtonComponent, isStandalone: true, selector: "lib-coinflow-google-pay-button", inputs: { purchaseProps: "purchaseProps" }, ngImport: i0, template: `<lib-coinflow-mobile-wallet-button
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: CoinflowGooglePayButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.1", type: CoinflowGooglePayButtonComponent, isStandalone: true, selector: "lib-coinflow-google-pay-button", inputs: { purchaseProps: "purchaseProps" }, ngImport: i0, template: `<lib-coinflow-mobile-wallet-button
     ng-if="iframeProps && messageHandlers"
     [purchaseProps]="purchaseProps"
     route="google-pay"
@@ -1469,7 +1511,7 @@ class CoinflowGooglePayButtonComponent {
     ></coinflow-google-pay-overlay>
   </lib-coinflow-mobile-wallet-button> `, isInline: true, dependencies: [{ kind: "component", type: CoinflowMobileWalletButtonComponent, selector: "lib-coinflow-mobile-wallet-button", inputs: ["purchaseProps", "route", "overlayDisplayOverride", "alignItems"] }, { kind: "component", type: CoinflowGooglePayOverlayComponent, selector: "coinflow-google-pay-overlay", inputs: ["color"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CoinflowGooglePayButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: CoinflowGooglePayButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-coinflow-google-pay-button',