@coinflowlabs/react 4.3.0 → 4.4.0

package/README.md

@@ -1,6 +1,7 @@
 # Coinflow React
 
 ## Withdraw Usage
+
 ```
 import {useWallet} from '@solana/wallet-adapter-react';
 const wallet = useWallet();
@@ -10,23 +11,25 @@ const connection = useConnection();
 ```
 
 Props:
-* `wallet`: The Solana Wallet Adapter Wallet
-* `merchantId`: Your Merchant ID (Contact Coinflow support for this)
-* `connection`: Solana Connection
-* `env` (optional): This defaults to `prod`
-    - For testing set to `staging`
-* `onSuccess` (optional): function to run when the withdrawal process is successful
-* `lockAmount` (optional): Whether to let the user select the amount to withdraw or to disable the input
-* `amount` (optional): The amount to withdraw - required if `lockAmount=true`
-* `tokens` (optional): Define a list to filter the available tokens
-* `lockDefaultToken` (optional): Only allow the default token to be used
-* `email` (optional): Set the default email to be used in entry fields
-* `bankAccountLinkRedirect` (optional): The URL to be used for bank account setup
-* `additionalWallets` (optional): Define additional wallets to assign to the user
-* `usePermit` (optional): Pass as false to disable permit message signing for EVM and use approve transactions
-* `transactionSigner` (optional): Public Key of the wallet which will actually execute the withdrawal transaction. Must be associated with the same withdrawer as the main wallet.
+
+- `wallet`: The Solana Wallet Adapter Wallet
+- `merchantId`: Your Merchant ID (Contact Coinflow support for this)
+- `connection`: Solana Connection
+- `env` (optional): This defaults to `prod`
+  - For testing set to `staging`
+- `onSuccess` (optional): function to run when the withdrawal process is successful
+- `lockAmount` (optional): Whether to let the user select the amount to withdraw or to disable the input
+- `amount` (optional): The amount to withdraw - required if `lockAmount=true`
+- `tokens` (optional): Define a list to filter the available tokens
+- `lockDefaultToken` (optional): Only allow the default token to be used
+- `email` (optional): Set the default email to be used in entry fields
+- `bankAccountLinkRedirect` (optional): The URL to be used for bank account setup
+- `additionalWallets` (optional): Define additional wallets to assign to the user
+- `usePermit` (optional): Pass as false to disable permit message signing for EVM and use approve transactions
+- `transactionSigner` (optional): Public Key of the wallet which will actually execute the withdrawal transaction. Must be associated with the same withdrawer as the main wallet.
 
 ## Purchase Usage
+
 ```
 import {useWallet} from '@solana/wallet-adapter-react';
 const wallet = useWallet();
@@ -36,37 +39,47 @@ const connection = useConnection();
 ```
 
 Props:
-* `wallet`: The Solana Wallet Adapter Wallet
-* `merchantId`: Your Merchant ID (Contact Coinflow support for this)
-* `connection`: Solana Connection
-* `env` (optional): This defaults to `prod`
+
+- `wallet`: The Solana Wallet Adapter Wallet
+- `merchantId`: Your Merchant ID (Contact Coinflow support for this)
+- `connection`: Solana Connection
+- `env` (optional): This defaults to `prod`
   - For testing set to `staging`
-* `onSuccess` (optional): function to run when the purchase process is successful
-* `transaction` (optional): transaction for the user to run which redeems their credits with your smart contract. Create this transaction just like you would for a normal user who has USDC in their account.
-* `partialSigners` (optional): Keypairs of Partial Signers to sign the transaction with, this is necessary when initializing new accounts as the new account Keypair must sign the transaction.
-* `debugTx` (optional): Setting this to `true` will sign the transaction with the wallet, and send the transaction with no preflight checks allowing for easier debug of any issues.
-* `token` (optional): The token to use for the purchase. Defaults to USDC. Currently only supported for the Solana Blockchain.
-* `planCode` (optional): When a subscription is being purchased, the code of the subscription plan.
-* `settlementType` (optional): The settlement method to use for the proceeds of a purchase. (Credits, USDC, or Bank)
-* `amount` (optional): Fix the amount of purchase
-* `webhookInfo` (optional): Product or transaction based information that you want transmitted when you receive webhooks regarding the purchase
-* `email` (optional): Set the default email to use in email entry fields
-* `chargebackProtectionData` (optional):
-* `disableApplePay` (optional): Ability to disable Apple Pay
-* `disableGooglePay` (optional): Ability to disable Google Pay
-* `customerInfo` (optional): Additional information about the customer
-* `rent` (optional, Solana only): Specify the blockchain rent amount to add to the total
-* `nativeSolToConvert` (optional, Solana only): Specify the amount of native SOL to convert wSOL for the purchase
-* `jwtToken` (optional): A JWT token which encodes verified checkout parameters to prevent spoofing of arguments.
+- `onSuccess` (optional): function to run when the purchase process is successful
+- `transaction` (optional): transaction for the user to run which redeems their credits with your smart contract. Create this transaction just like you would for a normal user who has USDC in their account.
+- `partialSigners` (optional): Keypairs of Partial Signers to sign the transaction with, this is necessary when initializing new accounts as the new account Keypair must sign the transaction.
+- `debugTx` (optional): Setting this to `true` will sign the transaction with the wallet, and send the transaction with no preflight checks allowing for easier debug of any issues.
+- `token` (optional): The token to use for the purchase. Defaults to USDC. Currently only supported for the Solana Blockchain.
+- `planCode` (optional): When a subscription is being purchased, the code of the subscription plan.
+- `settlementType` (optional): The settlement method to use for the proceeds of a purchase. (Credits, USDC, or Bank)
+- `amount` (optional): Fix the amount of purchase
+- `webhookInfo` (optional): Product or transaction based information that you want transmitted when you receive webhooks regarding the purchase
+- `email` (optional): Set the default email to use in email entry fields
+- `chargebackProtectionData` (optional):
+- `disableApplePay` (optional): Ability to disable Apple Pay
+- `disableGooglePay` (optional): Ability to disable Google Pay
+- `customerInfo` (optional): Additional information about the customer
+- `rent` (optional, Solana only): Specify the blockchain rent amount to add to the total
+- `nativeSolToConvert` (optional, Solana only): Specify the amount of native SOL to convert wSOL for the purchase
+- `jwtToken` (optional): A JWT token which encodes verified checkout parameters to prevent spoofing of arguments.
+- `supportEmail` (optional): Your business support email address to use for support inquiries
 
 ## Utils
 
 `CoinflowUtils`
 
-* `getFeePayer` - Return the `PublicKey` of the Coinflow Fee Payer
+- `getFeePayer` - Return the `PublicKey` of the Coinflow Fee Payer
 
 # Changelog
 
+## 4.4.0
+
+- Added overlay to digital wallet buttons to make the loading time 0
+
+## 4.3.1
+
+- CoinflowPurchaseV2 component added for a modernized purchase flow
+
 ## 4.3.0
 
 - Added arbitrum blockchain support
@@ -158,16 +171,15 @@ Props:
 
 ### 2.6.1
 
-- Added built in support for SSR which fixes a "window not defined" error. 
+- Added built in support for SSR which fixes a "window not defined" error.
 
 ### 2.6.0
 
 - Added support for Apple Pay and Google Pay
 
-
 ### 2.5.0
 
