@coinflowlabs/react 4.1.3 → 4.2.0

package/build/cjs/card-form/CoinflowCardForm.d.ts

@@ -0,0 +1,101 @@
+import React from 'react';
+import { CardType, CoinflowEnvs } from '../common';
+import { CardFormInputStyles } from './useCardFormIframe';
+export type CoinflowCardTokenResponse = {
+    token: string;
+};
+export interface CoinflowCardNumberInputProps {
+    env: CoinflowEnvs;
+    css: CardFormInputStyles & {
+        cvv: CardFormInputStyles;
+    };
+    debug?: boolean;
+}
+export interface CoinflowCvvOnlyInputProps {
+    token: string;
+    cardType: CardType;
+    env: CoinflowEnvs;
+    css: CardFormInputStyles & {
+        cvv: CardFormInputStyles;
+    };
+    debug?: boolean;
+}
+/**
+ * Allows merchants to collect card information from their customers in a PCI-compliant way and receive the tokenized card number.
+ *
+ * Usage:
+ * ```tsx
+ *  const ref =  useRef<{getToken(): Promise<{token: string}>}>();
+ *
+ *  <CoinflowCardNumberInput
+ *   ref={coinflowCardFormRef}
+ *   env={'ref'}
+ *   debug={true}
+ *   css={{
+ *     base: 'font-family: Arial, sans-serif;padding: 0 8px;border: 1px solid rgba(0, 0, 0, 0.2);margin: 0;width: 100%;font-size: 13px;line-height: 30px;height: 32px;box-sizing: border-box;-moz-box-sizing: border-box;',
+ *     focus:
+ *       'box-shadow: 0 0 6px 0 rgba(0, 132, 255, 0.5);border: 1px solid rgba(0, 132, 255, 0.5);outline: 0;',
+ *     error:
+ *       'box-shadow: 0 0 6px 0 rgba(224, 57, 57, 0.5);border: 1px solid rgba(224, 57, 57, 0.5);',
+ *     cvv: {
+ *       base: 'font-family: Arial, sans-serif;padding: 0 8px;border: 1px solid rgba(0, 0, 0, 0.2);margin: 0;width: 100%;font-size: 13px;line-height: 30px;height: 32px;box-sizing: border-box;-moz-box-sizing: border-box;',
+ *       focus:
+ *         'box-shadow: 0 0 6px 0 rgba(0, 132, 255, 0.5);border: 1px solid rgba(0, 132, 255, 0.5);outline: 0;',
+ *       error:
+ *         'box-shadow: 0 0 6px 0 rgba(224, 57, 57, 0.5);border: 1px solid rgba(224, 57, 57, 0.5);',
+ *     },
+ *   }}
+ * />
+ * <CoinflowCvvInput />
+ *
+ *  <button onClick={() => {
+ *   ref.current?.getToken()
+ *     .then(({token}) => console.log(token))
+ *     .catch(e => console.error('GET TOKEN ERROR', e))
+ *  }}>Get Token</button>
+ *
+ * ```
+ */
+export declare const CoinflowCardNumberInput: React.ForwardRefExoticComponent<CoinflowCardNumberInputProps & React.RefAttributes<unknown>>;
+/**
+ * The CVV number input for creating a new tokenized card
+ */
+export declare function CoinflowCvvInput(): React.JSX.Element;
+/**
+ * Allows merchants to collect the CVV for an already tokenized card in a PCI-compliant way and receive the token with the CVV linked.
+ *
+ * Usage:
+ * ```tsx
+ *  const ref =  useRef<{getToken(): Promise<{token: string}>}>();
+ *
+ * <CoinflowCvvOnlyInput
+ *   ref={ref}
+ *   cardType={'visa'}
+ *   token={'411111YJM5TX1111'}
+ *   env={import.meta.env.VITE_ENV as CoinflowEnvs}
+ *   debug={true}
+ *   css={{
+ *     base: 'font-family: Arial, sans-serif;padding: 0 8px;border: 1px solid rgba(0, 0, 0, 0.2);margin: 0;width: 100%;font-size: 13px;line-height: 30px;height: 32px;box-sizing: border-box;-moz-box-sizing: border-box;',
+ *     focus:
+ *       'box-shadow: 0 0 6px 0 rgba(0, 132, 255, 0.5);border: 1px solid rgba(0, 132, 255, 0.5);outline: 0;',
+ *     error:
+ *       'box-shadow: 0 0 6px 0 rgba(224, 57, 57, 0.5);border: 1px solid rgba(224, 57, 57, 0.5);',
+ *     cvv: {
+ *       base: 'font-family: Arial, sans-serif;padding: 0 8px;border: 1px solid rgba(0, 0, 0, 0.2);margin: 0;width: 100%;font-size: 13px;line-height: 30px;height: 32px;box-sizing: border-box;-moz-box-sizing: border-box;',
+ *       focus:
+ *         'box-shadow: 0 0 6px 0 rgba(0, 132, 255, 0.5);border: 1px solid rgba(0, 132, 255, 0.5);outline: 0;',
+ *       error:
+ *         'box-shadow: 0 0 6px 0 rgba(224, 57, 57, 0.5);border: 1px solid rgba(224, 57, 57, 0.5);',
+ *     },
+ *   }}
+ * />
+ *
+ *  <button onClick={() => {
+ *   ref.current?.getToken()
+ *     .then(({token}) => console.log(token))
+ *     .catch(e => console.error('GET TOKEN ERROR', e))
+ *  }}>Get Token</button>
+ *
+ * ```
+ */
+export declare const CoinflowCvvOnlyInput: React.ForwardRefExoticComponent<CoinflowCvvOnlyInputProps & React.RefAttributes<unknown>>;

