@coinflowlabs/angular 1.7.2 → 1.8.0

package/README.md

@@ -4,6 +4,12 @@ This library was generated with [Angular CLI](https://github.com/angular/angular
 
 # Changelog
 
+## 1.8.0
+
+- New `CoinflowCardForm` component — simple card input with a single `tokenize()` call and full theme support
+- Added theme options for `fontSize`and placeholder text
+- Improved security for iframe communication
+
 ## 1.7.2
 
 - Fixed typing for sessionKey being not present when passing the wallet object

package/fesm2022/coinflowlabs-angular.mjs

@@ -67,8 +67,8 @@ var PaymentMethods;
     PaymentMethods["applePay"] = "applePay";
     PaymentMethods["credits"] = "credits";
     PaymentMethods["crypto"] = "crypto";
-    PaymentMethods["instantBankTransfer"] = "instantBankTransfer";
     PaymentMethods["wire"] = "wire";
+    PaymentMethods["cashApp"] = "cashApp";
 })(PaymentMethods || (PaymentMethods = {}));
 const paymentMethodLabels = {
     [PaymentMethods.card]: 'Card',
@@ -81,8 +81,8 @@ const paymentMethodLabels = {
     [PaymentMethods.applePay]: 'Apple Pay',
     [PaymentMethods.credits]: 'Credits',
     [PaymentMethods.crypto]: 'Crypto',
-    [PaymentMethods.instantBankTransfer]: 'Instant Bank Transfer',
     [PaymentMethods.wire]: 'Wire Transfer',
+    [PaymentMethods.cashApp]: 'CashApp',
 };
 var CardType;
 (function (CardType) {
@@ -483,8 +483,20 @@ function getCurrencyDecimals(currency) {
 function isTypedCurrencyCents(cents, currency) {
     return cents.currency === currency;
 }
+function invertRate(ex) {
+    return {
+        base: ex.to,
+        rate: 1 / ex.rate,
+        to: ex.base,
+    };
+}
 
-function fun() {
+function getNSureDeviceId() {
+    if (typeof window !== 'undefined') {
+        const urlDeviceId = new URLSearchParams(window.location.search).get('deviceId');
+        if (urlDeviceId)
+            return urlDeviceId;
+    }
     if (nsureSDK)
         return nsureSDK.getDeviceId();
     return null;
@@ -604,7 +616,7 @@ class CoinflowUtils {
             url.searchParams.append('deviceId', deviceId);
         }
         else {
-            const deviceId = fun();
+            const deviceId = getNSureDeviceId();
             if (deviceId)
                 url.searchParams.append('deviceId', deviceId);
         }
@@ -719,6 +731,12 @@ class CoinflowUtils {
                 const { transaction } = props;
                 return LZString.compressToEncodedURIComponent(JSON.stringify(transaction));
             },
+            tempo: () => {
+                if (!('transaction' in props))
+                    return undefined;
+                const { transaction } = props;
+                return LZString.compressToEncodedURIComponent(JSON.stringify(transaction));
+            },
             user: () => {
                 return undefined;
             },
@@ -740,6 +758,8 @@ class CoinflowUtils {
                 return args.stellar;
             case 'monad':
                 return args.monad;
+            case 'tempo':
+                return args.tempo;
             case 'user':
                 return args.user;
             default:
@@ -766,6 +786,18 @@ function getCustomerName(info) {
         };
     return undefined;
 }
+function recordFrontendError({ event, error, env, merchantId, }) {
+    const isError = error instanceof Error;
+    const message = isError ? error.message : error;
+    const stackTrace = isError ? error.stack : '';
+    fetch(`${CoinflowUtils.getCoinflowApiUrl(env)}/api/telemetry/frontend-error`, {
+        method: 'POST',
+        body: JSON.stringify({ message, stackTrace, merchantId, event }),
+        headers: {
+            'Content-Type': 'application/json',
+        },
+    }).catch(() => { });
+}
 
 var IFrameMessageMethods;
 (function (IFrameMessageMethods) {
@@ -777,6 +809,7 @@ var IFrameMessageMethods;
     IFrameMessageMethods["AuthDeclined"] = "authDeclined";
     IFrameMessageMethods["Loaded"] = "loaded";
     IFrameMessageMethods["AccountLinked"] = "accountLinked";
+    IFrameMessageMethods["Redirect"] = "redirect";
 })(IFrameMessageMethods || (IFrameMessageMethods = {}));
 function getWalletPubkey(input) {
     let wallet;
@@ -840,6 +873,9 @@ function handleIFrameMessage(rawMessage, handlers, handleHeightChangeId) {
             return;
         case IFrameMessageMethods.AccountLinked:
             return;
+        case IFrameMessageMethods.Redirect:
+            window.open(data, '_blank');
+            return;
     }
     console.warn(`Didn't expect to get here, handleIFrameMessage method:${method} is not one of ${Object.values(IFrameMessageMethods)}`);
 }
@@ -909,6 +945,11 @@ function getHandlers(props) {
             onSuccess: props.onSuccess,
             onAuthDeclined: props.onAuthDeclined,
         }),
+        tempo: () => getEvmWalletHandlers({
+            wallet: wallet,
+            onSuccess: props.onSuccess,
+            onAuthDeclined: props.onAuthDeclined,
+        }),
         user: () => getSessionKeyHandlers(props),
     })();
 }
@@ -1228,6 +1269,96 @@ var nftCartItem;
     })(productType = nftCartItem.productType || (nftCartItem.productType = {}));
 })(nftCartItem || (nftCartItem = {}));
 