-- Added the `CoinflowCardForm` component which allows merchants to collect credit card information from their users in a PCI compliant way. Tokenize it, and then utilize the remainder of Coinflow's APIs. 
+- Added the `CoinflowCardForm` component which allows merchants to collect credit card information from their users in a PCI compliant way. Tokenize it, and then utilize the remainder of Coinflow's APIs.
 
 ### 2.4.0
 

package/build/cjs/CoinflowApplePayButton.d.ts

@@ -1,10 +1,5 @@
 import { CoinflowPurchaseProps } from './common';
-import React from "react";
+import React from 'react';
+import { MobileWalletButtonProps } from './MobileWalletButton';
 export declare function CoinflowApplePayButton(props: CoinflowPurchaseProps & MobileWalletButtonProps): React.JSX.Element;
-export declare function MobileWalletButton({ props, route }: {
-    props: CoinflowPurchaseProps;
-    route: string;
-}): React.JSX.Element;
-export interface MobileWalletButtonProps {
-    color: "white" | "black";
-}
+export declare function AppleButtonOverlayLogo({ color, }: Pick<MobileWalletButtonProps, 'color'>): React.JSX.Element;

package/build/cjs/CoinflowApplePayButton.js

@@ -1,58 +1,26 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CoinflowApplePayButton = CoinflowApplePayButton;
-exports.MobileWalletButton = MobileWalletButton;
+exports.AppleButtonOverlayLogo = AppleButtonOverlayLogo;
 var tslib_1 = require("tslib");
-var common_1 = require("./common");
-var CoinflowIFrame_1 = require("./CoinflowIFrame");
-var react_1 = tslib_1.__importStar(require("react"));
+var react_1 = tslib_1.__importDefault(require("react"));
+var MobileWalletButton_1 = require("./MobileWalletButton");
 function CoinflowApplePayButton(props) {
-    return react_1.default.createElement(MobileWalletButton, { props: props, route: 'apple-pay' });
+    return (react_1.default.createElement(MobileWalletButton_1.MobileWalletButton, { props: props, route: 'apple-pay' },
+        react_1.default.createElement(AppleButtonOverlayLogo, { color: props.color })));
 }
-function MobileWalletButton(_a) {
-    var props = _a.props, route = _a.route;
-    var iframeRef = (0, react_1.useRef)(null);
-    var onSuccess = props.onSuccess;
-    (0, react_1.useEffect)(function () {
-        if (!onSuccess)
-            return;
-        if (!(iframeRef === null || iframeRef === void 0 ? void 0 : iframeRef.current))
-            return;
-        iframeRef.current.listenForMessage(function (data) {
-            try {
-                var res = JSON.parse(data);
-                return 'method' in res && res.method === 'getToken';
-            }
-            catch (e) {
-                return false;
-            }
-        }).then(function (data) { return onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(data); });
-    }, [onSuccess]);
-    var iframeProps = (0, react_1.useMemo)(function () {
-        var walletPubkey = (0, common_1.getWalletPubkey)(props);
-        return tslib_1.__assign(tslib_1.__assign({}, props), { walletPubkey: walletPubkey, transaction: undefined, routePrefix: 'form', route: "/".concat(route, "/").concat(props.merchantId) });
-    }, [props, route]);
-    var messageHandlers = (0, react_1.useMemo)(function () {
-        return tslib_1.__assign(tslib_1.__assign({}, (0, common_1.getHandlers)(props)), { handleHeightChange: props.handleHeightChange });
-    }, [props]);
-    return react_1.default.createElement(CoinflowIFrame_1.CoinflowIFrame, tslib_1.__assign({ ref: iframeRef }, iframeProps, messageHandlers));
+function AppleButtonOverlayLogo(_a) {
+    var color = _a.color;
+    var fill = color === 'white' ? '#000' : '#FFF';
+    return (react_1.default.createElement("svg", { id: "svg-logo", viewBox: "0 0 35 15" },
+        react_1.default.createElement("svg", { id: "svg-logo", x: "0", y: "3.85", height: "7.3", width: "35", className: "logo", viewBox: "0 0 105 43", version: "1.1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink" },
+            react_1.default.createElement("title", null, "Apple Logo"),
+            react_1.default.createElement("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" },
+                react_1.default.createElement("g", { fill: fill },
+                    react_1.default.createElement("path", { d: "M19.4028,5.5674 C20.6008,4.0684 21.4138,2.0564 21.1998,0.0004 C19.4458,0.0874 17.3058,1.1574 16.0668,2.6564 C14.9538,3.9414 13.9688,6.0374 14.2258,8.0074 C16.1948,8.1784 18.1618,7.0244 19.4028,5.5674" }),
+                    react_1.default.createElement("path", { d: "M21.1772,8.3926 C18.3182,8.2226 15.8872,10.0156 14.5212,10.0156 C13.1552,10.0156 11.0642,8.4786 8.8022,8.5196 C5.8592,8.5626 3.1282,10.2276 1.6342,12.8746 C-1.4378,18.1696 0.8232,26.0246 3.8112,30.3376 C5.2622,32.4716 7.0102,34.8206 9.3142,34.7366 C11.4912,34.6506 12.3442,33.3266 14.9902,33.3266 C17.6352,33.3266 18.4042,34.7366 20.7082,34.6936 C23.0972,34.6506 24.5922,32.5586 26.0422,30.4226 C27.7072,27.9906 28.3882,25.6426 28.4312,25.5126 C28.3882,25.4706 23.8232,23.7186 23.7812,18.4676 C23.7382,14.0706 27.3652,11.9786 27.5362,11.8496 C25.4882,8.8196 22.2872,8.4786 21.1772,8.3926" }),
+                    react_1.default.createElement("path", { d: "M85.5508,43.0381 L85.5508,39.1991 C85.8628,39.2421 86.6158,39.2871 87.0158,39.2871 C89.2138,39.2871 90.4558,38.3551 91.2108,35.9581 L91.6548,34.5371 L83.2428,11.2321 L88.4368,11.2321 L94.2958,30.1421 L94.4068,30.1421 L100.2668,11.2321 L105.3278,11.2321 L96.6048,35.7141 C94.6078,41.3291 92.3208,43.1721 87.4828,43.1721 C87.1048,43.1721 85.8838,43.1271 85.5508,43.0381" }),
+                    react_1.default.createElement("path", { d: "M42.6499,19.3555 L48.3549,19.3555 C52.6829,19.3555 55.1469,17.0255 55.1469,12.9855 C55.1469,8.9455 52.6829,6.6375 48.3769,6.6375 L42.6499,6.6375 L42.6499,19.3555 Z M49.6869,2.4425 C55.9009,2.4425 60.2289,6.7265 60.2289,12.9625 C60.2289,19.2225 55.8129,23.5285 49.5309,23.5285 L42.6499,23.5285 L42.6499,34.4705 L37.6779,34.4705 L37.6779,2.4425 L49.6869,2.4425 Z" }),
+                    react_1.default.createElement("path", { d: "M76.5547,25.7705 L76.5547,23.9715 L71.0287,24.3275 C67.9207,24.5275 66.3007,25.6815 66.3007,27.7015 C66.3007,29.6545 67.9887,30.9195 70.6287,30.9195 C74.0027,30.9195 76.5547,28.7665 76.5547,25.7705 M61.4617,27.8345 C61.4617,23.7285 64.5917,21.3755 70.3627,21.0205 L76.5547,20.6425 L76.5547,18.8675 C76.5547,16.2705 74.8457,14.8495 71.8057,14.8495 C69.2967,14.8495 67.4777,16.1375 67.0997,18.1125 L62.6167,18.1125 C62.7497,13.9615 66.6567,10.9435 71.9387,10.9435 C77.6207,10.9435 81.3267,13.9175 81.3267,18.5345 L81.3267,34.4705 L76.7327,34.4705 L76.7327,30.6305 L76.6217,30.6305 C75.3127,33.1395 72.4267,34.7145 69.2967,34.7145 C64.6807,34.7145 61.4617,31.9625 61.4617,27.8345" }))))));
 }