package/build/cjs/card-form/CoinflowCardForm.js

@@ -0,0 +1,129 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CoinflowCvvOnlyInput = exports.CoinflowCvvInput = exports.CoinflowCardNumberInput = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var useCardFormIframe_1 = require("./useCardFormIframe");
+/**
+ * Allows merchants to collect card information from their customers in a PCI-compliant way and receive the tokenized card number.
+ *
+ * Usage:
+ * ```tsx
+ *  const ref =  useRef<{getToken(): Promise<{token: string}>}>();
+ *
+ *  <CoinflowCardNumberInput
+ *   ref={coinflowCardFormRef}
+ *   env={'ref'}
+ *   debug={true}
+ *   css={{
+ *     base: 'font-family: Arial, sans-serif;padding: 0 8px;border: 1px solid rgba(0, 0, 0, 0.2);margin: 0;width: 100%;font-size: 13px;line-height: 30px;height: 32px;box-sizing: border-box;-moz-box-sizing: border-box;',
+ *     focus:
+ *       'box-shadow: 0 0 6px 0 rgba(0, 132, 255, 0.5);border: 1px solid rgba(0, 132, 255, 0.5);outline: 0;',
+ *     error:
+ *       'box-shadow: 0 0 6px 0 rgba(224, 57, 57, 0.5);border: 1px solid rgba(224, 57, 57, 0.5);',
+ *     cvv: {
+ *       base: 'font-family: Arial, sans-serif;padding: 0 8px;border: 1px solid rgba(0, 0, 0, 0.2);margin: 0;width: 100%;font-size: 13px;line-height: 30px;height: 32px;box-sizing: border-box;-moz-box-sizing: border-box;',
+ *       focus:
+ *         'box-shadow: 0 0 6px 0 rgba(0, 132, 255, 0.5);border: 1px solid rgba(0, 132, 255, 0.5);outline: 0;',
+ *       error:
+ *         'box-shadow: 0 0 6px 0 rgba(224, 57, 57, 0.5);border: 1px solid rgba(224, 57, 57, 0.5);',
+ *     },
+ *   }}
+ * />
+ * <CoinflowCvvInput />
+ *
+ *  <button onClick={() => {
+ *   ref.current?.getToken()
+ *     .then(({token}) => console.log(token))
+ *     .catch(e => console.error('GET TOKEN ERROR', e))
+ *  }}>Get Token</button>
+ *
+ * ```
+ */
+exports.CoinflowCardNumberInput = (0, react_1.forwardRef)(function (props, ref) {
+    var _a = (0, useCardFormIframe_1.useCardFormIframe)(props.env), tokenExIframe = _a.tokenExIframe, initializeTokenExIframe = _a.initializeTokenExIframe;
+    (0, react_1.useImperativeHandle)(ref, function () { return ({
+        getToken: function () {
+            return tslib_1.__awaiter(this, void 0, void 0, function () {
+                return tslib_1.__generator(this, function (_a) {
+                    if (!tokenExIframe)
+                        throw new Error('Unable to get token');
+                    return [2 /*return*/, tokenExIframe.tokenize()];
+                });
+            });
+        },
+    }); });
+    (0, react_1.useEffect)(function () {
+        var sdkScriptTag = document.createElement('script');
+        sdkScriptTag.src =
+            props.env === 'prod'
+                ? 'https://htp.tokenex.com/iframe/iframe-v3.min.js'
+                : 'https://test-htp.tokenex.com/iframe/iframe-v3.min.js';
+        document.head.appendChild(sdkScriptTag);
+        initializeTokenExIframe(props);
+    }, [initializeTokenExIframe, props]);
+    return react_1.default.createElement("div", { id: useCardFormIframe_1.TokenExCardNumberIframeId });
+});
+/**
+ * The CVV number input for creating a new tokenized card
+ */
+function CoinflowCvvInput() {
+    return react_1.default.createElement("div", { id: useCardFormIframe_1.TokenExCvvContainerID });
+}
+exports.CoinflowCvvInput = CoinflowCvvInput;
+/**
+ * Allows merchants to collect the CVV for an already tokenized card in a PCI-compliant way and receive the token with the CVV linked.
+ *
+ * Usage:
+ * ```tsx
+ *  const ref =  useRef<{getToken(): Promise<{token: string}>}>();
+ *
+ * <CoinflowCvvOnlyInput
+ *   ref={ref}
+ *   cardType={'visa'}
+ *   token={'411111YJM5TX1111'}
+ *   env={import.meta.env.VITE_ENV as CoinflowEnvs}
+ *   debug={true}
+ *   css={{
+ *     base: 'font-family: Arial, sans-serif;padding: 0 8px;border: 1px solid rgba(0, 0, 0, 0.2);margin: 0;width: 100%;font-size: 13px;line-height: 30px;height: 32px;box-sizing: border-box;-moz-box-sizing: border-box;',
+ *     focus:
+ *       'box-shadow: 0 0 6px 0 rgba(0, 132, 255, 0.5);border: 1px solid rgba(0, 132, 255, 0.5);outline: 0;',
+ *     error:
+ *       'box-shadow: 0 0 6px 0 rgba(224, 57, 57, 0.5);border: 1px solid rgba(224, 57, 57, 0.5);',
+ *     cvv: {
+ *       base: 'font-family: Arial, sans-serif;padding: 0 8px;border: 1px solid rgba(0, 0, 0, 0.2);margin: 0;width: 100%;font-size: 13px;line-height: 30px;height: 32px;box-sizing: border-box;-moz-box-sizing: border-box;',
+ *       focus:
+ *         'box-shadow: 0 0 6px 0 rgba(0, 132, 255, 0.5);border: 1px solid rgba(0, 132, 255, 0.5);outline: 0;',
+ *       error:
+ *         'box-shadow: 0 0 6px 0 rgba(224, 57, 57, 0.5);border: 1px solid rgba(224, 57, 57, 0.5);',
+ *     },
+ *   }}
+ * />
+ *
+ *  <button onClick={() => {
+ *   ref.current?.getToken()
+ *     .then(({token}) => console.log(token))
+ *     .catch(e => console.error('GET TOKEN ERROR', e))
+ *  }}>Get Token</button>
+ *
+ * ```
+ */
+exports.CoinflowCvvOnlyInput = (0, react_1.forwardRef)(function (props, ref) {
+    var _a = (0, useCardFormIframe_1.useCardFormIframe)(props.env), tokenExIframe = _a.tokenExIframe, initializeCvvOnlyTokenExIframe = _a.initializeCvvOnlyTokenExIframe;
+    (0, react_1.useImperativeHandle)(ref, function () { return ({
+        getToken: function () {
+            return tslib_1.__awaiter(this, void 0, void 0, function () {
+                return tslib_1.__generator(this, function (_a) {
+                    if (!tokenExIframe)
+                        throw new Error('Unable to get token');
+                    return [2 /*return*/, tokenExIframe.tokenize()];
+                });
+            });
+        },
+    }); });
+    (0, react_1.useEffect)(function () {
+        initializeCvvOnlyTokenExIframe(props);
+    }, [initializeCvvOnlyTokenExIframe, props]);
+    return react_1.default.createElement("div", { id: useCardFormIframe_1.TokenExCvvContainerID });
+});
+//# sourceMappingURL=CoinflowCardForm.js.map

