@coinflowlabs/react 4.1.3 → 4.2.2

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

@@ -0,0 +1,138 @@
+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={ref}
+ *   env={'sandbox'}
+ *   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={'sandbox'}
+ *   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>>;
+/**
+ * Allows merchants to collect card information from their customers in a PCI-compliant way and receive the tokenized card number.
+ * The `CoinflowCardOnlyInput` is used for collecting a debit card for users to be able to withdraw their funds directly to.
+ *
+ * Usage:
+ * ```tsx
+ *  const ref =  useRef<{getToken(): Promise<{token: string}>}>();
+ *
+ *  <CoinflowCardOnlyInput
+ *   ref={ref}
+ *   env={'sandbox'}
+ *   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 CoinflowCardOnlyInput: React.ForwardRefExoticComponent<CoinflowCvvOnlyInputProps & React.RefAttributes<unknown>>;

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

@@ -0,0 +1,177 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CoinflowCardOnlyInput = 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={ref}
+ *   env={'sandbox'}
+ *   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 () {
+        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={'sandbox'}
+ *   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 });
+});
+/**
+ * Allows merchants to collect card information from their customers in a PCI-compliant way and receive the tokenized card number.
+ * The `CoinflowCardOnlyInput` is used for collecting a debit card for users to be able to withdraw their funds directly to.
+ *
+ * Usage:
+ * ```tsx
+ *  const ref =  useRef<{getToken(): Promise<{token: string}>}>();
+ *
+ *  <CoinflowCardOnlyInput
+ *   ref={ref}
+ *   env={'sandbox'}
+ *   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.CoinflowCardOnlyInput = (0, react_1.forwardRef)(function (props, ref) {
+    var _a = (0, useCardFormIframe_1.useCardFormIframe)(props.env), tokenExIframe = _a.tokenExIframe, initializeTokenExCardOnlyIframe = _a.initializeTokenExCardOnlyIframe;
+    (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 () {
+        initializeTokenExCardOnlyIframe(props);
+    }, [initializeTokenExCardOnlyIframe, props]);
+    return react_1.default.createElement("div", { id: useCardFormIframe_1.TokenExCardNumberIframeId });
+});
+//# 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,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;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACU,QAAA,qBAAqB,GAAG,IAAA,kBAAU,EAC7C,UAAC,KAAgC,EAAE,GAAG;IAC9B,IAAA,KAAmD,IAAA,qCAAiB,EACxE,KAAK,CAAC,GAAG,CACV,EAFM,aAAa,mBAAA,EAAE,+BAA+B,qCAEpD,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,+BAA+B,CAAC,KAAK,CAAC,CAAC;IACzC,CAAC,EAAE,CAAC,+BAA+B,EAAE,KAAK,CAAC,CAAC,CAAC;IAE7C,OAAO,uCAAK,EAAE,EAAE,6CAAyB,GAAQ,CAAC;AACpD,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,99 @@
+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;
+    }>;
+    initializeTokenExCardOnlyIframe: ({ css, fontFamily, debug, }: {
+        css: 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;
+    }>;
+    loaded: boolean;
+    cachedToken: string | undefined;
+};