-// TODO
-// export function useGetTokenHandler(props: CoinflowPurchaseProps) {
-//   const {onSuccess} = props;
-//
-//   useEffect(() => {
-//     const handler = getMessageHandler('getToken', (data: string) => {
-//       if (data.startsWith('ERROR')) {
-//         console.error('Mobile Wallet Payment Error', data.replace('ERROR', ''));
-//         return;
-//       }
-//
-//       onSuccess?.(data);
-//     });
-//
-//     if (!window) throw new Error('Window not defined');
-//     window.addEventListener('message', handler);
-//   }, [onSuccess]);
-// }
 //# sourceMappingURL=CoinflowApplePayButton.js.map

package/build/cjs/CoinflowApplePayButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CoinflowApplePayButton.js","sourceRoot":"","sources":["../../src/CoinflowApplePayButton.tsx"],"names":[],"mappings":";;AAUA,wDAEC;AAED,gDAmCC;;AAjDD,mCAMkB;AAClB,mDAAkF;AAClF,qDAA0D;AAE1D,SAAgB,sBAAsB,CAAC,KAAsD;IAC3F,OAAO,8BAAC,kBAAkB,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,GAAI,CAAC;AAClE,CAAC;AAED,SAAgB,kBAAkB,CAAC,EAA6D;QAA5D,KAAK,WAAA,EAAE,KAAK,WAAA;IAC9C,IAAM,SAAS,GAAG,IAAA,cAAM,EAAiC,IAAI,CAAC,CAAC;IACxD,IAAA,SAAS,GAAI,KAAK,UAAT,CAAU;IAE1B,IAAA,iBAAS,EAAC;QACR,IAAI,CAAC,SAAS;YAAE,OAAO;QACvB,IAAI,CAAC,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,CAAA;YAAE,OAAO;QAChC,SAAS,CAAC,OAAO,CAAC,gBAAgB,CAAC,UAAC,IAAY;YAC9C,IAAI,CAAC;gBACH,IAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;gBAC7B,OAAO,QAAQ,IAAI,GAAG,IAAI,GAAG,CAAC,MAAM,KAAK,UAAU,CAAA;YACrD,CAAC;YAAC,OAAO,CAAC,EAAE,CAAC;gBACX,OAAO,KAAK,CAAC;YACf,CAAC;QACH,CAAC,CAAC,CAAC,IAAI,CAAC,UAAA,IAAI,IAAI,OAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAG,IAAI,CAAC,EAAjB,CAAiB,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,IAAM,WAAW,GAAG,IAAA,eAAO,EAAsB;QAC/C,IAAM,YAAY,GAAG,IAAA,wBAAe,EAAC,KAAK,CAAC,CAAC;QAC5C,6CACK,KAAK,KACR,YAAY,cAAA,EACZ,WAAW,EAAE,SAAS,EACtB,WAAW,EAAE,MAAM,EACnB,KAAK,EAAE,WAAI,KAAK,cAAI,KAAK,CAAC,UAAU,CAAE,IACvC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC;IACnB,IAAM,eAAe,GAAG,IAAA,eAAO,EAAwB;QACrD,6CACK,IAAA,oBAAW,EAAC,KAAK,CAAC,KACrB,kBAAkB,EAAE,KAAK,CAAC,kBAAkB,IAC5C;IACJ,CAAC,EAAG,CAAC,KAAK,CAAC,CAAC,CAAC;IAEb,OAAO,8BAAC,+BAAc,qBAAC,GAAG,EAAE,SAAS,IAAM,WAAW,EAAO,eAAe,EAAI,CAAC;AACnF,CAAC;AAMD,OAAO;AACP,qEAAqE;AACrE,+BAA+B;AAC/B,EAAE;AACF,sBAAsB;AACtB,wEAAwE;AACxE,wCAAwC;AACxC,mFAAmF;AACnF,kBAAkB;AAClB,UAAU;AACV,EAAE;AACF,2BAA2B;AAC3B,UAAU;AACV,EAAE;AACF,0DAA0D;AAC1D,mDAAmD;AACnD,qBAAqB;AACrB,IAAI"}
+{"version":3,"file":"CoinflowApplePayButton.js","sourceRoot":"","sources":["../../src/CoinflowApplePayButton.tsx"],"names":[],"mappings":";;AAOA,wDAQC;AAED,wDA+BC;;AA/CD,wDAA0B;AAC1B,2DAG8B;AAE9B,SAAgB,sBAAsB,CACpC,KAAsD;IAEtD,OAAO,CACL,8BAAC,uCAAkB,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW;QAClD,8BAAC,sBAAsB,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,GAAI,CAC3B,CACtB,CAAC;AACJ,CAAC;AAED,SAAgB,sBAAsB,CAAC,EAEE;QADvC,KAAK,WAAA;IAEL,IAAM,IAAI,GAAG,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;IACjD,OAAO,CACL,uCAAK,EAAE,EAAC,UAAU,EAAC,OAAO,EAAC,WAAW;QACpC,uCACE,EAAE,EAAC,UAAU,EACb,CAAC,EAAC,GAAG,EACL,CAAC,EAAC,MAAM,EACR,MAAM,EAAC,KAAK,EACZ,KAAK,EAAC,IAAI,EACV,SAAS,EAAC,MAAM,EAChB,OAAO,EAAC,YAAY,EACpB,OAAO,EAAC,KAAK,EACb,KAAK,EAAC,4BAA4B,EAClC,UAAU,EAAC,8BAA8B;YAEzC,0DAAyB;YACzB,qCAAG,MAAM,EAAC,MAAM,kBAAc,GAAG,EAAC,IAAI,EAAC,MAAM,eAAW,SAAS;gBAC/D,qCAAG,IAAI,EAAE,IAAI;oBACX,wCAAM,CAAC,EAAC,yMAAyM,GAAQ;oBACzN,wCAAM,CAAC,EAAC,6kBAA6kB,GAAQ;oBAC7lB,wCAAM,CAAC,EAAC,iXAAiX,GAAQ;oBACjY,wCAAM,CAAC,EAAC,0WAA0W,GAAQ;oBAC1X,wCAAM,CAAC,EAAC,sqBAAsqB,GAAQ,CACprB,CACF,CACA,CACF,CACP,CAAC;AACJ,CAAC"}

package/build/cjs/CoinflowGooglePayButton.d.ts

@@ -1,4 +1,4 @@
 import { CoinflowPurchaseProps } from './common';
 import React from 'react';
-import { MobileWalletButtonProps } from './CoinflowApplePayButton';
+import { MobileWalletButtonProps } from './MobileWalletButton';
 export declare function CoinflowGooglePayButton(props: CoinflowPurchaseProps & MobileWalletButtonProps): React.JSX.Element;

package/build/cjs/CoinflowGooglePayButton.js