package/build/cjs/card-form/CoinflowCardForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CoinflowCardForm.js","sourceRoot":"","sources":["../../../src/card-form/CoinflowCardForm.tsx"],"names":[],"mappings":";;;;AAAA,qDAAwE;AAExE,yDAK6B;AAoB7B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACU,QAAA,uBAAuB,GAAG,IAAA,kBAAU,EAC/C,UAAC,KAAmC,EAAE,GAAG;IACjC,IAAA,KAA2C,IAAA,qCAAiB,EAChE,KAAK,CAAC,GAAG,CACV,EAFM,aAAa,mBAAA,EAAE,uBAAuB,6BAE5C,CAAC;IAEF,IAAA,2BAAmB,EAAC,GAAG,EAAE,cAAM,OAAA,CAAC;QACxB,QAAQ;;;oBACZ,IAAI,CAAC,aAAa;wBAAE,MAAM,IAAI,KAAK,CAAC,qBAAqB,CAAC,CAAC;oBAC3D,sBAAO,aAAa,CAAC,QAAQ,EAAE,EAAC;;;SACjC;KACF,CAAC,EAL6B,CAK7B,CAAC,CAAC;IAEJ,IAAA,iBAAS,EAAC;QACR,IAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACtD,YAAY,CAAC,GAAG;YACd,KAAK,CAAC,GAAG,KAAK,MAAM;gBAClB,CAAC,CAAC,iDAAiD;gBACnD,CAAC,CAAC,sDAAsD,CAAC;QAC7D,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;QAExC,uBAAuB,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC,EAAE,CAAC,uBAAuB,EAAE,KAAK,CAAC,CAAC,CAAC;IAErC,OAAO,uCAAK,EAAE,EAAE,6CAAyB,GAAQ,CAAC;AACpD,CAAC,CACF,CAAC;AAEF;;GAEG;AACH,SAAgB,gBAAgB;IAC9B,OAAO,uCAAK,EAAE,EAAE,yCAAqB,GAAQ,CAAC;AAChD,CAAC;AAFD,4CAEC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACU,QAAA,oBAAoB,GAAG,IAAA,kBAAU,EAC5C,UAAC,KAAgC,EAAE,GAAG;IAC9B,IAAA,KAAkD,IAAA,qCAAiB,EACvE,KAAK,CAAC,GAAG,CACV,EAFM,aAAa,mBAAA,EAAE,8BAA8B,oCAEnD,CAAC;IAEF,IAAA,2BAAmB,EAAC,GAAG,EAAE,cAAM,OAAA,CAAC;QACxB,QAAQ;;;oBACZ,IAAI,CAAC,aAAa;wBAAE,MAAM,IAAI,KAAK,CAAC,qBAAqB,CAAC,CAAC;oBAC3D,sBAAO,aAAa,CAAC,QAAQ,EAAE,EAAC;;;SACjC;KACF,CAAC,EAL6B,CAK7B,CAAC,CAAC;IAEJ,IAAA,iBAAS,EAAC;QACR,8BAA8B,CAAC,KAAK,CAAC,CAAC;IACxC,CAAC,EAAE,CAAC,8BAA8B,EAAE,KAAK,CAAC,CAAC,CAAC;IAE5C,OAAO,uCAAK,EAAE,EAAE,yCAAqB,GAAQ,CAAC;AAChD,CAAC,CACF,CAAC"}

