@coinflowlabs/react 5.12.0 → 5.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -1
- package/build/cjs/CoinflowApplePayButton.d.ts +1 -1
- package/build/cjs/CoinflowApplePayButton.js +1 -1
- package/build/cjs/CoinflowGooglePayButton.js +1 -1
- package/build/cjs/CoinflowIFrame.d.ts +2 -2
- package/build/cjs/CoinflowIFrame.js +5 -3
- package/build/cjs/CoinflowIFrame.js.map +1 -1
- package/build/cjs/CoinflowPaymentIntentPurchase.d.ts +3 -0
- package/build/cjs/CoinflowPaymentIntentPurchase.js +45 -0
- package/build/cjs/CoinflowPaymentIntentPurchase.js.map +1 -0
- package/build/cjs/CoinflowPurchase.js +6 -87
- package/build/cjs/CoinflowPurchase.js.map +1 -1
- package/build/cjs/CoinflowPurchaseHistory.js +1 -1
- package/build/cjs/CoinflowPurchaseProtection.d.ts +1 -1
- package/build/cjs/CoinflowWithdraw.js +1 -1
- package/build/cjs/CoinflowWithdrawHistory.js +1 -1
- package/build/cjs/Loader.d.ts +5 -0
- package/build/cjs/Loader.js +39 -0
- package/build/cjs/Loader.js.map +1 -0
- package/build/cjs/MobileWalletButton.d.ts +1 -1
- package/build/cjs/MobileWalletButton.js +1 -1
- package/build/cjs/Utils.d.ts +42 -0
- package/build/cjs/Utils.js +56 -0
- package/build/cjs/Utils.js.map +1 -0
- package/build/cjs/card-form/CoinflowCardForm.d.ts +6 -6
- package/build/cjs/card-form/CoinflowCardFormV2.d.ts +6 -6
- package/build/cjs/card-form/CoinflowCardFormV2.js +21 -11
- package/build/cjs/card-form/CoinflowCardFormV2.js.map +1 -1
- package/build/cjs/card-form/useCardFormIframe.d.ts +5 -5
- package/build/cjs/common/CoinflowProtectionInit.d.ts +1 -1
- package/build/cjs/common/CoinflowProtectionInit.js +3 -6
- package/build/cjs/common/CoinflowProtectionInit.js.map +1 -1
- package/build/cjs/common/CoinflowProtectionInit.native.d.ts +1 -0
- package/build/cjs/common/CoinflowProtectionInit.native.js +7 -0
- package/build/cjs/common/CoinflowProtectionInit.native.js.map +1 -0
- package/build/cjs/common/CoinflowProtectionSession.d.ts +1 -1
- package/build/cjs/common/CoinflowPurchaseProtectionHeaders.d.ts +5 -0
- package/build/cjs/common/CoinflowPurchaseProtectionHeaders.js +18 -2
- package/build/cjs/common/CoinflowPurchaseProtectionHeaders.js.map +1 -1
- package/build/cjs/common/CoinflowTypes.d.ts +82 -9
- package/build/cjs/common/CoinflowTypes.js +3 -0
- package/build/cjs/common/CoinflowTypes.js.map +1 -1
- package/build/cjs/common/CoinflowUtils.d.ts +6 -3
- package/build/cjs/common/CoinflowUtils.js +33 -5
- package/build/cjs/common/CoinflowUtils.js.map +1 -1
- package/build/cjs/common/card-form/tokenexHelpers.d.ts +1 -1
- package/build/cjs/useOverlay.d.ts +2 -2
- package/build/cjs/useOverlay.js +3 -4
- package/build/cjs/useOverlay.js.map +1 -1
- package/build/esm/CoinflowApplePayButton.d.ts +1 -1
- package/build/esm/CoinflowIFrame.d.ts +2 -2
- package/build/esm/CoinflowIFrame.js +4 -2
- package/build/esm/CoinflowIFrame.js.map +1 -1
- package/build/esm/CoinflowPaymentIntentPurchase.d.ts +3 -0
- package/build/esm/CoinflowPaymentIntentPurchase.js +41 -0
- package/build/esm/CoinflowPaymentIntentPurchase.js.map +1 -0
- package/build/esm/CoinflowPurchase.js +2 -83
- package/build/esm/CoinflowPurchase.js.map +1 -1
- package/build/esm/CoinflowPurchaseProtection.d.ts +1 -1
- package/build/esm/Loader.d.ts +5 -0
- package/build/esm/Loader.js +35 -0
- package/build/esm/Loader.js.map +1 -0
- package/build/esm/MobileWalletButton.d.ts +1 -1
- package/build/esm/Utils.d.ts +42 -0
- package/build/esm/Utils.js +52 -0
- package/build/esm/Utils.js.map +1 -0
- package/build/esm/card-form/CoinflowCardForm.d.ts +6 -6
- package/build/esm/card-form/CoinflowCardFormV2.d.ts +6 -6
- package/build/esm/card-form/CoinflowCardFormV2.js +21 -11
- package/build/esm/card-form/CoinflowCardFormV2.js.map +1 -1
- package/build/esm/card-form/useCardFormIframe.d.ts +5 -5
- package/build/esm/common/CoinflowProtectionInit.d.ts +1 -1
- package/build/esm/common/CoinflowProtectionInit.js +2 -5
- package/build/esm/common/CoinflowProtectionInit.js.map +1 -1
- package/build/esm/common/CoinflowProtectionInit.native.d.ts +1 -0
- package/build/esm/common/CoinflowProtectionInit.native.js +4 -0
- package/build/esm/common/CoinflowProtectionInit.native.js.map +1 -0
- package/build/esm/common/CoinflowProtectionSession.d.ts +1 -1
- package/build/esm/common/CoinflowPurchaseProtectionHeaders.d.ts +5 -0
- package/build/esm/common/CoinflowPurchaseProtectionHeaders.js +15 -0
- package/build/esm/common/CoinflowPurchaseProtectionHeaders.js.map +1 -1
- package/build/esm/common/CoinflowTypes.d.ts +82 -9
- package/build/esm/common/CoinflowTypes.js +3 -0
- package/build/esm/common/CoinflowTypes.js.map +1 -1
- package/build/esm/common/CoinflowUtils.d.ts +6 -3
- package/build/esm/common/CoinflowUtils.js +32 -4
- package/build/esm/common/CoinflowUtils.js.map +1 -1
- package/build/esm/common/card-form/tokenexHelpers.d.ts +1 -1
- package/build/esm/useOverlay.d.ts +2 -2
- package/build/esm/useOverlay.js +3 -3
- package/build/esm/useOverlay.js.map +1 -1
- package/build/tsconfig.cjs.tsbuildinfo +1 -1
- package/build/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
package/build/cjs/useOverlay.js
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
const tslib_1 = require("tslib");
|
|
4
3
|
exports.useOverlay = useOverlay;
|
|
5
|
-
const react_1 =
|
|
4
|
+
const react_1 = require("react");
|
|
6
5
|
function useOverlay(iframeRef) {
|
|
7
|
-
const [messageReceived, setMessageReceived] = react_1.
|
|
8
|
-
const [showOverlay, setShowOverlay] = react_1.
|
|
6
|
+
const [messageReceived, setMessageReceived] = (0, react_1.useState)(false);
|
|
7
|
+
const [showOverlay, setShowOverlay] = (0, react_1.useState)(true);
|
|
9
8
|
(0, react_1.useEffect)(() => {
|
|
10
9
|
iframeRef?.current
|
|
11
10
|
?.listenForMessage(message => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useOverlay.js","sourceRoot":"","sources":["../../src/useOverlay.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useOverlay.js","sourceRoot":"","sources":["../../src/useOverlay.ts"],"names":[],"mappings":";;;AAAA,iCAA0D;AAG1D,oBACE,SAAkE;IAElE,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAC9D,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAC,IAAI,CAAC,CAAC;IAErD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,SAAS,EAAE,OAAO;YAChB,EAAE,gBAAgB,CAAC,OAAO,CAAC,EAAE;YAC3B,IAAI,CAAC;gBACH,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;gBAChC,OAAO,QAAQ,IAAI,GAAG,IAAI,GAAG,CAAC,MAAM,KAAK,QAAQ,CAAC;YACpD,CAAC;YAAC,OAAO,CAAC,EAAE,CAAC;gBACX,OAAO,KAAK,CAAC;YACf,CAAC;QACH,CAAC,CAAC;aACD,IAAI,CAAC,GAAG,EAAE;YACT,kBAAkB,CAAC,IAAI,CAAC,CAAC;YACzB,cAAc,CAAC,KAAK,CAAC,CAAC;QACxB,CAAC,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,OAAO,GAAG,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IAC1C,MAAM,OAAO,GAAG,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;IAE9C,OAAO,EAAC,eAAe,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,EAAC,CAAC;AAC1D,CAAC"}
|
|
@@ -2,4 +2,4 @@ import { CoinflowPurchaseProps } from './common';
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { MobileWalletButtonProps } from './MobileWalletButton';
|
|
4
4
|
export declare function CoinflowApplePayButton(props: CoinflowPurchaseProps & MobileWalletButtonProps): React.JSX.Element;
|
|
5
|
-
export declare function AppleButtonOverlayLogo({ color }: Pick<MobileWalletButtonProps, 'color'>): React.JSX.Element;
|
|
5
|
+
export declare function AppleButtonOverlayLogo({ color, }: Pick<MobileWalletButtonProps, 'color'>): React.JSX.Element;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { CoinflowIFrameProps, IFrameMessageHandlers } from './common';
|
|
2
|
+
import { CoinflowIFrameProps, CoinflowIntentsIFrameProps, IFrameMessageHandlers } from './common';
|
|
3
3
|
export type SendAndReceiveMessage = (message: string, isResponseValid: (response: string) => boolean) => Promise<string>;
|
|
4
4
|
export type CoinflowIFrameExposedFunctions = {
|
|
5
5
|
sendAndReceiveMessage: SendAndReceiveMessage;
|
|
6
6
|
listenForMessage: (isResponseValid: (response: string) => boolean) => Promise<string>;
|
|
7
7
|
};
|
|
8
8
|
export declare function useRandomHandleHeightChangeId(): string;
|
|
9
|
-
export declare const CoinflowIFrame: React.ForwardRefExoticComponent<CoinflowIFrameProps & IFrameMessageHandlers & React.RefAttributes<unknown>>;
|
|
9
|
+
export declare const CoinflowIFrame: React.ForwardRefExoticComponent<((CoinflowIFrameProps | CoinflowIntentsIFrameProps) & IFrameMessageHandlers) & React.RefAttributes<unknown>>;
|
|
@@ -6,7 +6,9 @@ export function useRandomHandleHeightChangeId() {
|
|
|
6
6
|
export const CoinflowIFrame = forwardRef((props, ref) => {
|
|
7
7
|
const IFrameRef = useRef(null);
|
|
8
8
|
const url = useMemo(() => {
|
|
9
|
-
return
|
|
9
|
+
return 'intentId' in props
|
|
10
|
+
? CoinflowUtils.getCoinflowIntentsUrl(props)
|
|
11
|
+
: CoinflowUtils.getCoinflowUrl(props);
|
|
10
12
|
}, [props]);
|
|
11
13
|
const sendMessage = useCallback((message) => {
|
|
12
14
|
if (!IFrameRef?.current?.contentWindow)
|
|
@@ -68,7 +70,7 @@ export const CoinflowIFrame = forwardRef((props, ref) => {
|
|
|
68
70
|
return useMemo(() => (React.createElement("iframe", { scrolling: handleHeightChange ? 'no' : 'yes', onLoad: () => {
|
|
69
71
|
if (IFrameRef.current)
|
|
70
72
|
IFrameRef.current.style.opacity = '1';
|
|
71
|
-
}, allow: 'payment;camera;clipboard-write', ref: IFrameRef, style: {
|
|
73
|
+
}, allow: 'payment;camera;clipboard-write;geolocation', ref: IFrameRef, style: {
|
|
72
74
|
width: '100%',
|
|
73
75
|
height: '100%',
|
|
74
76
|
opacity: 0,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CoinflowIFrame.js","sourceRoot":"","sources":["../../src/CoinflowIFrame.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,UAAU,EACV,WAAW,EACX,SAAS,EACT,mBAAmB,EACnB,eAAe,EACf,OAAO,EACP,MAAM,GACP,MAAM,OAAO,CAAC;AACf,OAAO,
|
|
1
|
+
{"version":3,"file":"CoinflowIFrame.js","sourceRoot":"","sources":["../../src/CoinflowIFrame.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import React, { useMemo, useRef } from 'react';
|
|
2
|
+
import { getWalletPubkey, } from './common';
|
|
3
|
+
import { CoinflowIFrame, useRandomHandleHeightChangeId, } from './CoinflowIFrame';
|
|
4
|
+
import { useOverlay } from './useOverlay';
|
|
5
|
+
import { invertHexColor, styles } from './Utils';
|
|
6
|
+
import { LoaderOverlay } from './Loader';
|
|
7
|
+
export function CoinflowPaymentIntentCheckout(props) {
|
|
8
|
+
const iframeRef = useRef(null);
|
|
9
|
+
const { iframeProps, messageHandlers } = useCoinflowPaymentIntentCheckout(props);
|
|
10
|
+
const { showOverlay } = useOverlay(iframeRef);
|
|
11
|
+
const loaderBackground = iframeProps.loaderBackground || '#ffffff'; // white default bg
|
|
12
|
+
const invertedColor = invertHexColor(loaderBackground);
|
|
13
|
+
return (React.createElement("div", { style: styles.container(loaderBackground) },
|
|
14
|
+
React.createElement(CoinflowIFrame, { ref: iframeRef, ...iframeProps, ...messageHandlers }),
|
|
15
|
+
showOverlay && (React.createElement(LoaderOverlay, { loaderBackground: loaderBackground, invertedColor: invertedColor }))));
|
|
16
|
+
}
|
|
17
|
+
function useCoinflowPaymentIntentCheckout(props) {
|
|
18
|
+
const handleHeightChangeId = useRandomHandleHeightChangeId();
|
|
19
|
+
const iframeProps = useMemo(() => {
|
|
20
|
+
const walletPubkey = getWalletPubkey(props);
|
|
21
|
+
return {
|
|
22
|
+
...props,
|
|
23
|
+
walletPubkey,
|
|
24
|
+
route: `/intents/checkout/${props.paymentIntentId}`,
|
|
25
|
+
intentId: props.paymentIntentId,
|
|
26
|
+
handleHeightChangeId,
|
|
27
|
+
};
|
|
28
|
+
}, [handleHeightChangeId, props]);
|
|
29
|
+
const messageHandlers = useMemo(() => {
|
|
30
|
+
return {
|
|
31
|
+
handleSendTransaction: () => {
|
|
32
|
+
throw new Error('Not impl');
|
|
33
|
+
},
|
|
34
|
+
onSuccess: props.onSuccess,
|
|
35
|
+
onAuthDeclined: props.onAuthDeclined,
|
|
36
|
+
handleHeightChange: props.handleHeightChange,
|
|
37
|
+
};
|
|
38
|
+
}, [props]);
|
|
39
|
+
return { iframeProps, messageHandlers };
|
|
40
|
+
}
|
|
41
|
+
//# sourceMappingURL=CoinflowPaymentIntentPurchase.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CoinflowPaymentIntentPurchase.js","sourceRoot":"","sources":["../../src/CoinflowPaymentIntentPurchase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC,MAAM,OAAO,CAAC;AAC7C,OAAO,EAGL,eAAe,GAEhB,MAAM,UAAU,CAAC;AAClB,OAAO,EACL,cAAc,EAEd,6BAA6B,GAC9B,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AACxC,OAAO,EAAC,cAAc,EAAE,MAAM,EAAC,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAC,aAAa,EAAC,MAAM,UAAU,CAAC;AAEvC,MAAM,UAAU,6BAA6B,CAC3C,KAAuC;IAEvC,MAAM,SAAS,GAAG,MAAM,CAAiC,IAAI,CAAC,CAAC;IAC/D,MAAM,EAAC,WAAW,EAAE,eAAe,EAAC,GAClC,gCAAgC,CAAC,KAAK,CAAC,CAAC;IAE1C,MAAM,EAAC,WAAW,EAAC,GAAG,UAAU,CAAC,SAAS,CAAC,CAAC;IAE5C,MAAM,gBAAgB,GAAG,WAAW,CAAC,gBAAgB,IAAI,SAAS,CAAC,CAAC,mBAAmB;IACvF,MAAM,aAAa,GAAG,cAAc,CAAC,gBAAgB,CAAC,CAAC;IAEvD,OAAO,CACL,6BAAK,KAAK,EAAE,MAAM,CAAC,SAAS,CAAC,gBAAgB,CAAC;QAC5C,oBAAC,cAAc,IAAC,GAAG,EAAE,SAAS,KAAM,WAAW,KAAM,eAAe,GAAI;QACvE,WAAW,IAAI,CACd,oBAAC,aAAa,IACZ,gBAAgB,EAAE,gBAAgB,EAClC,aAAa,EAAE,aAAa,GAC5B,CACH,CACG,CACP,CAAC;AACJ,CAAC;AAED,SAAS,gCAAgC,CACvC,KAAuC;IAEvC,MAAM,oBAAoB,GAAG,6BAA6B,EAAE,CAAC;IAC7D,MAAM,WAAW,GAAG,OAAO,CAA6B,GAAG,EAAE;QAC3D,MAAM,YAAY,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;QAC5C,OAAO;YACL,GAAG,KAAK;YACR,YAAY;YACZ,KAAK,EAAE,qBAAqB,KAAK,CAAC,eAAe,EAAE;YACnD,QAAQ,EAAE,KAAK,CAAC,eAAe;YAC/B,oBAAoB;SACrB,CAAC;IACJ,CAAC,EAAE,CAAC,oBAAoB,EAAE,KAAK,CAAC,CAAC,CAAC;IAElC,MAAM,eAAe,GAAG,OAAO,CAAwB,GAAG,EAAE;QAC1D,OAAO;YACL,qBAAqB,EAAE,GAAG,EAAE;gBAC1B,MAAM,IAAI,KAAK,CAAC,UAAU,CAAC,CAAC;YAC9B,CAAC;YACD,SAAS,EAAE,KAAK,CAAC,SAAS;YAC1B,cAAc,EAAE,KAAK,CAAC,cAAc;YACpC,kBAAkB,EAAE,KAAK,CAAC,kBAAkB;SAC7C,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,EAAC,WAAW,EAAE,eAAe,EAAC,CAAC;AACxC,CAAC"}
|
|
@@ -2,6 +2,8 @@ import React, { useMemo, useRef } from 'react';
|
|
|
2
2
|
import { CoinflowUtils, getHandlers, getWalletPubkey, } from './common';
|
|
3
3
|
import { CoinflowIFrame, useRandomHandleHeightChangeId, } from './CoinflowIFrame';
|
|
4
4
|
import { useOverlay } from './useOverlay';
|
|
5
|
+
import { invertHexColor, styles } from './Utils';
|
|
6
|
+
import { LoaderOverlay } from './Loader';
|
|
5
7
|
function useCoinflowPurchase(purchaseProps, version) {
|
|
6
8
|
const handleHeightChangeId = useRandomHandleHeightChangeId();
|
|
7
9
|
const iframeProps = useMemo(() => {
|
|
@@ -32,87 +34,4 @@ export function CoinflowPurchase(purchaseProps) {
|
|
|
32
34
|
React.createElement(CoinflowIFrame, { ref: iframeRef, ...iframeProps, ...messageHandlers }),
|
|
33
35
|
showOverlay && (React.createElement(LoaderOverlay, { loaderBackground: loaderBackground, invertedColor: invertedColor }))));
|
|
34
36
|
}
|
|
35
|
-
function LoaderOverlay({ loaderBackground, invertedColor, }) {
|
|
36
|
-
return (React.createElement("div", { style: styles.overlay(loaderBackground) },
|
|
37
|
-
React.createElement(LoaderGrid, { columns: 2 },
|
|
38
|
-
React.createElement(Loader, { loaderBackground: invertedColor }),
|
|
39
|
-
React.createElement(Loader, { loaderBackground: invertedColor })),
|
|
40
|
-
React.createElement(LoaderGrid, { columns: 1 },
|
|
41
|
-
React.createElement(Loader, { height: 80, loaderBackground: invertedColor })),
|
|
42
|
-
[...Array(3)].map((_, index) => (React.createElement(LoaderRow, { key: index },
|
|
43
|
-
React.createElement(Loader, { width: index < 2 ? 80 : 120, height: index < 2 ? 15 : 20, loaderBackground: invertedColor }),
|
|
44
|
-
React.createElement(Loader, { width: index < 2 ? 60 : 100, height: index < 2 ? 15 : 20, loaderBackground: invertedColor })))),
|
|
45
|
-
React.createElement(LoaderGrid, { columns: 1 },
|
|
46
|
-
React.createElement(Loader, { height: 60, loaderBackground: invertedColor })),
|
|
47
|
-
React.createElement(LoaderGrid, { columns: 1, width: "50%" },
|
|
48
|
-
React.createElement(Loader, { height: 10, loaderBackground: invertedColor })),
|
|
49
|
-
React.createElement(LoaderGrid, { columns: 1, width: "40%" },
|
|
50
|
-
React.createElement(Loader, { height: 6, loaderBackground: invertedColor }))));
|
|
51
|
-
}
|
|
52
|
-
function LoaderGrid({ children, columns, width = '100%', }) {
|
|
53
|
-
return (React.createElement("div", { style: {
|
|
54
|
-
...styles.grid,
|
|
55
|
-
gridTemplateColumns: `repeat(${columns}, 1fr)`,
|
|
56
|
-
width,
|
|
57
|
-
} }, children));
|
|
58
|
-
}
|
|
59
|
-
function LoaderRow({ children }) {
|
|
60
|
-
return React.createElement("div", { style: styles.row }, children);
|
|
61
|
-
}
|
|
62
|
-
function Loader({ loaderBackground, height = 40, width, }) {
|
|
63
|
-
return (React.createElement(React.Fragment, null,
|
|
64
|
-
React.createElement("div", { style: styles.loader(loaderBackground, height, width) }),
|
|
65
|
-
React.createElement("style", null, styles.keyframes)));
|
|
66
|
-
}
|
|
67
|
-
function invertHexColor(hex) {
|
|
68
|
-
hex = hex.replace(/^#/, '');
|
|
69
|
-
const rgb = hex.match(/.{2}/g)?.map(val => 255 - parseInt(val, 16)) || [];
|
|
70
|
-
return `#${rgb.map(val => val.toString(16).padStart(2, '0')).join('')}`;
|
|
71
|
-
}
|
|
72
|
-
const styles = {
|
|
73
|
-
container: (bg) => ({
|
|
74
|
-
position: 'relative',
|
|
75
|
-
height: '100%',
|
|
76
|
-
backgroundColor: bg,
|
|
77
|
-
}),
|
|
78
|
-
overlay: (bg) => ({
|
|
79
|
-
backgroundColor: bg,
|
|
80
|
-
display: 'flex',
|
|
81
|
-
color: 'gray',
|
|
82
|
-
position: 'absolute',
|
|
83
|
-
top: 0,
|
|
84
|
-
left: 0,
|
|
85
|
-
right: 0,
|
|
86
|
-
bottom: 0,
|
|
87
|
-
fontSize: 24,
|
|
88
|
-
alignItems: 'center',
|
|
89
|
-
flexDirection: 'column',
|
|
90
|
-
gap: '20px',
|
|
91
|
-
zIndex: 10,
|
|
92
|
-
padding: '20px',
|
|
93
|
-
}),
|
|
94
|
-
grid: {
|
|
95
|
-
display: 'grid',
|
|
96
|
-
gap: '20px',
|
|
97
|
-
width: '100%',
|
|
98
|
-
},
|
|
99
|
-
row: {
|
|
100
|
-
display: 'flex',
|
|
101
|
-
justifyContent: 'space-between',
|
|
102
|
-
width: '100%',
|
|
103
|
-
},
|
|
104
|
-
loader: (bg, height, width) => ({
|
|
105
|
-
width: width ? `${width}px` : '100%',
|
|
106
|
-
height: `${height}px`,
|
|
107
|
-
backgroundColor: bg,
|
|
108
|
-
borderRadius: '4px',
|
|
109
|
-
animation: 'pulse 1.5s infinite',
|
|
110
|
-
}),
|
|
111
|
-
keyframes: `
|
|
112
|
-
@keyframes pulse {
|
|
113
|
-
0%, 100% { opacity: 0.07; }
|
|
114
|
-
50% { opacity: 0.03; }
|
|
115
|
-
}
|
|
116
|
-
`,
|
|
117
|
-
};
|
|
118
37
|
//# sourceMappingURL=CoinflowPurchase.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CoinflowPurchase.js","sourceRoot":"","sources":["../../src/CoinflowPurchase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC,MAAM,OAAO,CAAC;AAC7C,OAAO,EAGL,aAAa,EACb,WAAW,EACX,eAAe,GAEhB,MAAM,UAAU,CAAC;AAClB,OAAO,EACL,cAAc,EAEd,6BAA6B,GAC9B,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"CoinflowPurchase.js","sourceRoot":"","sources":["../../src/CoinflowPurchase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC,MAAM,OAAO,CAAC;AAC7C,OAAO,EAGL,aAAa,EACb,WAAW,EACX,eAAe,GAEhB,MAAM,UAAU,CAAC;AAClB,OAAO,EACL,cAAc,EAEd,6BAA6B,GAC9B,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AACxC,OAAO,EAAC,cAAc,EAAE,MAAM,EAAC,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAC,aAAa,EAAC,MAAM,UAAU,CAAC;AAEvC,SAAS,mBAAmB,CAC1B,aAAoC,EACpC,OAAe;IAEf,MAAM,oBAAoB,GAAG,6BAA6B,EAAE,CAAC;IAC7D,MAAM,WAAW,GAAG,OAAO,CAAsB,GAAG,EAAE;QACpD,MAAM,YAAY,GAAG,eAAe,CAAC,aAAa,CAAC,CAAC;QACpD,OAAO;YACL,GAAG,aAAa;YAChB,YAAY;YACZ,KAAK,EAAE,YAAY,OAAO,IAAI,aAAa,CAAC,UAAU,EAAE;YACxD,WAAW,EAAE,aAAa,CAAC,cAAc,CAAC,aAAa,CAAC;YACxD,oBAAoB;SACrB,CAAC;IACJ,CAAC,EAAE,CAAC,oBAAoB,EAAE,aAAa,EAAE,OAAO,CAAC,CAAC,CAAC;IAEnD,MAAM,eAAe,GAAG,OAAO,CAAwB,GAAG,EAAE;QAC1D,OAAO;YACL,GAAG,WAAW,CAAC,aAAa,CAAC;YAC7B,kBAAkB,EAAE,aAAa,CAAC,kBAAkB;SACrD,CAAC;IACJ,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,OAAO,EAAC,WAAW,EAAE,eAAe,EAAC,CAAC;AACxC,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,aAAoC;IACnE,MAAM,SAAS,GAAG,MAAM,CAAiC,IAAI,CAAC,CAAC;IAC/D,MAAM,EAAC,WAAW,EAAE,eAAe,EAAC,GAAG,mBAAmB,CACxD,aAAa,EACb,KAAK,CACN,CAAC;IAEF,MAAM,EAAC,WAAW,EAAC,GAAG,UAAU,CAAC,SAAS,CAAC,CAAC;IAE5C,MAAM,gBAAgB,GAAG,WAAW,CAAC,gBAAgB,IAAI,SAAS,CAAC,CAAC,mBAAmB;IACvF,MAAM,aAAa,GAAG,cAAc,CAAC,gBAAgB,CAAC,CAAC;IAEvD,OAAO,CACL,6BAAK,KAAK,EAAE,MAAM,CAAC,SAAS,CAAC,gBAAgB,CAAC;QAC5C,oBAAC,cAAc,IAAC,GAAG,EAAE,SAAS,KAAM,WAAW,KAAM,eAAe,GAAI;QACvE,WAAW,IAAI,CACd,oBAAC,aAAa,IACZ,gBAAgB,EAAE,gBAAgB,EAClC,aAAa,EAAE,aAAa,GAC5B,CACH,CACG,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { CoinflowEnvs } from './common';
|
|
2
|
-
export declare function CoinflowPurchaseProtection({ coinflowEnv, merchantId }: {
|
|
2
|
+
export declare function CoinflowPurchaseProtection({ coinflowEnv, merchantId, }: {
|
|
3
3
|
coinflowEnv: CoinflowEnvs;
|
|
4
4
|
merchantId: string;
|
|
5
5
|
}): null;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { styles } from './Utils';
|
|
3
|
+
export function LoaderOverlay({ loaderBackground, invertedColor, }) {
|
|
4
|
+
return (React.createElement("div", { style: styles.overlay(loaderBackground) },
|
|
5
|
+
React.createElement(LoaderGrid, { columns: 2 },
|
|
6
|
+
React.createElement(Loader, { loaderBackground: invertedColor }),
|
|
7
|
+
React.createElement(Loader, { loaderBackground: invertedColor })),
|
|
8
|
+
React.createElement(LoaderGrid, { columns: 1 },
|
|
9
|
+
React.createElement(Loader, { height: 80, loaderBackground: invertedColor })),
|
|
10
|
+
[...Array(3)].map((_, index) => (React.createElement(LoaderRow, { key: index },
|
|
11
|
+
React.createElement(Loader, { width: index < 2 ? 80 : 120, height: index < 2 ? 15 : 20, loaderBackground: invertedColor }),
|
|
12
|
+
React.createElement(Loader, { width: index < 2 ? 60 : 100, height: index < 2 ? 15 : 20, loaderBackground: invertedColor })))),
|
|
13
|
+
React.createElement(LoaderGrid, { columns: 1 },
|
|
14
|
+
React.createElement(Loader, { height: 60, loaderBackground: invertedColor })),
|
|
15
|
+
React.createElement(LoaderGrid, { columns: 1, width: "50%" },
|
|
16
|
+
React.createElement(Loader, { height: 10, loaderBackground: invertedColor })),
|
|
17
|
+
React.createElement(LoaderGrid, { columns: 1, width: "40%" },
|
|
18
|
+
React.createElement(Loader, { height: 6, loaderBackground: invertedColor }))));
|
|
19
|
+
}
|
|
20
|
+
function LoaderGrid({ children, columns, width = '100%', }) {
|
|
21
|
+
return (React.createElement("div", { style: {
|
|
22
|
+
...styles.grid,
|
|
23
|
+
gridTemplateColumns: `repeat(${columns}, 1fr)`,
|
|
24
|
+
width,
|
|
25
|
+
} }, children));
|
|
26
|
+
}
|
|
27
|
+
function LoaderRow({ children }) {
|
|
28
|
+
return React.createElement("div", { style: styles.row }, children);
|
|
29
|
+
}
|
|
30
|
+
function Loader({ loaderBackground, height = 40, width, }) {
|
|
31
|
+
return (React.createElement(React.Fragment, null,
|
|
32
|
+
React.createElement("div", { style: styles.loader(loaderBackground, height, width) }),
|
|
33
|
+
React.createElement("style", null, styles.keyframes)));
|
|
34
|
+
}
|
|
35
|
+
//# sourceMappingURL=Loader.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Loader.js","sourceRoot":"","sources":["../../src/Loader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,MAAM,EAAC,MAAM,SAAS,CAAC;AAE/B,MAAM,UAAU,aAAa,CAAC,EAC5B,gBAAgB,EAChB,aAAa,GAId;IACC,OAAO,CACL,6BAAK,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,gBAAgB,CAAC;QAC1C,oBAAC,UAAU,IAAC,OAAO,EAAE,CAAC;YACpB,oBAAC,MAAM,IAAC,gBAAgB,EAAE,aAAa,GAAI;YAC3C,oBAAC,MAAM,IAAC,gBAAgB,EAAE,aAAa,GAAI,CAChC;QACb,oBAAC,UAAU,IAAC,OAAO,EAAE,CAAC;YACpB,oBAAC,MAAM,IAAC,MAAM,EAAE,EAAE,EAAE,gBAAgB,EAAE,aAAa,GAAI,CAC5C;QACZ,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAC/B,oBAAC,SAAS,IAAC,GAAG,EAAE,KAAK;YACnB,oBAAC,MAAM,IACL,KAAK,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,EAC3B,MAAM,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EAC3B,gBAAgB,EAAE,aAAa,GAC/B;YACF,oBAAC,MAAM,IACL,KAAK,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,EAC3B,MAAM,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EAC3B,gBAAgB,EAAE,aAAa,GAC/B,CACQ,CACb,CAAC;QACF,oBAAC,UAAU,IAAC,OAAO,EAAE,CAAC;YACpB,oBAAC,MAAM,IAAC,MAAM,EAAE,EAAE,EAAE,gBAAgB,EAAE,aAAa,GAAI,CAC5C;QACb,oBAAC,UAAU,IAAC,OAAO,EAAE,CAAC,EAAE,KAAK,EAAC,KAAK;YACjC,oBAAC,MAAM,IAAC,MAAM,EAAE,EAAE,EAAE,gBAAgB,EAAE,aAAa,GAAI,CAC5C;QACb,oBAAC,UAAU,IAAC,OAAO,EAAE,CAAC,EAAE,KAAK,EAAC,KAAK;YACjC,oBAAC,MAAM,IAAC,MAAM,EAAE,CAAC,EAAE,gBAAgB,EAAE,aAAa,GAAI,CAC3C,CACT,CACP,CAAC;AACJ,CAAC;AAED,SAAS,UAAU,CAAC,EAClB,QAAQ,EACR,OAAO,EACP,KAAK,GAAG,MAAM,GAC6C;IAC3D,OAAO,CACL,6BACE,KAAK,EAAE;YACL,GAAG,MAAM,CAAC,IAAI;YACd,mBAAmB,EAAE,UAAU,OAAO,QAAQ;YAC9C,KAAK;SACN,IAEA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC;AAED,SAAS,SAAS,CAAC,EAAC,QAAQ,EAA8B;IACxD,OAAO,6BAAK,KAAK,EAAE,MAAM,CAAC,GAAG,IAAG,QAAQ,CAAO,CAAC;AAClD,CAAC;AAED,SAAS,MAAM,CAAC,EACd,gBAAgB,EAChB,MAAM,GAAG,EAAE,EACX,KAAK,GAKN;IACC,OAAO,CACL;QACE,6BAAK,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,gBAAgB,EAAE,MAAM,EAAE,KAAK,CAAC,GAAI;QAC9D,mCAAQ,MAAM,CAAC,SAAS,CAAS,CAChC,CACJ,CAAC;AACJ,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { CoinflowPurchaseProps } from './common';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
export declare function MobileWalletButton({ props, route, overlayDisplayOverride, children, alignItems }: {
|
|
3
|
+
export declare function MobileWalletButton({ props, route, overlayDisplayOverride, children, alignItems, }: {
|
|
4
4
|
props: CoinflowPurchaseProps & MobileWalletButtonProps;
|
|
5
5
|
route: string;
|
|
6
6
|
overlayDisplayOverride?: string;
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
export declare function invertHexColor(hex: string): string;
|
|
2
|
+
export declare const styles: {
|
|
3
|
+
container: (bg: string) => {
|
|
4
|
+
position: 'relative';
|
|
5
|
+
height: string;
|
|
6
|
+
backgroundColor: string;
|
|
7
|
+
};
|
|
8
|
+
overlay: (bg: string) => {
|
|
9
|
+
backgroundColor: string;
|
|
10
|
+
display: string;
|
|
11
|
+
color: string;
|
|
12
|
+
position: 'absolute';
|
|
13
|
+
top: number;
|
|
14
|
+
left: number;
|
|
15
|
+
right: number;
|
|
16
|
+
bottom: number;
|
|
17
|
+
fontSize: number;
|
|
18
|
+
alignItems: string;
|
|
19
|
+
flexDirection: 'column';
|
|
20
|
+
gap: string;
|
|
21
|
+
zIndex: number;
|
|
22
|
+
padding: string;
|
|
23
|
+
};
|
|
24
|
+
grid: {
|
|
25
|
+
display: string;
|
|
26
|
+
gap: string;
|
|
27
|
+
width: string;
|
|
28
|
+
};
|
|
29
|
+
row: {
|
|
30
|
+
display: string;
|
|
31
|
+
justifyContent: string;
|
|
32
|
+
width: string;
|
|
33
|
+
};
|
|
34
|
+
loader: (bg: string, height: number, width?: number) => {
|
|
35
|
+
width: string;
|
|
36
|
+
height: string;
|
|
37
|
+
backgroundColor: string;
|
|
38
|
+
borderRadius: string;
|
|
39
|
+
animation: string;
|
|
40
|
+
};
|
|
41
|
+
keyframes: string;
|
|
42
|
+
};
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
export function invertHexColor(hex) {
|
|
2
|
+
hex = hex.replace(/^#/, '');
|
|
3
|
+
const rgb = hex.match(/.{2}/g)?.map(val => 255 - parseInt(val, 16)) || [];
|
|
4
|
+
return `#${rgb.map(val => val.toString(16).padStart(2, '0')).join('')}`;
|
|
5
|
+
}
|
|
6
|
+
export const styles = {
|
|
7
|
+
container: (bg) => ({
|
|
8
|
+
position: 'relative',
|
|
9
|
+
height: '100%',
|
|
10
|
+
backgroundColor: bg,
|
|
11
|
+
}),
|
|
12
|
+
overlay: (bg) => ({
|
|
13
|
+
backgroundColor: bg,
|
|
14
|
+
display: 'flex',
|
|
15
|
+
color: 'gray',
|
|
16
|
+
position: 'absolute',
|
|
17
|
+
top: 0,
|
|
18
|
+
left: 0,
|
|
19
|
+
right: 0,
|
|
20
|
+
bottom: 0,
|
|
21
|
+
fontSize: 24,
|
|
22
|
+
alignItems: 'center',
|
|
23
|
+
flexDirection: 'column',
|
|
24
|
+
gap: '20px',
|
|
25
|
+
zIndex: 10,
|
|
26
|
+
padding: '20px',
|
|
27
|
+
}),
|
|
28
|
+
grid: {
|
|
29
|
+
display: 'grid',
|
|
30
|
+
gap: '20px',
|
|
31
|
+
width: '100%',
|
|
32
|
+
},
|
|
33
|
+
row: {
|
|
34
|
+
display: 'flex',
|
|
35
|
+
justifyContent: 'space-between',
|
|
36
|
+
width: '100%',
|
|
37
|
+
},
|
|
38
|
+
loader: (bg, height, width) => ({
|
|
39
|
+
width: width ? `${width}px` : '100%',
|
|
40
|
+
height: `${height}px`,
|
|
41
|
+
backgroundColor: bg,
|
|
42
|
+
borderRadius: '4px',
|
|
43
|
+
animation: 'pulse 1.5s infinite',
|
|
44
|
+
}),
|
|
45
|
+
keyframes: `
|
|
46
|
+
@keyframes pulse {
|
|
47
|
+
0%, 100% { opacity: 0.07; }
|
|
48
|
+
50% { opacity: 0.03; }
|
|
49
|
+
}
|
|
50
|
+
`,
|
|
51
|
+
};
|
|
52
|
+
//# sourceMappingURL=Utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Utils.js","sourceRoot":"","sources":["../../src/Utils.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,cAAc,CAAC,GAAW;IACxC,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;IAC5B,MAAM,GAAG,GAAG,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,QAAQ,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;IAC1E,OAAO,IAAI,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;AAC1E,CAAC;AAED,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,SAAS,EAAE,CAAC,EAAU,EAAE,EAAE,CAAC,CAAC;QAC1B,QAAQ,EAAE,UAAmB;QAC7B,MAAM,EAAE,MAAM;QACd,eAAe,EAAE,EAAE;KACpB,CAAC;IACF,OAAO,EAAE,CAAC,EAAU,EAAE,EAAE,CAAC,CAAC;QACxB,eAAe,EAAE,EAAE;QACnB,OAAO,EAAE,MAAM;QACf,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE,UAAmB;QAC7B,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;QACT,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,QAAQ;QACpB,aAAa,EAAE,QAAiB;QAChC,GAAG,EAAE,MAAM;QACX,MAAM,EAAE,EAAE;QACV,OAAO,EAAE,MAAM;KAChB,CAAC;IACF,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;QACf,GAAG,EAAE,MAAM;QACX,KAAK,EAAE,MAAM;KACd;IACD,GAAG,EAAE;QACH,OAAO,EAAE,MAAM;QACf,cAAc,EAAE,eAAe;QAC/B,KAAK,EAAE,MAAM;KACd;IACD,MAAM,EAAE,CAAC,EAAU,EAAE,MAAc,EAAE,KAAc,EAAE,EAAE,CAAC,CAAC;QACvD,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM;QACpC,MAAM,EAAE,GAAG,MAAM,IAAI;QACrB,eAAe,EAAE,EAAE;QACnB,YAAY,EAAE,KAAK;QACnB,SAAS,EAAE,qBAAqB;KACjC,CAAC;IACF,SAAS,EAAE;;;;;GAKV;CACF,CAAC"}
|
|
@@ -36,7 +36,7 @@ import { MerchantIdOrCheckoutJwt, CoinflowCardNumberInputProps, CoinflowCvvOnlyI
|
|
|
36
36
|
*
|
|
37
37
|
* ```
|
|
38
38
|
*/
|
|
39
|
-
export declare const CoinflowCardNumberInput: React.
|
|
39
|
+
export declare const CoinflowCardNumberInput: React.NamedExoticComponent<(CoinflowCardNumberInputProps & MerchantIdOrCheckoutJwt) & React.RefAttributes<unknown>>;
|
|
40
40
|
/**
|
|
41
41
|
* The CVV number input for creating a new tokenized card
|
|
42
42
|
*/
|
|
@@ -78,7 +78,7 @@ export declare const CoinflowCvvInput: React.MemoExoticComponent<() => React.JSX
|
|
|
78
78
|
*
|
|
79
79
|
* ```
|
|
80
80
|
*/
|
|
81
|
-
export declare const CoinflowCvvOnlyInput: React.
|
|
81
|
+
export declare const CoinflowCvvOnlyInput: React.NamedExoticComponent<(CoinflowCvvOnlyInputProps & MerchantIdOrCheckoutJwt) & React.RefAttributes<unknown>>;
|
|
82
82
|
/**
|
|
83
83
|
* Allows merchants to collect card information from their customers in a PCI-compliant way and receive the tokenized card number.
|
|
84
84
|
* The `CoinflowCardOnlyInput` is used for collecting a debit card for users to be able to withdraw their funds directly to.
|
|
@@ -115,12 +115,12 @@ export declare const CoinflowCvvOnlyInput: React.MemoExoticComponent<React.Forwa
|
|
|
115
115
|
*
|
|
116
116
|
* ```
|
|
117
117
|
*/
|
|
118
|
-
export declare const CoinflowCardOnlyInput: React.
|
|
118
|
+
export declare const CoinflowCardOnlyInput: React.NamedExoticComponent<(CoinflowCvvOnlyInputProps & MerchantIdOrCheckoutJwt) & React.RefAttributes<unknown>>;
|
|
119
119
|
/** @deprecated Use CoinflowCardForm instead */
|
|
120
|
-
export declare const CoinflowLegacyCardNumberInput: React.
|
|
120
|
+
export declare const CoinflowLegacyCardNumberInput: React.NamedExoticComponent<(CoinflowCardNumberInputProps & MerchantIdOrCheckoutJwt) & React.RefAttributes<unknown>>;
|
|
121
121
|
/** @deprecated Use CoinflowCvvForm instead */
|
|
122
122
|
export declare const CoinflowLegacyCvvInput: React.MemoExoticComponent<() => React.JSX.Element>;
|
|
123
123
|
/** @deprecated Use CoinflowCvvForm instead */
|
|
124
|
-
export declare const CoinflowLegacyCvvOnlyInput: React.
|
|
124
|
+
export declare const CoinflowLegacyCvvOnlyInput: React.NamedExoticComponent<(CoinflowCvvOnlyInputProps & MerchantIdOrCheckoutJwt) & React.RefAttributes<unknown>>;
|
|
125
125
|
/** @deprecated Use CoinflowCardNumberForm instead */
|
|
126
|
-
export declare const CoinflowLegacyCardOnlyInput: React.
|
|
126
|
+
export declare const CoinflowLegacyCardOnlyInput: React.NamedExoticComponent<(CoinflowCvvOnlyInputProps & MerchantIdOrCheckoutJwt) & React.RefAttributes<unknown>>;
|
|
@@ -21,15 +21,15 @@ export interface CardFormTokenResponse {
|
|
|
21
21
|
export interface CardFormRef {
|
|
22
22
|
tokenize(): Promise<CardFormTokenResponse>;
|
|
23
23
|
}
|
|
24
|
-
export declare const CoinflowCardForm: React.
|
|
25
|
-
export declare const CoinflowCardNumberForm: React.
|
|
26
|
-
export declare const CoinflowCvvForm: React.
|
|
24
|
+
export declare const CoinflowCardForm: React.NamedExoticComponent<CoinflowCardFormProps & React.RefAttributes<CardFormRef>>;
|
|
25
|
+
export declare const CoinflowCardNumberForm: React.NamedExoticComponent<CoinflowCardNumberFormProps & React.RefAttributes<CardFormRef>>;
|
|
26
|
+
export declare const CoinflowCvvForm: React.NamedExoticComponent<CoinflowCvvFormProps & React.RefAttributes<CardFormRef>>;
|
|
27
27
|
/** @deprecated Use CoinflowCardForm instead */
|
|
28
|
-
export declare const CoinflowCardFormV2: React.
|
|
28
|
+
export declare const CoinflowCardFormV2: React.NamedExoticComponent<CoinflowCardFormProps & React.RefAttributes<CardFormRef>>;
|
|
29
29
|
/** @deprecated Use CoinflowCardNumberForm instead */
|
|
30
|
-
export declare const CoinflowCardNumberFormV2: React.
|
|
30
|
+
export declare const CoinflowCardNumberFormV2: React.NamedExoticComponent<CoinflowCardNumberFormProps & React.RefAttributes<CardFormRef>>;
|
|
31
31
|
/** @deprecated Use CoinflowCvvForm instead */
|
|
32
|
-
export declare const CoinflowCvvFormV2: React.
|
|
32
|
+
export declare const CoinflowCvvFormV2: React.NamedExoticComponent<CoinflowCvvFormProps & React.RefAttributes<CardFormRef>>;
|
|
33
33
|
/** @deprecated Use CardFormRef instead */
|
|
34
34
|
export type CardFormV2Ref = CardFormRef;
|
|
35
35
|
/** @deprecated Use CardFormTokenResponse instead */
|
|
@@ -4,10 +4,12 @@ import { CoinflowUtils, IFrameMessageMethods, } from '../common';
|
|
|
4
4
|
function useCardFormIframe({ variant, merchantId, env, theme, token, onLoad, }) {
|
|
5
5
|
const iframeRef = useRef(null);
|
|
6
6
|
const [loaded, setLoaded] = useState(false);
|
|
7
|
+
const [iframeHeight, setIframeHeight] = useState(null);
|
|
7
8
|
const url = useMemo(() => {
|
|
8
9
|
const baseUrl = CoinflowUtils.getCoinflowBaseUrl(env);
|
|
9
10
|
const url = new URL(`/form/v2/${variant}`, baseUrl);
|
|
10
11
|
url.searchParams.append('merchantId', merchantId);
|
|
12
|
+
url.searchParams.append('useHeightChange', 'true');
|
|
11
13
|
if (theme) {
|
|
12
14
|
url.searchParams.append('theme', LZString.compressToEncodedURIComponent(JSON.stringify(theme)));
|
|
13
15
|
}
|
|
@@ -27,6 +29,12 @@ function useCardFormIframe({ variant, merchantId, env, theme, token, onLoad, })
|
|
|
27
29
|
setLoaded(true);
|
|
28
30
|
onLoad?.();
|
|
29
31
|
}
|
|
32
|
+
else if (parsed.method === IFrameMessageMethods.HeightChange) {
|
|
33
|
+
const parsedHeight = Number(parsed.data);
|
|
34
|
+
if (Number.isFinite(parsedHeight) && parsedHeight > 0) {
|
|
35
|
+
setIframeHeight(parsedHeight);
|
|
36
|
+
}
|
|
37
|
+
}
|
|
30
38
|
}
|
|
31
39
|
catch {
|
|
32
40
|
// not JSON, ignore
|
|
@@ -73,42 +81,44 @@ function useCardFormIframe({ variant, merchantId, env, theme, token, onLoad, })
|
|
|
73
81
|
}
|
|
74
82
|
};
|
|
75
83
|
window.addEventListener('message', handler);
|
|
76
|
-
|
|
84
|
+
const targetOrigin = new URL(CoinflowUtils.getCoinflowBaseUrl(env))
|
|
85
|
+
.origin;
|
|
86
|
+
iframeRef.current.contentWindow.postMessage('tokenize', targetOrigin);
|
|
77
87
|
});
|
|
78
88
|
}, [env]);
|
|
79
|
-
return { iframeRef, url, loaded, tokenize };
|
|
89
|
+
return { iframeRef, url, loaded, tokenize, iframeHeight };
|
|
80
90
|
}
|
|
81
91
|
const CoinflowCardFormComponent = forwardRef((props, ref) => {
|
|
82
|
-
const { iframeRef, url, loaded, tokenize } = useCardFormIframe({
|
|
92
|
+
const { iframeRef, url, loaded, tokenize, iframeHeight } = useCardFormIframe({
|
|
83
93
|
...props,
|
|
84
94
|
variant: 'card-form',
|
|
85
95
|
});
|
|
86
96
|
useImperativeHandle(ref, () => ({ tokenize }), [tokenize]);
|
|
87
|
-
return (React.createElement(CardFormIFrame, { iframeRef: iframeRef, url: url, loaded: loaded, title: "Card Form" }));
|
|
97
|
+
return (React.createElement(CardFormIFrame, { iframeRef: iframeRef, url: url, loaded: loaded, iframeHeight: iframeHeight, title: "Card Form" }));
|
|
88
98
|
});
|
|
89
99
|
const CoinflowCardNumberFormComponent = forwardRef((props, ref) => {
|
|
90
|
-
const { iframeRef, url, loaded, tokenize } = useCardFormIframe({
|
|
100
|
+
const { iframeRef, url, loaded, tokenize, iframeHeight } = useCardFormIframe({
|
|
91
101
|
...props,
|
|
92
102
|
variant: 'card-number-form',
|
|
93
103
|
});
|
|
94
104
|
useImperativeHandle(ref, () => ({ tokenize }), [tokenize]);
|
|
95
|
-
return (React.createElement(CardFormIFrame, { iframeRef: iframeRef, url: url, loaded: loaded, title: "Card Number Form" }));
|
|
105
|
+
return (React.createElement(CardFormIFrame, { iframeRef: iframeRef, url: url, loaded: loaded, iframeHeight: iframeHeight, title: "Card Number Form" }));
|
|
96
106
|
});
|
|
97
107
|
const CoinflowCvvFormComponent = forwardRef((props, ref) => {
|
|
98
|
-
const { iframeRef, url, loaded, tokenize } = useCardFormIframe({
|
|
108
|
+
const { iframeRef, url, loaded, tokenize, iframeHeight } = useCardFormIframe({
|
|
99
109
|
...props,
|
|
100
110
|
variant: 'cvv-form',
|
|
101
111
|
});
|
|
102
112
|
useImperativeHandle(ref, () => ({ tokenize }), [tokenize]);
|
|
103
|
-
return (React.createElement(CardFormIFrame, { iframeRef: iframeRef, url: url, loaded: loaded, title: "CVV Form" }));
|
|
113
|
+
return (React.createElement(CardFormIFrame, { iframeRef: iframeRef, url: url, loaded: loaded, iframeHeight: iframeHeight, title: "CVV Form" }));
|
|
104
114
|
});
|
|
105
|
-
function CardFormIFrame({ iframeRef, url, loaded, title, }) {
|
|
115
|
+
function CardFormIFrame({ iframeRef, url, loaded, iframeHeight, title, }) {
|
|
106
116
|
return (React.createElement("iframe", { ref: iframeRef, src: url, title: title, frameBorder: "0", allow: "payment", style: {
|
|
107
117
|
width: '100%',
|
|
108
|
-
height: '
|
|
118
|
+
height: iframeHeight ? `${iframeHeight}px` : '56px',
|
|
109
119
|
border: 'none',
|
|
110
120
|
opacity: loaded ? 1 : 0,
|
|
111
|
-
transition: 'opacity 300ms linear',
|
|
121
|
+
transition: 'opacity 300ms linear, height 150ms ease-out',
|
|
112
122
|
} }));
|
|
113
123
|
}
|
|
114
124
|
export const CoinflowCardForm = memo(CoinflowCardFormComponent);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CoinflowCardFormV2.js","sourceRoot":"","sources":["../../../src/card-form/CoinflowCardFormV2.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,UAAU,EACV,IAAI,EACJ,WAAW,EACX,SAAS,EACT,mBAAmB,EACnB,eAAe,EACf,OAAO,EACP,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,QAAQ,MAAM,WAAW,CAAC;AACjC,OAAO,EAEL,aAAa,EACb,oBAAoB,GAErB,MAAM,WAAW,CAAC;AA6BnB,SAAS,iBAAiB,CAAC,EACzB,OAAO,EACP,UAAU,EACV,GAAG,EACH,KAAK,EACL,KAAK,EACL,MAAM,GACyD;IAC/D,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAClD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"CoinflowCardFormV2.js","sourceRoot":"","sources":["../../../src/card-form/CoinflowCardFormV2.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { CoinflowEnvs, setTokenExScriptTag, TokenExIframe, MerchantIdOrCheckoutJwt } from '../common';
|
|
2
|
-
export declare function useCardFormIframe({ env, merchantId, checkoutJwt }: {
|
|
1
|
+
import { CoinflowEnvs, doInitializeCvvOnlyTokenExIframe, doInitializeTokenExCardOnlyIframe, doInitializeTokenExIframe, setTokenExScriptTag, TokenExIframe, MerchantIdOrCheckoutJwt } from '../common';
|
|
2
|
+
export declare function useCardFormIframe({ env, merchantId, checkoutJwt, }: {
|
|
3
3
|
env: CoinflowEnvs;
|
|
4
4
|
} & MerchantIdOrCheckoutJwt): {
|
|
5
5
|
tokenExIframe: TokenExIframe | undefined;
|
|
6
|
-
initializeTokenExIframe: (args: Omit<
|
|
7
|
-
initializeCvvOnlyTokenExIframe: (args: Omit<
|
|
8
|
-
initializeTokenExCardOnlyIframe: (args: Omit<
|
|
6
|
+
initializeTokenExIframe: (args: Omit<Parameters<typeof doInitializeTokenExIframe>[0], 'env' | 'tokenExScriptLoaded' | 'setCachedToken' | 'setLoaded'>) => Promise<TokenExIframe | undefined>;
|
|
7
|
+
initializeCvvOnlyTokenExIframe: (args: Omit<Parameters<typeof doInitializeCvvOnlyTokenExIframe>[0], 'env' | 'tokenExScriptLoaded' | 'setCachedToken' | 'setLoaded'>) => Promise<TokenExIframe | undefined>;
|
|
8
|
+
initializeTokenExCardOnlyIframe: (args: Omit<Parameters<typeof doInitializeTokenExCardOnlyIframe>[0], 'env' | 'tokenExScriptLoaded' | 'setCachedToken' | 'setLoaded'>) => Promise<TokenExIframe | undefined>;
|
|
9
9
|
loaded: boolean;
|
|
10
10
|
cachedToken: string | undefined;
|
|
11
11
|
setTokenExScriptTag: typeof setTokenExScriptTag;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { CoinflowEnvs } from './CoinflowTypes';
|
|
2
|
-
export declare function initCoinflowProtection({ coinflowEnv, merchantId }: {
|
|
2
|
+
export declare function initCoinflowProtection({ coinflowEnv, merchantId, }: {
|
|
3
3
|
coinflowEnv: CoinflowEnvs;
|
|
4
4
|
merchantId: string;
|
|
5
5
|
}): Promise<void>;
|