@@ -3,8 +3,37 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CoinflowGooglePayButton = CoinflowGooglePayButton;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importDefault(require("react"));
-var CoinflowApplePayButton_1 = require("./CoinflowApplePayButton");
+var MobileWalletButton_1 = require("./MobileWalletButton");
 function CoinflowGooglePayButton(props) {
-    return react_1.default.createElement(CoinflowApplePayButton_1.MobileWalletButton, { props: props, route: 'google-pay' });
+    return (react_1.default.createElement(MobileWalletButton_1.MobileWalletButton, { props: props, route: 'google-pay', overlayDisplayOverride: 'flex', alignItems: 'center' },
+        react_1.default.createElement(GooglePayLogo, { color: props.color })));
+}
+function GooglePayLogo(_a) {
+    var color = _a.color;
+    if (color === 'white') {
+        return react_1.default.createElement(GooglePayLogoLight, null);
+    }
+    else {
+        return react_1.default.createElement(GooglePayLogoDark, null);
+    }
+}
+function GooglePayLogoLight() {
+    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "41", height: "17" },
+        react_1.default.createElement("g", { fill: "none", "fill-rule": "evenodd" },
+            react_1.default.createElement("path", { d: "M19.526 2.635v4.083h2.518c.6 0 1.096-.202 1.488-.605.403-.402.605-.882.605-1.437 0-.544-.202-1.018-.605-1.422-.392-.413-.888-.62-1.488-.62h-2.518zm0 5.52v4.736h-1.504V1.198h3.99c1.013 0 1.873.337 2.582 1.012.72.675 1.08 1.497 1.08 2.466 0 .991-.36 1.819-1.08 2.482-.697.665-1.559.996-2.583.996h-2.485v.001zm7.668 2.287c0 .392.166.718.499.98.332.26.722.391 1.168.391.633 0 1.196-.234 1.692-.701.497-.469.744-1.019.744-1.65-.469-.37-1.123-.555-1.962-.555-.61 0-1.12.148-1.528.442-.409.294-.613.657-.613 1.093m1.946-5.815c1.112 0 1.989.297 2.633.89.642.594.964 1.408.964 2.442v4.932h-1.439v-1.11h-.065c-.622.914-1.45 1.372-2.486 1.372-.882 0-1.621-.262-2.215-.784-.594-.523-.891-1.176-.891-1.96 0-.828.313-1.486.94-1.976s1.463-.735 2.51-.735c.892 0 1.629.163 2.206.49v-.344c0-.522-.207-.966-.621-1.33a2.132 2.132 0 0 0-1.455-.547c-.84 0-1.504.353-1.995 1.062l-1.324-.834c.73-1.045 1.81-1.568 3.238-1.568m11.853.262l-5.02 11.53H34.42l1.864-4.034-3.302-7.496h1.635l2.387 5.749h.032l2.322-5.75z", fill: "#5F6368" }),
+            react_1.default.createElement("path", { d: "M13.448 7.134c0-.473-.04-.93-.116-1.366H6.988v2.588h3.634a3.11 3.11 0 0 1-1.344 2.042v1.68h2.169c1.27-1.17 2.001-2.9 2.001-4.944", fill: "#4285F4" }),
+            react_1.default.createElement("path", { d: "M6.988 13.7c1.816 0 3.344-.595 4.459-1.621l-2.169-1.681c-.603.406-1.38.643-2.29.643-1.754 0-3.244-1.182-3.776-2.774H.978v1.731a6.728 6.728 0 0 0 6.01 3.703", fill: "#34A853" }),
+            react_1.default.createElement("path", { d: "M3.212 8.267a4.034 4.034 0 0 1 0-2.572V3.964H.978A6.678 6.678 0 0 0 .261 6.98c0 1.085.26 2.11.717 3.017l2.234-1.731z", fill: "#FABB05" }),
+            react_1.default.createElement("path", { d: "M6.988 2.921c.992 0 1.88.34 2.58 1.008v.001l1.92-1.918C10.324.928 8.804.262 6.989.262a6.728 6.728 0 0 0-6.01 3.702l2.234 1.731c.532-1.592 2.022-2.774 3.776-2.774", fill: "#E94235" }),
+            react_1.default.createElement("path", { d: "M0 0h41.285v18H0z" }))));
+}
+function GooglePayLogoDark() {
+    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "41", height: "17" },
+        react_1.default.createElement("g", { fill: "none", "fill-rule": "evenodd" },
+            react_1.default.createElement("path", { d: "M19.526 2.635v4.083h2.518c.6 0 1.096-.202 1.488-.605.403-.402.605-.882.605-1.437 0-.544-.202-1.018-.605-1.422-.392-.413-.888-.62-1.488-.62h-2.518zm0 5.52v4.736h-1.504V1.198h3.99c1.013 0 1.873.337 2.582 1.012.72.675 1.08 1.497 1.08 2.466 0 .991-.36 1.819-1.08 2.482-.697.665-1.559.996-2.583.996h-2.485v.001zm7.668 2.287c0 .392.166.718.499.98.332.26.722.391 1.168.391.633 0 1.196-.234 1.692-.701.497-.469.744-1.019.744-1.65-.469-.37-1.123-.555-1.962-.555-.61 0-1.12.148-1.528.442-.409.294-.613.657-.613 1.093m1.946-5.815c1.112 0 1.989.297 2.633.89.642.594.964 1.408.964 2.442v4.932h-1.439v-1.11h-.065c-.622.914-1.45 1.372-2.486 1.372-.882 0-1.621-.262-2.215-.784-.594-.523-.891-1.176-.891-1.96 0-.828.313-1.486.94-1.976s1.463-.735 2.51-.735c.892 0 1.629.163 2.206.49v-.344c0-.522-.207-.966-.621-1.33a2.132 2.132 0 0 0-1.455-.547c-.84 0-1.504.353-1.995 1.062l-1.324-.834c.73-1.045 1.81-1.568 3.238-1.568m11.853.262l-5.02 11.53H34.42l1.864-4.034-3.302-7.496h1.635l2.387 5.749h.032l2.322-5.75z", fill: "#FFF" }),
+            react_1.default.createElement("path", { d: "M13.448 7.134c0-.473-.04-.93-.116-1.366H6.988v2.588h3.634a3.11 3.11 0 0 1-1.344 2.042v1.68h2.169c1.27-1.17 2.001-2.9 2.001-4.944", fill: "#4285F4" }),
+            react_1.default.createElement("path", { d: "M6.988 13.7c1.816 0 3.344-.595 4.459-1.621l-2.169-1.681c-.603.406-1.38.643-2.29.643-1.754 0-3.244-1.182-3.776-2.774H.978v1.731a6.728 6.728 0 0 0 6.01 3.703", fill: "#34A853" }),
+            react_1.default.createElement("path", { d: "M3.212 8.267a4.034 4.034 0 0 1 0-2.572V3.964H.978A6.678 6.678 0 0 0 .261 6.98c0 1.085.26 2.11.717 3.017l2.234-1.731z", fill: "#FABB05" }),
+            react_1.default.createElement("path", { d: "M6.988 2.921c.992 0 1.88.34 2.58 1.008v.001l1.92-1.918C10.324.928 8.804.262 6.989.262a6.728 6.728 0 0 0-6.01 3.702l2.234 1.731c.532-1.592 2.022-2.774 3.776-2.774", fill: "#E94235" }))));
 }
 //# sourceMappingURL=CoinflowGooglePayButton.js.map