package/build/cjs/card-form/TokenEx.d.ts

@@ -0,0 +1,106 @@
+export interface TokenizationResponse {
+    cardType: string;
+    cvvIncluded: true;
+    firstSix: string;
+    lastFour: string;
+    referenceNumber: string;
+    token: string;
+    tokenHMAC: string;
+}
+declare global {
+    namespace TokenEx {
+        interface FraudServicesConfig {
+            useKount?: boolean;
+            kount?: {
+                merchantId?: string;
+                mode?: string;
+                anId?: string;
+            };
+        }
+        interface Config {
+            debug?: boolean;
+            enablePrettyFormat?: boolean;
+            maskInput?: boolean;
+            enableValidateOnBlur?: boolean;
+            enableAriaRequired?: boolean;
+            pci?: boolean;
+            cvvOnly?: boolean;
+            allowUnknownCardTypes?: boolean;
+            enableAutoComplete?: boolean;
+            returnAutoCompleteValues?: boolean;
+            returnKhash?: boolean;
+            returnWhash?: boolean;
+            enforceLuhnCompliance?: boolean;
+            use3DS?: boolean;
+            validateOnKeyUp?: boolean;
+            validateOnCvvKeyUp?: boolean;
+            expiresInSeconds?: number;
+            useExtendedBIN?: boolean;
+            inlineIframeJavaScript?: boolean;
+            iframeVersion?: number;
+            authenticationKey?: string;
+            origin?: string;
+            tokenExID?: string;
+            timestamp?: string;
+            tokenScheme?: string;
+            token?: string;
+            customDataLabel?: string;
+            customCvvDataLabel?: string;
+            title?: string;
+            cvvTitle?: string;
+            inputTitle?: string;
+            cvvInputTitle?: string;
+            cardMaxLengths?: {
+                visa?: number;
+                mastercard?: number;
+                americanExpress?: number;
+                discover?: number;
+                jcb?: number;
+                diners?: number;
+            };
+            fraudServices?: FraudServicesConfig;
+            threeDSMethodNotificationUrl?: string;
+            customDataTypes?: string | object;
+            cvvContainerID?: string;
+            cvvPlaceholder?: string;
+            cardType?: string;
+            forterSiteId?: string;
+            forterUsername?: string;
+            customRegEx?: string;
+            placeholder?: string;
+            inputType?: string;
+            inputMode?: string;
+            font?: string;
+            cvv?: boolean;
+            styles: {
+                base: string;
+                focus: string;
+                error: string;
+                cvv: {
+                    base: string;
+                    focus: string;
+                    error: string;
+                };
+            };
+        }
+        interface IframeAPI {
+            load(): void;
+            on: (event: string, callback: (data?: any) => void) => void;
+            tokenize(): void;
+            validate(): void;
+            reset(): void;
+            blur(): void;
+            cvvBlur(): void;
+            focus(): void;
+            cvvFocus(): void;
+            remove(): void;
+            toggleMask(): void;
+            toggleCvvMask(): void;
+            setPAN(pan: string): void;
+            binLookup(): void;
+            validateConfig(): void;
+            setFraudServicesRequestDetails(data: string): void;
+        }
+        function Iframe(containerID: string, configuration: Config): IframeAPI;
+    }
+}