+let cachedSessionId = null;
+async function initProtectionSession({ merchantId, env, }) {
+    if (cachedSessionId)
+        return;
+    if (typeof window !== 'undefined') {
+        try {
+            const result = await window.Verisoul?.session();
+            if (result?.session_id)
+                cachedSessionId = result.session_id;
+        }
+        catch (e) {
+            console.error(e);
+            recordFrontendError({ event: 'ProtectionInit', env, merchantId, error: e });
+        }
+    }
+}
+function getProtectionSessionId() {
+    return cachedSessionId;
+}
+
+const DEVICE_ID_HEADER = 'x-device-id';
+const SESSION_ID_HEADER = 'x-session-id';
+function getCoinflowProtectionHeaders() {
+    return {
+        [DEVICE_ID_HEADER]: getNSureDeviceId(),
+        [SESSION_ID_HEADER]: getProtectionSessionId(),
+    };
+}
+
+const NSURE_APP_IDS = {
+    prod: '9JBW2RHC7JNJN8ZQ',
+    sandbox: 'SANDBOX_CTCE4XK53ZW0R7V1',
+};
+const PROTECTION_SESSION_PROJECT_IDS = {
+    prod: '315da543-c486-435a-aa21-53844c469822',
+    sandbox: 'e9f629c4-80ee-4c6d-967e-62af47d8679e',
+};
+async function initCoinflowProtection({ coinflowEnv, merchantId, }) {
+    const env = coinflowEnv === 'prod' ? 'prod' : 'sandbox';
+    const hasUrlDeviceId = typeof window !== 'undefined' &&
+        new URLSearchParams(window.location.search).has('deviceId');
+    if (!hasUrlDeviceId) {
+        const partnerId = await new CoinflowUtils(coinflowEnv).getNSurePartnerId(merchantId);
+        if (partnerId) {
+            const appId = NSURE_APP_IDS[env] ?? NSURE_APP_IDS['sandbox'];
+            try {
+                nsureSDK.init(appId, partnerId);
+            }
+            catch (e) {
+                console.error('Failed to initialize nSure SDK:', e);
+                recordFrontendError({
+                    event: 'NSureInit',
+                    error: e,
+                    env: coinflowEnv,
+                    merchantId,
+                });
+            }
+        }
+    }
+    // Initialize protection session (Verisoul)
+    if (typeof document !== 'undefined') {
+        const existing = document.querySelector('script[verisoul-project-id]');
+        if (!existing) {
+            const projectId = PROTECTION_SESSION_PROJECT_IDS[env] ??
+                PROTECTION_SESSION_PROJECT_IDS['sandbox'];
+            if (projectId) {
+                await new Promise(resolve => {
+                    const script = document.createElement('script');
+                    script.src = `https://js.v.coinflow.sh/${env}/bundle.js`;
+                    script.async = true;
+                    script.setAttribute('verisoul-project-id', projectId);
+                    script.onload = () => {
+                        initProtectionSession({ merchantId, env: coinflowEnv }).then(resolve);
+                    };
+                    script.onerror = e => {
+                        recordFrontendError({
+                            event: 'ProtectionError',
+                            error: e,
+                            env: coinflowEnv,
+                            merchantId,
+                        });
+                        resolve();
+                    };
+                    document.head.appendChild(script);
+                });
+            }
+        }
+    }
+}
+
 class CoinflowIFrameComponent {
     constructor(sanitizer) {
         this.sanitizer = sanitizer;
@@ -1670,6 +1801,125 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 type: Input
             }] } });
 