package/build/cjs/CoinflowGooglePayButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CoinflowGooglePayButton.js","sourceRoot":"","sources":["../../src/CoinflowGooglePayButton.tsx"],"names":[],"mappings":";;AAMA,0DAEC;;AALD,wDAA0B;AAC1B,mEAAqF;AAErF,SAAgB,uBAAuB,CAAC,KAAsD;IAC5F,OAAO,8BAAC,2CAAkB,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,GAAI,CAAC;AACnE,CAAC"}
+{"version":3,"file":"CoinflowGooglePayButton.js","sourceRoot":"","sources":["../../src/CoinflowGooglePayButton.tsx"],"names":[],"mappings":";;AAOA,0DAaC;;AAnBD,wDAA0B;AAC1B,2DAG8B;AAE9B,SAAgB,uBAAuB,CACrC,KAAsD;IAEtD,OAAO,CACL,8BAAC,uCAAkB,IACjB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,YAAY,EACnB,sBAAsB,EAAE,MAAM,EAC9B,UAAU,EAAE,QAAQ;QAEpB,8BAAC,aAAa,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,GAAI,CAClB,CACtB,CAAC;AACJ,CAAC;AAED,SAAS,aAAa,CAAC,EAA+C;QAA9C,KAAK,WAAA;IAC3B,IAAI,KAAK,KAAK,OAAO,EAAE,CAAC;QACtB,OAAO,8BAAC,kBAAkB,OAAG,CAAC;IAChC,CAAC;SAAM,CAAC;QACN,OAAO,8BAAC,iBAAiB,OAAG,CAAC;IAC/B,CAAC;AACH,CAAC;AAED,SAAS,kBAAkB;IACzB,OAAO,CACL,uCAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI;QAC5D,qCAAG,IAAI,EAAC,MAAM,eAAW,SAAS;YAChC,wCACE,CAAC,EAAC,89BAA89B,EACh+B,IAAI,EAAC,SAAS,GACd;YACF,wCACE,CAAC,EAAC,kIAAkI,EACpI,IAAI,EAAC,SAAS,GACd;YACF,wCACE,CAAC,EAAC,6JAA6J,EAC/J,IAAI,EAAC,SAAS,GACd;YACF,wCACE,CAAC,EAAC,sHAAsH,EACxH,IAAI,EAAC,SAAS,GACd;YACF,wCACE,CAAC,EAAC,mKAAmK,EACrK,IAAI,EAAC,SAAS,GACd;YACF,wCAAM,CAAC,EAAC,mBAAmB,GAAG,CAC5B,CACA,CACP,CAAC;AACJ,CAAC;AAED,SAAS,iBAAiB;IACxB,OAAO,CACL,uCAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI;QAC5D,qCAAG,IAAI,EAAC,MAAM,eAAW,SAAS;YAChC,wCACE,CAAC,EAAC,89BAA89B,EACh+B,IAAI,EAAC,MAAM,GACX;YACF,wCACE,CAAC,EAAC,kIAAkI,EACpI,IAAI,EAAC,SAAS,GACd;YACF,wCACE,CAAC,EAAC,6JAA6J,EAC/J,IAAI,EAAC,SAAS,GACd;YACF,wCACE,CAAC,EAAC,sHAAsH,EACxH,IAAI,EAAC,SAAS,GACd;YACF,wCACE,CAAC,EAAC,mKAAmK,EACrK,IAAI,EAAC,SAAS,GACd,CACA,CACA,CACP,CAAC;AACJ,CAAC"}

package/build/cjs/CoinflowPurchase.d.ts

@@ -1,3 +1,4 @@
-import React from 'react';
+import React from "react";
 import { CoinflowPurchaseProps } from './common';
+export declare function CoinflowPurchaseLegacy(purchaseProps: CoinflowPurchaseProps): React.JSX.Element;
 export declare function CoinflowPurchase(purchaseProps: CoinflowPurchaseProps): React.JSX.Element;

package/build/cjs/CoinflowPurchase.js

@@ -1,18 +1,113 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.CoinflowPurchaseLegacy = CoinflowPurchaseLegacy;
 exports.CoinflowPurchase = CoinflowPurchase;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
 var common_1 = require("./common");
 var CoinflowIFrame_1 = require("./CoinflowIFrame");
-function CoinflowPurchase(purchaseProps) {
+var useOverlay_1 = require("./useOverlay");
+function useCoinflowPurchase(purchaseProps, version) {
     var iframeProps = (0, react_1.useMemo)(function () {
         var walletPubkey = (0, common_1.getWalletPubkey)(purchaseProps);
-        return tslib_1.__assign(tslib_1.__assign({}, purchaseProps), { walletPubkey: walletPubkey, route: "/purchase/".concat(purchaseProps.merchantId), transaction: common_1.CoinflowUtils.getTransaction(purchaseProps) });
-    }, [purchaseProps]);
+        return tslib_1.__assign(tslib_1.__assign({}, purchaseProps), { walletPubkey: walletPubkey, route: "/purchase".concat(version, "/").concat(purchaseProps.merchantId), transaction: common_1.CoinflowUtils.getTransaction(purchaseProps) });
+    }, [purchaseProps, version]);
     var messageHandlers = (0, react_1.useMemo)(function () {
         return tslib_1.__assign(tslib_1.__assign({}, (0, common_1.getHandlers)(purchaseProps)), { handleHeightChange: purchaseProps.handleHeightChange });
     }, [purchaseProps]);
+    return { iframeProps: iframeProps, messageHandlers: messageHandlers };
+}
+function CoinflowPurchaseLegacy(purchaseProps) {
+    var _a = useCoinflowPurchase(purchaseProps, ''), iframeProps = _a.iframeProps, messageHandlers = _a.messageHandlers;
     return react_1.default.createElement(CoinflowIFrame_1.CoinflowIFrame, tslib_1.__assign({}, iframeProps, messageHandlers));
 }