package/build/cjs/card-form/TokenEx.js

@@ -0,0 +1,4 @@
+"use strict";
+// Type definitions for TokenEx iframe integration
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=TokenEx.js.map

package/build/cjs/card-form/TokenEx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenEx.js","sourceRoot":"","sources":["../../../src/card-form/TokenEx.ts"],"names":[],"mappings":";AAAA,kDAAkD"}

package/build/cjs/card-form/useCardFormIframe.d.ts

@@ -0,0 +1,77 @@
+import { CSSProperties } from 'react';
+import { CardType, CoinflowEnvs } from '../common';
+import { TokenizationResponse } from './TokenEx';
+export declare const TokenExCardNumberIframeId = "tokenExCardNumber";
+export declare const TokenExCvvContainerID = "tokenExCardCvv";
+export interface TokenExIframe extends ReturnType<typeof TokenEx.Iframe> {
+    tokenize: () => Promise<TokenizationResponse>;
+}
+export interface TokenExIFrameConfiguration {
+    origin: string;
+    timestamp: string;
+    tokenExID: string;
+    tokenScheme: string;
+    authenticationKey: string;
+    pci: true;
+    token?: string;
+}
+export interface CardFormInputStyles {
+    base: CSSProperties | string;
+    focus?: CSSProperties | string;
+    error?: CSSProperties | string;
+}
+export declare function useCardFormIframe(env: CoinflowEnvs): {
+    tokenExIframe: TokenExIframe | undefined;
+    initializeTokenExIframe: ({ css, fontFamily, debug, }: {
+        css: CardFormInputStyles & {
+            cvv: CardFormInputStyles;
+        };
+        fontFamily?: string;
+        debug?: boolean;
+    }) => Promise<{
+        tokenize: () => Promise<TokenizationResponse>;
+        load(): void;
+        on: (event: string, callback: (data?: any) => void) => void;
+        validate(): void;
+        reset(): void;
+        blur(): void;
+        cvvBlur(): void;
+        focus(): void;
+        cvvFocus(): void;
+        remove(): void;
+        toggleMask(): void;
+        toggleCvvMask(): void;
+        setPAN(pan: string): void;
+        binLookup(): void;
+        validateConfig(): void;
+        setFraudServicesRequestDetails(data: string): void;
+    }>;
+    initializeCvvOnlyTokenExIframe: ({ token, cardType, css, debug, fontFamily, }: {
+        token: string;
+        cardType: CardType;
+        css: CardFormInputStyles & {
+            cvv: CardFormInputStyles;
+        };
+        debug?: boolean;
+        fontFamily?: string;
+    }) => Promise<{
+        tokenize: () => Promise<TokenizationResponse>;
+        load(): void;
+        on: (event: string, callback: (data?: any) => void) => void;
+        validate(): void;
+        reset(): void;
+        blur(): void;
+        cvvBlur(): void;
+        focus(): void;
+        cvvFocus(): void;
+        remove(): void;
+        toggleMask(): void;
+        toggleCvvMask(): void;
+        setPAN(pan: string): void;
+        binLookup(): void;
+        validateConfig(): void;
+        setFraudServicesRequestDetails(data: string): void;
+    }>;
+    loaded: boolean;
+    cachedToken: string | undefined;
+};

