$
npm install @coinflowlabs/react

1
import React, { useRef, useState } from 'react';
2
import {
3
  CoinflowCardTokenResponse,
4
  CoinflowCardNumberInput,
5
  CoinflowCvvInput
6
} from '@coinflowlabs/react';
7
8
function TokenizeNewCard() {
9
  const coinflowCardFormRef = useRef<{
10
    getToken(): Promise<CoinflowCardTokenResponse>;
11
  }>();
12
  const [cardFormExp, setCardFormExp] = useState('');
13
  const [token, setToken] = useState('')
14
15
  return (
16
    <div className="App">
17
      <div style={{ maxHeight: '50px', width: '100%', border: '1px solid black' }}>
18
        <CoinflowCardNumberInput
19
          merchantId={"test"} // Replace with your merchant id
20
          ref={coinflowCardFormRef}
21
          env="sandbox" // Change to 'prod' for production
22
          debug={true} // Change to false for production
23
          css={{
24
            base: 'font-family: Montserrat, sans-serif; padding: 0 8px; border: 0px; margin: 0; width: 100%; font-size: 13px; line-height: 48px; height: 48px; box-sizing: border-box; -moz-box-sizing: border-box;',
25
            focus: 'outline: 0;',
26
            error: 'box-shadow: 0 0 6px 0 rgba(224, 57, 57, 0.5); border: 1px solid rgba(224, 57, 57, 0.5);',
27
            cvv: {
28
              base: 'font-family: Montserrat, sans-serif; padding: 0 8px; border: 0px; margin: 0; width: 100%; font-size: 13px; line-height: 48px; height: 48px; box-sizing: border-box; -moz-box-sizing: border-box;',
29
              focus: 'outline: 0;',
30
              error: 'box-shadow: 0 0 6px 0 rgba(224, 57, 57, 0.5); border: 1px solid rgba(224, 57, 57, 0.5);',
31
            },
32
          }}
33
          origins={["http://localhost:3000"]} // Your website url
34
        />
35
      </div>
36
      <input
37
        placeholder={'Expiration'}
38
        className={'px-4 h-12 outline-none text-xs'}
39
        value={cardFormExp}
40
        onChange={e => setCardFormExp(e.target.value)}
41
      />
42
      <div className={'flex-1 h-12 w-full bg-blue-50'}>
43
        <CoinflowCvvInput />
44
      </div>
45
      <button
46
        id="getToken"
47
        onClick={() => {
48
          coinflowCardFormRef.current
49
            ?.getToken()
50
            .then(tokenData => setToken(tokenData.token))
51
            .catch(err => console.error('GET TOKEN ERROR', { err }));
52
        }}
53
      >
54
        Get Token
55
      </button>
56
    </div>
57
  );
58
}
59
60
export default TokenizeNewCard;

1
const options = {
2
  method: 'POST',
3
  headers: {
4
    accept: 'application/json',
5
    'content-type': 'application/json',
6
    'x-coinflow-auth-wallet': process.env.USER_WALLET, // Replace with user wallet
7
    'x-coinflow-auth-blockchain': process.env.BLOCKCHAIN // Replace with blockchain you're on
8
    Authorization: process.env.YOUR_API_KEY // Replace with your API key
9
  },
10
  body: JSON.stringify({
11
    "subtotal": {
12
      "cents": 100
13
    },
14
    "transactionData": {
15
      "type": "safeMint"
16
    },
17
    "authentication3DS": {
18
      "concludeChallenge": true,
19
      "deviceInfo": {
20
        "completionIndicator": 1
21
      }
22
    },
23
    "card": {
24
      "expYear": "2030",
25
      "expMonth": "05",
26
      "email": "test@test.com",
27
      "firstName": "test",
28
      "lastName": "test",
29
      "address1": "6175 Muller Isle",
30
      "city": "Port Alejandroland",
31
      "zip": "37475",
32
      "state": "MO",
33
      "country": "US",
34
      "cardToken": "411111YJM5TX1111"
35
    })
36
};
37
38
fetch('https://api-sandbox.coinflow.cash/api/checkout/card/test-merchant', options)
39
  .then(response => response.json())
40
  .then(response => console.log(response))
41
  .catch(err => console.error(err));

1
import React, { useRef, useState } from 'react';
2
import { CardType, CoinflowCvvOnlyInput, CoinflowCardTokenResponse } from '@coinflowlabs/react';
3
4
function RefreshCardToken() {
5
  const coinflowCardFormRef = useRef<{
6
    getToken(): Promise<CoinflowCardTokenResponse>;
7
  }>();
8
  const [token, setToken] = useState('')
9
10
  return (
11
    <div>
12
      <CoinflowCvvOnlyInput
13
        merchantId={"test"} // Replace with your merchant id
14
        ref={coinflowCardFormRef}
15
        cardType={CardType.VISA} // Get this from calling /api-reference/api-reference/customers/get-customer eg:] customer.cards[0].type
16
        token={'Token from customer saved card here'} // Get this from calling /api-reference/api-reference/customers/get-customer eg:] customer.cards[0].token
17
        env={'sandbox'} // Change to 'prod' on production
18
        debug={true}
19
        css={{
20
          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;',
21
          focus: 'box-shadow: 0 0 6px 0 rgba(0, 132, 255, 0.5); border: 1px solid rgba(0, 132, 255, 0.5); outline: 0;',
22
          error: 'box-shadow: 0 0 6px 0 rgba(224, 57, 57, 0.5); border: 1px solid rgba(224, 57, 57, 0.5);',
23
          cvv: {
24
            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;',
25
            focus: 'box-shadow: 0 0 6px 0 rgba(0, 132, 255, 0.5); border: 1px solid rgba(0, 132, 255, 0.5); outline: 0;',
26
            error: 'box-shadow: 0 0 6px 0 rgba(224, 57, 57, 0.5); border: 1px solid rgba(224, 57, 57, 0.5);',
27
          },
28
        }}
29
        origins={['http://localhost:3000']} // Replace with your url
30
      />
31
      <button
32
        className={'absolute top-1 right-1'}
33
        id={'getToken'}
34
        onClick={() => {
35
          coinflowCardFormRef.current?.getToken()
36
            .then(tokenData => setToken(tokenData.token))
37
            .catch(err => console.error('GET TOKEN ERROR', { err }));
38
        }}
39
      >
40
        Get Token
41
      </button>
42
    </div>
43
  );
44
}
45
46
export default RefreshCardToken;

1
const options = {
2
  method: 'POST',
3
  headers: {
4
    accept: 'application/json',
5
    'content-type': 'application/json',
6
    'x-coinflow-auth-wallet': process.env.USER_WALLET, // Replace with user wallet
7
    'x-coinflow-auth-blockchain': 'ETH', // Replace with blockchain you're on
8
    Authorization: process.env.YOUR_API_KEY // Replace with your API key
9
  },
10
  body: JSON.stringify({
11
    "subtotal": {
12
      "cents": 100
13
    },
14
    "transactionData": {
15
      "type": "safeMint"
16
    },
17
    "authentication3DS": {
18
      "concludeChallenge": true,
19
      "deviceInfo": {
20
        "completionIndicator": 1
21
      }
22
    },
23
    "token": "411111YJM5TX1111"
24
    })
25
};
26
27
fetch('https://api-sandbox.coinflow.cash/api/checkout/token/test-merchant', options)
28
  .then(response => response.json())
29
  .then(response => console.log(response))
30
  .catch(err => console.error(err));

1
{"success":true}