+function CoinflowPurchase(purchaseProps) {
+    var iframeRef = (0, react_1.useRef)(null);
+    var _a = useCoinflowPurchase(purchaseProps, '-v2'), iframeProps = _a.iframeProps, messageHandlers = _a.messageHandlers;
+    var showOverlay = (0, useOverlay_1.useOverlay)(iframeRef).showOverlay;
+    var loaderBackground = iframeProps.loaderBackground || '#ffffff'; // white default bg
+    var invertedColor = invertHexColor(loaderBackground);
+    return (react_1.default.createElement("div", { style: styles.container(loaderBackground) },
+        react_1.default.createElement(CoinflowIFrame_1.CoinflowIFrame, tslib_1.__assign({ ref: iframeRef }, iframeProps, messageHandlers)),
+        showOverlay && (react_1.default.createElement(LoaderOverlay, { loaderBackground: loaderBackground, invertedColor: invertedColor }))));
+}
+function LoaderOverlay(_a) {
+    var loaderBackground = _a.loaderBackground, invertedColor = _a.invertedColor;
+    return (react_1.default.createElement("div", { style: styles.overlay(loaderBackground) },
+        react_1.default.createElement(LoaderGrid, { columns: 2 },
+            react_1.default.createElement(Loader, { loaderBackground: invertedColor }),
+            react_1.default.createElement(Loader, { loaderBackground: invertedColor })),
+        react_1.default.createElement(LoaderGrid, { columns: 1 },
+            react_1.default.createElement(Loader, { height: 80, loaderBackground: invertedColor })),
+        tslib_1.__spreadArray([], Array(3), true).map(function (_, index) { return (react_1.default.createElement(LoaderRow, { key: index },
+            react_1.default.createElement(Loader, { width: index < 2 ? 80 : 120, height: index < 2 ? 15 : 20, loaderBackground: invertedColor }),
+            react_1.default.createElement(Loader, { width: index < 2 ? 60 : 100, height: index < 2 ? 15 : 20, loaderBackground: invertedColor }))); }),
+        react_1.default.createElement(LoaderGrid, { columns: 1 },
+            react_1.default.createElement(Loader, { height: 60, loaderBackground: invertedColor })),
+        react_1.default.createElement(LoaderGrid, { columns: 1, width: "50%" },
+            react_1.default.createElement(Loader, { height: 10, loaderBackground: invertedColor })),
+        react_1.default.createElement(LoaderGrid, { columns: 1, width: "40%" },
+            react_1.default.createElement(Loader, { height: 6, loaderBackground: invertedColor }))));
+}
+function LoaderGrid(_a) {
+    var children = _a.children, columns = _a.columns, _b = _a.width, width = _b === void 0 ? '100%' : _b;
+    return (react_1.default.createElement("div", { style: tslib_1.__assign(tslib_1.__assign({}, styles.grid), { gridTemplateColumns: "repeat(".concat(columns, ", 1fr)"), width: width }) }, children));
+}
+function LoaderRow(_a) {
+    var children = _a.children;
+    return react_1.default.createElement("div", { style: styles.row }, children);
+}
+function Loader(_a) {
+    var loaderBackground = _a.loaderBackground, _b = _a.height, height = _b === void 0 ? 40 : _b, width = _a.width;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { style: styles.loader(loaderBackground, height, width) }),
+        react_1.default.createElement("style", null, styles.keyframes)));
+}
+function invertHexColor(hex) {
+    var _a;
+    hex = hex.replace(/^#/, '');
+    var rgb = ((_a = hex.match(/.{2}/g)) === null || _a === void 0 ? void 0 : _a.map(function (val) { return 255 - parseInt(val, 16); })) || [];
+    return "#".concat(rgb.map(function (val) { return val.toString(16).padStart(2, '0'); }).join(''));
+}
+var styles = {
+    container: function (bg) { return ({
+        position: 'relative',
+        height: '100%',
+        backgroundColor: bg,
+    }); },
+    overlay: function (bg) { return ({
+        backgroundColor: bg,
+        display: 'flex',
+        color: 'gray',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        fontSize: 24,
+        alignItems: 'center',
+        flexDirection: 'column',
+        gap: '20px',
+        zIndex: 10,
+        padding: '20px',
+    }); },
+    grid: {
+        display: 'grid',
+        gap: '20px',
+        width: '100%',
+    },
+    row: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        width: '100%',
+    },
+    loader: function (bg, height, width) { return ({
+        width: width ? "".concat(width, "px") : '100%',
+        height: "".concat(height, "px"),
+        backgroundColor: bg,
+        borderRadius: '4px',
+        animation: 'pulse 1.5s infinite',
+    }); },
+    keyframes: "\n    @keyframes pulse {\n      0%, 100% { opacity: 0.07; }\n      50% { opacity: 0.03; }\n    }\n  ",
+};
 //# sourceMappingURL=CoinflowPurchase.js.map

package/build/cjs/CoinflowPurchase.js.map

@@ -1 +1 @@
-{"version":3,"file":"CoinflowPurchase.js","sourceRoot":"","sources":["../../src/CoinflowPurchase.tsx"],"names":[],"mappings":";;AAWA,4CAmBC;;AA9BD,qDAAqC;AACrC,mCAOkB;AAClB,mDAAgD;AAEhD,SAAgB,gBAAgB,CAAC,aAAoC;IACnE,IAAM,WAAW,GAAG,IAAA,eAAO,EAAsB;QAC/C,IAAM,YAAY,GAAG,IAAA,wBAAe,EAAC,aAAa,CAAC,CAAC;QACpD,6CACK,aAAa,KAChB,YAAY,cAAA,EACZ,KAAK,EAAE,oBAAa,aAAa,CAAC,UAAU,CAAE,EAC9C,WAAW,EAAE,sBAAa,CAAC,cAAc,CAAC,aAAa,CAAC,IACxD;IACJ,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,IAAM,eAAe,GAAG,IAAA,eAAO,EAAwB;QACrD,6CACK,IAAA,oBAAW,EAAC,aAAa,CAAC,KAC7B,kBAAkB,EAAE,aAAa,CAAC,kBAAkB,IACpD;IACJ,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,OAAO,8BAAC,+BAAc,uBAAK,WAAW,EAAM,eAAe,EAAI,CAAC;AAClE,CAAC"}
+{"version":3,"file":"CoinflowPurchase.js","sourceRoot":"","sources":["../../src/CoinflowPurchase.tsx"],"names":[],"mappings":"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"}

package/build/cjs/MobileWalletButton.d.ts

@@ -0,0 +1,12 @@
+import { CoinflowPurchaseProps } from './common';
+import React from 'react';
+export declare function MobileWalletButton({ props, route, overlayDisplayOverride, children, alignItems, }: {
+    props: CoinflowPurchaseProps & MobileWalletButtonProps;
+    route: string;
+    overlayDisplayOverride?: string;
+    children: React.ReactNode;
+    alignItems?: string;
+}): React.JSX.Element;
+export interface MobileWalletButtonProps {
+    color: 'white' | 'black';
+}

package/build/cjs/MobileWalletButton.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileWalletButton = MobileWalletButton;
+var tslib_1 = require("tslib");
+var common_1 = require("./common");
+var react_1 = tslib_1.__importStar(require("react"));
+var CoinflowIFrame_1 = require("./CoinflowIFrame");
+var useOverlay_1 = require("./useOverlay");
+function MobileWalletButton(_a) {
+    var props = _a.props, route = _a.route, overlayDisplayOverride = _a.overlayDisplayOverride, children = _a.children, alignItems = _a.alignItems;
+    var iframeRef = (0, react_1.useRef)(null);
+    var _b = (0, useOverlay_1.useOverlay)(iframeRef), opacity = _b.opacity, display = _b.display;
+    var onSuccess = props.onSuccess;
+    (0, react_1.useEffect)(function () {
+        if (!onSuccess)
+            return;
+        if (!(iframeRef === null || iframeRef === void 0 ? void 0 : iframeRef.current))
+            return;
+        iframeRef.current
+            .listenForMessage(function (data) {
+            try {
+                var res = JSON.parse(data);
+                return 'method' in res && res.method === 'getToken';
+            }
+            catch (e) {
+                return false;
+            }
+        })
+            .then(function (data) { return onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(data); });
+    }, [onSuccess]);
+    var iframeProps = (0, react_1.useMemo)(function () {
+        var walletPubkey = (0, common_1.getWalletPubkey)(props);
+        return tslib_1.__assign(tslib_1.__assign({}, props), { walletPubkey: walletPubkey, transaction: undefined, routePrefix: 'form', route: "/".concat(route, "/").concat(props.merchantId) });
+    }, [props, route]);
+    var messageHandlers = (0, react_1.useMemo)(function () {
+        return tslib_1.__assign(tslib_1.__assign({}, (0, common_1.getHandlers)(props)), { handleHeightChange: props.handleHeightChange });
+    }, [props]);
+    return (react_1.default.createElement("div", { style: {
+            position: 'relative',
+            height: '100%',
+        } },
+        react_1.default.createElement("div", { style: {
+                backgroundColor: props.color,
+                width: '100%',
+                height: '40px',
+                position: 'absolute',
+                top: 0,
+                bottom: 0,
+                left: 0,
+                zIndex: 20,
+                display: overlayDisplayOverride !== null && overlayDisplayOverride !== void 0 ? overlayDisplayOverride : display,
+                opacity: opacity,
+                justifyContent: 'center',
+                alignItems: alignItems,
+                pointerEvents: 'none',
+            } }, children),
+        react_1.default.createElement("div", { style: {
+                position: 'relative',
+                zIndex: 10,
+                height: '100%',
+            } },
+            react_1.default.createElement(CoinflowIFrame_1.CoinflowIFrame, tslib_1.__assign({ ref: iframeRef }, iframeProps, messageHandlers)))));
+}
+//# sourceMappingURL=MobileWalletButton.js.map