package/build/cjs/card-form/useCardFormIframe.js

@@ -0,0 +1,160 @@
+"use strict";
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCardFormIframe = exports.TokenExCvvContainerID = exports.TokenExCardNumberIframeId = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var common_1 = require("../common");
+exports.TokenExCardNumberIframeId = 'tokenExCardNumber';
+exports.TokenExCvvContainerID = 'tokenExCardCvv';
+var CARD_TYPE_MAPPING = (_a = {},
+    _a[common_1.CardType.VISA] = 'visa',
+    _a[common_1.CardType.MASTERCARD] = 'masterCard',
+    _a[common_1.CardType.AMEX] = 'americanExpress',
+    _a[common_1.CardType.DISCOVER] = 'discover',
+    _a);
+function useCardFormIframe(env) {
+    var _this = this;
+    var _a = (0, react_1.useState)(false), loaded = _a[0], setLoaded = _a[1];
+    var _b = (0, react_1.useState)(undefined), tokenExIframe = _b[0], setTokenExIframe = _b[1];
+    var _c = (0, react_1.useState)(undefined), cachedToken = _c[0], setCachedToken = _c[1];
+    var getIframeConfig = (0, react_1.useCallback)(function (_a) {
+        var token = _a.token;
+        return fetch(new common_1.CoinflowUtils(env).url + '/api/checkout/authentication-key', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                origins: [window.location.origin],
+                token: token,
+            }),
+        }).then(function (res) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+            return tslib_1.__generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, res.json()];
+                    case 1: return [2 /*return*/, (_a.sent())];
+                }
+            });
+        }); });
+    }, [env]);
+    var getStylesAndFont = (0, react_1.useCallback)(function (css) {
+        var styles = {
+            base: CSSPropertiesToComponent(css.base),
+            focus: CSSPropertiesToComponent(css.focus),
+            error: CSSPropertiesToComponent(css.error),
+            cvv: {
+                base: CSSPropertiesToComponent(css.cvv.base),
+                focus: CSSPropertiesToComponent(css.cvv.focus),
+                error: CSSPropertiesToComponent(css.cvv.error),
+            },
+        };
+        return { styles: styles };
+    }, []);
+    var loadIframe = (0, react_1.useCallback)(function (iframe) {
+        var tokenize = function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+            return tslib_1.__generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        iframe.tokenize();
+                        return [4 /*yield*/, new Promise(function (resolve, reject) {
+                                iframe.on('tokenize', function (data) {
+                                    setCachedToken(data.token);
+                                    resolve(data);
+                                });
+                                iframe.on('validate', function (data) {
+                                    // noinspection PointlessBooleanExpressionJS
+                                    var isInvalid = !data.isValid || data.isCvvValid === false;
+                                    if (isInvalid)
+                                        reject(data);
+                                });
+                            })];
+                    case 1: return [2 /*return*/, _a.sent()];
+                }
+            });
+        }); };
+        iframe.on('change', function () { return setCachedToken(undefined); });
+        iframe.on('cvvChange', function () { return setCachedToken(undefined); });
+        iframe.on('load', function () {
+            setTimeout(function () { return setLoaded(true); }, 350);
+            var el = document.querySelector('#tx_iframe_tokenExCardNumber');
+            if (el)
+                el.scrolling = 'no';
+        });
+        setLoaded(false);
+        iframe.load();
+        var overriden = tslib_1.__assign(tslib_1.__assign({}, iframe), { tokenize: tokenize });
+        setTokenExIframe(overriden);
+        return overriden;
+    }, []);
+    var initializeCvvOnlyTokenExIframe = (0, react_1.useCallback)(function (_a) { return tslib_1.__awaiter(_this, [_a], void 0, function (_b) {
+        var type, iframeConfig, styles, config, iframe;
+        var token = _b.token, cardType = _b.cardType, css = _b.css, debug = _b.debug, fontFamily = _b.fontFamily;
+        return tslib_1.__generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    type = CARD_TYPE_MAPPING[cardType];
+                    return [4 /*yield*/, getIframeConfig({ token: token })];
+                case 1:
+                    iframeConfig = _c.sent();
+                    styles = getStylesAndFont(css).styles;
+                    config = tslib_1.__assign(tslib_1.__assign({}, iframeConfig), { placeholder: 'CVV', enablePrettyFormat: true, styles: styles, token: token, cvvOnly: true, cvv: true, cvvContainerID: exports.TokenExCvvContainerID, cardType: type, debug: debug !== null && debug !== void 0 ? debug : false, font: fontFamily });
+                    iframe = TokenEx.Iframe(exports.TokenExCvvContainerID, config);
+                    return [2 /*return*/, loadIframe(iframe)];
+            }
+        });
+    }); }, [getIframeConfig, getStylesAndFont, loadIframe]);
+    var initializeTokenExIframe = (0, react_1.useCallback)(function (_a) { return tslib_1.__awaiter(_this, [_a], void 0, function (_b) {
+        var iframeConfig, styles, iframe;
+        var css = _b.css, fontFamily = _b.fontFamily, debug = _b.debug;
+        return tslib_1.__generator(this, function (_c) {
+            switch (_c.label) {
+                case 0: return [4 /*yield*/, getIframeConfig({})];
+                case 1:
+                    iframeConfig = _c.sent();
+                    styles = getStylesAndFont(css).styles;
+                    iframe = TokenEx.Iframe(exports.TokenExCardNumberIframeId, tslib_1.__assign(tslib_1.__assign({}, iframeConfig), { placeholder: '0000 0000 0000 0000', cvvPlaceholder: 'CVV', enablePrettyFormat: true, cvv: true, cvvContainerID: exports.TokenExCvvContainerID, styles: styles, font: fontFamily, debug: debug !== null && debug !== void 0 ? debug : false }));
+                    return [2 /*return*/, loadIframe(iframe)];
+            }
+        });
+    }); }, [getIframeConfig, getStylesAndFont, loadIframe]);
+    (0, react_1.useEffect)(function () {
+        if (!tokenExIframe)
+            return;
+        tokenExIframe.load();
+        return function () { return tokenExIframe.remove(); };
+    }, [tokenExIframe]);
+    return {
+        tokenExIframe: tokenExIframe,
+        initializeTokenExIframe: initializeTokenExIframe,
+        initializeCvvOnlyTokenExIframe: initializeCvvOnlyTokenExIframe,
+        loaded: loaded,
+        cachedToken: cachedToken,
+    };
+}
+exports.useCardFormIframe = useCardFormIframe;
+function CSSPropertiesToComponent(dict) {
+    if (!dict)
+        return '';
+    if (typeof dict === 'string')
+        return dict;
+    var str = '';
+    var _loop_1 = function (key, value) {
+        var clo = '';
+        key.split('').forEach(function (lt) {
+            if (lt.toUpperCase() === lt) {
+                clo += '-' + lt.toLowerCase();
+            }
+            else {
+                clo += lt;
+            }
+        });
+        str += clo + ':' + value + ';';
+    };
+    for (var _i = 0, _a = Object.entries(dict); _i < _a.length; _i++) {
+        var _b = _a[_i], key = _b[0], value = _b[1];
+        _loop_1(key, value);
+    }
+    return str;
+}
+//# sourceMappingURL=useCardFormIframe.js.map