+class CoinflowCardForm {
+    constructor() {
+        this.url = '';
+        this.loaded = false;
+    }
+    ngOnInit() {
+        this.buildUrl();
+        this.messageHandler = (event) => this.handleMessage(event.data, event.origin);
+        window.addEventListener('message', this.messageHandler);
+    }
+    ngOnDestroy() {
+        if (this.messageHandler) {
+            window.removeEventListener('message', this.messageHandler);
+        }
+    }
+    buildUrl() {
+        const baseUrl = CoinflowUtils.getCoinflowBaseUrl(this.args.env);
+        const iframeUrl = new URL(`/form/v2/${this.args.variant}`, baseUrl);
+        iframeUrl.searchParams.append('merchantId', this.args.merchantId);
+        if (this.args.theme) {
+            iframeUrl.searchParams.append('theme', LZString.compressToEncodedURIComponent(JSON.stringify(this.args.theme)));
+        }
+        if (this.args.token) {
+            iframeUrl.searchParams.append('token', this.args.token);
+        }
+        this.url = iframeUrl.toString();
+    }
+    handleMessage(data, origin) {
+        const expectedOrigin = new URL(CoinflowUtils.getCoinflowBaseUrl(this.args.env)).origin;
+        if (origin !== expectedOrigin)
+            return;
+        try {
+            const parsed = JSON.parse(data);
+            if (parsed.method === IFrameMessageMethods.Loaded) {
+                this.loaded = true;
+                this.args.onLoad?.();
+            }
+        }
+        catch {
+            // not JSON
+        }
+    }
+    tokenize() {
+        return new Promise((resolve, reject) => {
+            const iframe = this.iframeRef?.nativeElement;
+            if (!iframe?.contentWindow) {
+                reject(new Error('Card form iframe not loaded'));
+                return;
+            }
+            const handler = (event) => {
+                const { data, origin } = event;
+                const expectedOrigin = new URL(CoinflowUtils.getCoinflowBaseUrl(this.args.env)).origin;
+                if (origin !== expectedOrigin)
+                    return;
+                try {
+                    const parsed = JSON.parse(data);
+                    if (parsed.method !== 'tokenize')
+                        return;
+                    window.removeEventListener('message', handler);
+                    if (typeof parsed.data === 'string' &&
+                        parsed.data.startsWith('ERROR')) {
+                        reject(new Error(parsed.data.replace('ERROR ', '')));
+                        return;
+                    }
+                    const responseData = typeof parsed.data === 'string'
+                        ? JSON.parse(parsed.data)
+                        : parsed.data;
+                    resolve(responseData);
+                }
+                catch {
+                    // not relevant
+                }
+            };
+            window.addEventListener('message', handler);
+            iframe.contentWindow.postMessage('tokenize', '*');
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CoinflowCardForm, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: CoinflowCardForm, isStandalone: true, selector: "lib-coinflow-card-form", inputs: { args: "args" }, viewQueries: [{ propertyName: "iframeRef", first: true, predicate: ["cardFormIframe"], descendants: true, static: true }], ngImport: i0, template: `<iframe
+    #cardFormIframe
+    [src]="url"
+    title="Card Form"
+    frameBorder="0"
+    allow="payment"
+    [style.width]="'100%'"
+    [style.height]="'60px'"
+    [style.border]="'none'"
+    [style.opacity]="loaded ? 1 : 0"
+    [style.transition]="'opacity 300ms linear'"
+  ></iframe>`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CoinflowCardForm, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lib-coinflow-card-form',
+                    standalone: true,
+                    imports: [],
+                    template: `<iframe
+    #cardFormIframe
+    [src]="url"
+    title="Card Form"
+    frameBorder="0"
+    allow="payment"
+    [style.width]="'100%'"
+    [style.height]="'60px'"
+    [style.border]="'none'"
+    [style.opacity]="loaded ? 1 : 0"
+    [style.transition]="'opacity 300ms linear'"
+  ></iframe>`,
+                }]
+        }], propDecorators: { args: [{
+                type: Input
+            }], iframeRef: [{
+                type: ViewChild,
+                args: ['cardFormIframe', { static: true }]
+            }] } });
+/** @deprecated Use CoinflowCardForm instead */
+const CoinflowCardFormV2 = CoinflowCardForm;
+
 class CoinflowMobileWalletButtonComponent {
     constructor() {
         this.opacity = 0.8;
@@ -2036,5 +2286,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BankingCurrencies, CARD_TYPE_MAPPING, CardType, ChargebackProtectionAccountType, CoinflowApplePayButtonComponent, CoinflowCardNumberInput, CoinflowCardNumberOnlyInput, CoinflowCvvInputComponent, CoinflowCvvOnlyInputComponent, CoinflowGooglePayButtonComponent, CoinflowIFrameComponent, CoinflowPurchaseComponent, CoinflowPurchaseHistoryComponent, CoinflowPurchaseProtectionComponent, CoinflowUtils, CoinflowWithdrawComponent, CoinflowWithdrawHistoryComponent, Currency, CurrencyToISO4217, EventBus, IFrameMessageMethods, MerchantStyle, PaymentMethods, RN_REDIRECT_MESSAGE_NAME, SettlementType, ThreeDsChallengePreference, TokenExCardNumberIframeId, TokenExCvvContainerID, WithdrawCategory, WithdrawCurrencies, WithdrawSpeed, doInitializeCvvOnlyTokenExIframe, doInitializeTokenExCardOnlyIframe, doInitializeTokenExIframe, getCurrencyDecimals, getCustomerName, getHandlers, getIframeConfig, getWalletPubkey, handleIFrameMessage, isBankingCurrency, isTypedCurrencyCents, isWithdrawCurrency, isZeroAuthSavedPaymentMethods, isZeroAuthVerifyCard, nftCartItem, paymentMethodLabels, setTokenExScriptTag };
+export { BankingCurrencies, CARD_TYPE_MAPPING, CardType, ChargebackProtectionAccountType, CoinflowApplePayButtonComponent, CoinflowCardForm, CoinflowCardFormV2, CoinflowCardNumberInput, CoinflowCardNumberOnlyInput, CoinflowCvvInputComponent, CoinflowCvvOnlyInputComponent, CoinflowGooglePayButtonComponent, CoinflowIFrameComponent, CoinflowPurchaseComponent, CoinflowPurchaseHistoryComponent, CoinflowPurchaseProtectionComponent, CoinflowUtils, CoinflowWithdrawComponent, CoinflowWithdrawHistoryComponent, Currency, CurrencyToISO4217, DEVICE_ID_HEADER, EventBus, IFrameMessageMethods, MerchantStyle, PaymentMethods, RN_REDIRECT_MESSAGE_NAME, SESSION_ID_HEADER, SettlementType, ThreeDsChallengePreference, TokenExCardNumberIframeId, TokenExCvvContainerID, WithdrawCategory, WithdrawCurrencies, WithdrawSpeed, doInitializeCvvOnlyTokenExIframe, doInitializeTokenExCardOnlyIframe, doInitializeTokenExIframe, getCoinflowProtectionHeaders, getCurrencyDecimals, getCustomerName, getHandlers, getIframeConfig, getWalletPubkey, handleIFrameMessage, initCoinflowProtection, invertRate, isBankingCurrency, isTypedCurrencyCents, isWithdrawCurrency, isZeroAuthSavedPaymentMethods, isZeroAuthVerifyCard, nftCartItem, paymentMethodLabels, recordFrontendError, setTokenExScriptTag };
 //# sourceMappingURL=coinflowlabs-angular.mjs.map