package/build/cjs/MobileWalletButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileWalletButton.js","sourceRoot":"","sources":["../../src/MobileWalletButton.tsx"],"names":[],"mappings":";;AAWA,gDAsFC;;AAjGD,mCAMkB;AAClB,qDAAwD;AACxD,mDAAgF;AAChF,2CAAwC;AAExC,SAAgB,kBAAkB,CAAC,EAYlC;QAXC,KAAK,WAAA,EACL,KAAK,WAAA,EACL,sBAAsB,4BAAA,EACtB,QAAQ,cAAA,EACR,UAAU,gBAAA;IAQV,IAAM,SAAS,GAAG,IAAA,cAAM,EAAiC,IAAI,CAAC,CAAC;IACzD,IAAA,KAAqB,IAAA,uBAAU,EAAC,SAAS,CAAC,EAAzC,OAAO,aAAA,EAAE,OAAO,aAAyB,CAAC;IAE1C,IAAA,SAAS,GAAI,KAAK,UAAT,CAAU;IAC1B,IAAA,iBAAS,EAAC;QACR,IAAI,CAAC,SAAS;YAAE,OAAO;QACvB,IAAI,CAAC,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,CAAA;YAAE,OAAO;QAChC,SAAS,CAAC,OAAO;aACd,gBAAgB,CAAC,UAAC,IAAY;YAC7B,IAAI,CAAC;gBACH,IAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;gBAC7B,OAAO,QAAQ,IAAI,GAAG,IAAI,GAAG,CAAC,MAAM,KAAK,UAAU,CAAC;YACtD,CAAC;YAAC,OAAO,CAAC,EAAE,CAAC;gBACX,OAAO,KAAK,CAAC;YACf,CAAC;QACH,CAAC,CAAC;aACD,IAAI,CAAC,UAAA,IAAI,IAAI,OAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAG,IAAI,CAAC,EAAjB,CAAiB,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,IAAM,WAAW,GAAG,IAAA,eAAO,EAAsB;QAC/C,IAAM,YAAY,GAAG,IAAA,wBAAe,EAAC,KAAK,CAAC,CAAC;QAC5C,6CACK,KAAK,KACR,YAAY,cAAA,EACZ,WAAW,EAAE,SAAS,EACtB,WAAW,EAAE,MAAM,EACnB,KAAK,EAAE,WAAI,KAAK,cAAI,KAAK,CAAC,UAAU,CAAE,IACtC;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC;IACnB,IAAM,eAAe,GAAG,IAAA,eAAO,EAAwB;QACrD,6CACK,IAAA,oBAAW,EAAC,KAAK,CAAC,KACrB,kBAAkB,EAAE,KAAK,CAAC,kBAAkB,IAC5C;IACJ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACL,uCACE,KAAK,EAAE;YACL,QAAQ,EAAE,UAAU;YACpB,MAAM,EAAE,MAAM;SACf;QAED,uCACE,KAAK,EAAE;gBACL,eAAe,EAAE,KAAK,CAAC,KAAK;gBAC5B,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;gBACd,QAAQ,EAAE,UAAU;gBACpB,GAAG,EAAE,CAAC;gBACN,MAAM,EAAE,CAAC;gBACT,IAAI,EAAE,CAAC;gBACP,MAAM,EAAE,EAAE;gBACV,OAAO,EAAE,sBAAsB,aAAtB,sBAAsB,cAAtB,sBAAsB,GAAI,OAAO;gBAC1C,OAAO,SAAA;gBACP,cAAc,EAAE,QAAQ;gBACxB,UAAU,YAAA;gBACV,aAAa,EAAE,MAAM;aACtB,IAEA,QAAQ,CACL;QACN,uCACE,KAAK,EAAE;gBACL,QAAQ,EAAE,UAAU;gBACpB,MAAM,EAAE,EAAE;gBACV,MAAM,EAAE,MAAM;aACf;YAED,8BAAC,+BAAc,qBAAC,GAAG,EAAE,SAAS,IAAM,WAAW,EAAM,eAAe,EAAI,CACpE,CACF,CACP,CAAC;AACJ,CAAC"}

package/build/cjs/common/CoinflowTypes.d.ts