package/build/cjs/card-form/useCardFormIframe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCardFormIframe.js","sourceRoot":"","sources":["../../../src/card-form/useCardFormIframe.tsx"],"names":[],"mappings":"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"}

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

@@ -287,4 +287,10 @@ export interface CoinflowIFrameProps extends Omit<CoinflowTypes, 'merchantId'>,
     theme?: MerchantTheme;
     usePermit?: boolean;
 }
+export declare enum CardType {
+    VISA = "VISA",
+    MASTERCARD = "MSTR",
+    AMEX = "AMEX",
+    DISCOVER = "DISC"
+}
 export {};

package/build/cjs/common/CoinflowTypes.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MerchantStyle = exports.SettlementType = void 0;
+exports.CardType = exports.MerchantStyle = exports.SettlementType = void 0;
 var SettlementType;
 (function (SettlementType) {
     SettlementType["Credits"] = "Credits";
@@ -13,4 +13,11 @@ var MerchantStyle;
     MerchantStyle["Sharp"] = "sharp";
     MerchantStyle["Pill"] = "pill";
 })(MerchantStyle || (exports.MerchantStyle = MerchantStyle = {}));
+var CardType;
+(function (CardType) {
+    CardType["VISA"] = "VISA";
+    CardType["MASTERCARD"] = "MSTR";
+    CardType["AMEX"] = "AMEX";
+    CardType["DISCOVER"] = "DISC";
+})(CardType || (exports.CardType = CardType = {}));
 //# sourceMappingURL=CoinflowTypes.js.map

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"}
+{"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;AA2YD,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/index.d.ts

@@ -5,6 +5,6 @@ export * from './CoinflowIFrame';
 export * from './CoinflowPurchaseHistory';
 export * from './CoinflowWithdrawHistory';
 export * from './CoinflowPurchaseProtection';
-export * from './CoinflowCardForm';
+export * from './card-form/CoinflowCardForm';
 export * from './CoinflowApplePayButton';
 export * from './CoinflowGooglePayButton';

package/build/cjs/index.js

@@ -8,7 +8,7 @@ tslib_1.__exportStar(require("./CoinflowIFrame"), exports);
 tslib_1.__exportStar(require("./CoinflowPurchaseHistory"), exports);
 tslib_1.__exportStar(require("./CoinflowWithdrawHistory"), exports);
 tslib_1.__exportStar(require("./CoinflowPurchaseProtection"), exports);
-tslib_1.__exportStar(require("./CoinflowCardForm"), exports);
+tslib_1.__exportStar(require("./card-form/CoinflowCardForm"), exports);
 tslib_1.__exportStar(require("./CoinflowApplePayButton"), exports);
 tslib_1.__exportStar(require("./CoinflowGooglePayButton"), exports);
 //# sourceMappingURL=index.js.map

package/build/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;AAAA,6DAAmC;AACnC,6DAAmC;AACnC,mDAAyB;AACzB,2DAAiC;AACjC,oEAA0C;AAC1C,oEAA0C;AAC1C,uEAA6C;AAC7C,6DAAmC;AACnC,mEAAyC;AACzC,oEAA0C"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;AAAA,6DAAmC;AACnC,6DAAmC;AACnC,mDAAyB;AACzB,2DAAiC;AACjC,oEAA0C;AAC1C,oEAA0C;AAC1C,uEAA6C;AAC7C,uEAA6C;AAC7C,mEAAyC;AACzC,oEAA0C"}