$
npm install @coinflowlabs/react

1
function CardTokenizationForm() {
2
  const ref = useRef<{
3
    getToken(): Promise<CoinflowCardTokenResponse>;
4
  }>();
5
  const [expYear, setExpYear] = useState<string>(''); // 24, not 2024
6
  const [expMonth, setExpMonth] = useState<string>(''); // 01 for Jan, 12 for Dec
7
  return (
8
    <>
9
      <div style={{height: '50px'}}>
10
        <CoinflowCardOnlyInput
11
          merchantId={'YOUR_MERCHANT_ID'} // Change to your merchant id
12
          ref={ref}
13
          cardType={CardType.VISA} // CardType.VISA , CardType.MASTERCARD, CardType.DISCOVER, CardType.AMEX
14
          token={''}
15
          env={'sandbox'} // Change to prod
16
          debug={true}
17
          css={{
18
            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;',
19
            focus:
20
              'box-shadow: 0 0 6px 0 rgba(0, 132, 255, 0.5);border: 1px solid rgba(0, 132, 255, 0.5);outline: 0;',
21
            error:
22
              '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:
26
                'box-shadow: 0 0 6px 0 rgba(0, 132, 255, 0.5);border: 1px solid rgba(0, 132, 255, 0.5);outline: 0;',
27
              error:
28
                'box-shadow: 0 0 6px 0 rgba(224, 57, 57, 0.5);border: 1px solid rgba(224, 57, 57, 0.5);',
29
            },
30
          }}
31
          origins={[window.location.origin]}
32
        />
33
      </div>
34
      <div>
35
        <input
36
          placeholder="Expiration Month"
37
          className="px-4 h-12 outline-none text-xs"
38
          value={expMonth}
39
          onChange={e => setExpMonth(e.target.value)}
40
          style={{maxHeight: '50px', width: '10%', border: '1px solid black'}}
41
        />
42
43
        <input
44
          placeholder="Expiration Year"
45
          className="px-4 h-12 outline-none text-xs"
46
          value={expYear}
47
          onChange={e => setExpYear(e.target.value)}
48
          style={{maxHeight: '50px', width: '10%', border: '1px solid black'}}
49
        />
50
51
        <button
52
          className={'absolute top-1 right-1'}
53
          id={'getToken'}
54
          onClick={() => {
55
            ref.current
56
              ?.getToken()
57
              .then(tokenData => console.log('Token: ', tokenData.token))
58
              .catch(err => console.error('GET TOKEN ERROR', {err}));
59
          }}
60
        >
61
          Get Token
62
        </button>
63
      </div>
64
    </>
65
}

1
const options = {
2
  method: 'POST',
3
  headers: {
4
    accept: 'application/json',
5
    'content-type': 'application/json',
6
    'x-coinflow-auth-user-id': process.env.USER_UNIQUE_IDENTIFIER, // Replace with Unique Identifier for the user in your system
7
    Authorization: process.env.YOUR_API_KEY // Replace with your API key
8
  },
9
  body: JSON.stringify({
10
    cardToken: "CARD_TOKEN", // Replace with the actual tokenized card data
11
    expYear: "CARD_EXPIRY_YEAR", // Replace with the card's expiry year provided by the user
12
    expMonth: "CARD_EXPIRY_MONTH"  // Replace with the card's expiry month provided by the user
13
  })
14
};
15
16
fetch('https://api-sandbox.coinflow.cash/api/withdraw/debit-card', options)
17
  .then(response => response.json())
18
  .then(response => console.log(response))
19
  .catch(err => console.error(err));

1
{"success":true}