@@ -169,6 +169,10 @@ export interface CoinflowCommonPurchaseProps extends CoinflowTypes {
     authOnly?: boolean;
     deviceId?: string;
     jwtToken?: string;
+    /**
+     * Your company email address that the customer can contact.
+     */
+    supportEmail?: string;
     /**
      * If rendering the Coinflow component within multiple nested iframes, all ancestors in the chain must be provided as a comma-separated list.
      *
@@ -307,7 +311,7 @@ export interface TokenRedeem extends CommonEvmRedeem {
     destination: string;
 }
 export type EvmTransactionData = SafeMintRedeem | ReturnedTokenIdRedeem | ReservoirRedeem | KnownTokenIdRedeem | NormalRedeem | TokenRedeem;
-export interface CoinflowIFrameProps extends Omit<CoinflowTypes, 'merchantId'>, Pick<CoinflowCommonPurchaseProps, 'chargebackProtectionData' | 'webhookInfo' | 'amount' | 'customerInfo' | 'settlementType' | 'email' | 'planCode' | 'deviceId' | 'jwtToken' | 'origins' | 'threeDsChallengePreference'>, Pick<CoinflowCommonWithdrawProps, 'bankAccountLinkRedirect' | 'additionalWallets' | 'transactionSigner' | 'lockAmount' | 'lockDefaultToken' | 'origins'>, Pick<CoinflowEvmPurchaseProps, 'authOnly'>, Pick<CoinflowSolanaPurchaseProps, 'rent' | 'nativeSolToConvert' | 'token'> {
+export interface CoinflowIFrameProps extends Omit<CoinflowTypes, 'merchantId'>, Pick<CoinflowCommonPurchaseProps, 'chargebackProtectionData' | 'webhookInfo' | 'amount' | 'customerInfo' | 'settlementType' | 'email' | 'planCode' | 'deviceId' | 'jwtToken' | 'origins' | 'threeDsChallengePreference' | 'supportEmail'>, Pick<CoinflowCommonWithdrawProps, 'bankAccountLinkRedirect' | 'additionalWallets' | 'transactionSigner' | 'lockAmount' | 'lockDefaultToken' | 'origins'>, Pick<CoinflowEvmPurchaseProps, 'authOnly'>, Pick<CoinflowSolanaPurchaseProps, 'rent' | 'nativeSolToConvert' | 'token'> {
     walletPubkey: string | null | undefined;
     route: string;
     routePrefix?: string;

package/build/cjs/common/CoinflowTypes.js.map

@@ -1 +1 @@
-{"version":3,"file":"CoinflowTypes.js","sourceRoot":"","sources":["../../../src/common/CoinflowTypes.ts"],"names":[],"mappings":";;;AAQA,IAAY,cAIX;AAJD,WAAY,cAAc;IACxB,qCAAmB,CAAA;IACnB,+BAAa,CAAA;IACb,+BAAa,CAAA;AACf,CAAC,EAJW,cAAc,8BAAd,cAAc,QAIzB;AAED,IAAY,aAIX;AAJD,WAAY,aAAa;IACvB,oCAAmB,CAAA;IACnB,gCAAe,CAAA;IACf,8BAAa,CAAA;AACf,CAAC,EAJW,aAAa,6BAAb,aAAa,QAIxB;AAuND,IAAY,0BAIX;AAJD,WAAY,0BAA0B;IACpC,2DAA6B,CAAA;IAC7B,2DAA6B,CAAA;IAC7B,qDAAuB,CAAA;AACzB,CAAC,EAJW,0BAA0B,0CAA1B,0BAA0B,QAIrC;AA8OD,IAAY,QAKX;AALD,WAAY,QAAQ;IAClB,yBAAa,CAAA;IACb,+BAAmB,CAAA;IACnB,yBAAa,CAAA;IACb,6BAAiB,CAAA;AACnB,CAAC,EALW,QAAQ,wBAAR,QAAQ,QAKnB"}
+{"version":3,"file":"CoinflowTypes.js","sourceRoot":"","sources":["../../../src/common/CoinflowTypes.ts"],"names":[],"mappings":";;;AAQA,IAAY,cAIX;AAJD,WAAY,cAAc;IACxB,qCAAmB,CAAA;IACnB,+BAAa,CAAA;IACb,+BAAa,CAAA;AACf,CAAC,EAJW,cAAc,8BAAd,cAAc,QAIzB;AAED,IAAY,aAIX;AAJD,WAAY,aAAa;IACvB,oCAAmB,CAAA;IACnB,gCAAe,CAAA;IACf,8BAAa,CAAA;AACf,CAAC,EAJW,aAAa,6BAAb,aAAa,QAIxB;AAuND,IAAY,0BAIX;AAJD,WAAY,0BAA0B;IACpC,2DAA6B,CAAA;IAC7B,2DAA6B,CAAA;IAC7B,qDAAuB,CAAA;AACzB,CAAC,EAJW,0BAA0B,0CAA1B,0BAA0B,QAIrC;AAmPD,IAAY,QAKX;AALD,WAAY,QAAQ;IAClB,yBAAa,CAAA;IACb,+BAAmB,CAAA;IACnB,yBAAa,CAAA;IACb,6BAAiB,CAAA;AACnB,CAAC,EALW,QAAQ,wBAAR,QAAQ,QAKnB"}

package/build/cjs/common/CoinflowUtils.d.ts

@@ -9,7 +9,7 @@ export declare class CoinflowUtils {
     }>;
     static getCoinflowBaseUrl(env?: CoinflowEnvs): string;
     static getCoinflowApiUrl(env?: CoinflowEnvs): string;
-    static getCoinflowUrl({ walletPubkey, route, routePrefix, env, amount, transaction, blockchain, webhookInfo, email, loaderBackground, handleHeightChange, bankAccountLinkRedirect, additionalWallets, nearDeposit, chargebackProtectionData, merchantCss, color, rent, lockDefaultToken, token, tokens, planCode, disableApplePay, disableGooglePay, customerInfo, settlementType, lockAmount, nativeSolToConvert, theme, usePermit, transactionSigner, authOnly, deviceId, jwtToken, origins, threeDsChallengePreference, }: CoinflowIFrameProps): string;
+    static getCoinflowUrl({ walletPubkey, route, routePrefix, env, amount, transaction, blockchain, webhookInfo, email, loaderBackground, handleHeightChange, bankAccountLinkRedirect, additionalWallets, nearDeposit, chargebackProtectionData, merchantCss, color, rent, lockDefaultToken, token, tokens, planCode, disableApplePay, disableGooglePay, customerInfo, settlementType, lockAmount, nativeSolToConvert, theme, usePermit, transactionSigner, authOnly, deviceId, jwtToken, origins, threeDsChallengePreference, supportEmail, }: CoinflowIFrameProps): string;
     static getTransaction(props: CoinflowPurchaseProps): string | undefined;
     static byBlockchain<T>(blockchain: CoinflowBlockchain, args: {
         solana: T;

package/build/cjs/common/CoinflowUtils.js

@@ -67,7 +67,7 @@ var CoinflowUtils = /** @class */ (function () {
     };
     CoinflowUtils.getCoinflowUrl = function (_a) {
         var _b;
-        var walletPubkey = _a.walletPubkey, route = _a.route, routePrefix = _a.routePrefix, env = _a.env, amount = _a.amount, transaction = _a.transaction, blockchain = _a.blockchain, webhookInfo = _a.webhookInfo, email = _a.email, loaderBackground = _a.loaderBackground, handleHeightChange = _a.handleHeightChange, bankAccountLinkRedirect = _a.bankAccountLinkRedirect, additionalWallets = _a.additionalWallets, nearDeposit = _a.nearDeposit, chargebackProtectionData = _a.chargebackProtectionData, merchantCss = _a.merchantCss, color = _a.color, rent = _a.rent, lockDefaultToken = _a.lockDefaultToken, token = _a.token, tokens = _a.tokens, planCode = _a.planCode, disableApplePay = _a.disableApplePay, disableGooglePay = _a.disableGooglePay, customerInfo = _a.customerInfo, settlementType = _a.settlementType, lockAmount = _a.lockAmount, nativeSolToConvert = _a.nativeSolToConvert, theme = _a.theme, usePermit = _a.usePermit, transactionSigner = _a.transactionSigner, authOnly = _a.authOnly, deviceId = _a.deviceId, jwtToken = _a.jwtToken, origins = _a.origins, threeDsChallengePreference = _a.threeDsChallengePreference;
+        var walletPubkey = _a.walletPubkey, route = _a.route, routePrefix = _a.routePrefix, env = _a.env, amount = _a.amount, transaction = _a.transaction, blockchain = _a.blockchain, webhookInfo = _a.webhookInfo, email = _a.email, loaderBackground = _a.loaderBackground, handleHeightChange = _a.handleHeightChange, bankAccountLinkRedirect = _a.bankAccountLinkRedirect, additionalWallets = _a.additionalWallets, nearDeposit = _a.nearDeposit, chargebackProtectionData = _a.chargebackProtectionData, merchantCss = _a.merchantCss, color = _a.color, rent = _a.rent, lockDefaultToken = _a.lockDefaultToken, token = _a.token, tokens = _a.tokens, planCode = _a.planCode, disableApplePay = _a.disableApplePay, disableGooglePay = _a.disableGooglePay, customerInfo = _a.customerInfo, settlementType = _a.settlementType, lockAmount = _a.lockAmount, nativeSolToConvert = _a.nativeSolToConvert, theme = _a.theme, usePermit = _a.usePermit, transactionSigner = _a.transactionSigner, authOnly = _a.authOnly, deviceId = _a.deviceId, jwtToken = _a.jwtToken, origins = _a.origins, threeDsChallengePreference = _a.threeDsChallengePreference, supportEmail = _a.supportEmail;
         var prefix = routePrefix
             ? "/".concat(routePrefix, "/").concat(blockchain)
             : "/".concat(blockchain);
@@ -91,6 +91,8 @@ var CoinflowUtils = /** @class */ (function () {
         if (email) {
             url.searchParams.append('email', email);
         }
+        if (supportEmail)
+            url.searchParams.append('supportEmail', supportEmail);
         if (token) {
             url.searchParams.append('token', token.toString());
         }