Auto-Populate Card Details From a Photo

Overview

Instead of asking a customer to manually type in their card number, expiration date, and CVV, you can let them take a photo of their physical card. Coinflow extracts the card details from the image, stores them as a token in Coinflow’s PCI-compliant vault, and returns the token so you can complete the purchase.

The flow is two steps:

1. Extract the card — send the photo to POST /tokenize/extract-card. The endpoint responds with a 307 redirect to Coinflow’s PCI-compliant vault proxy, so the card photo is processed there and never touches Coinflow’s servers. Following the redirect returns a token along with non-sensitive metadata (firstSix, lastFour, expirationMonth, expirationYear, and whether a CVV was captured).
2. Charge the card — pass the returned token as card.cardToken to POST /checkout/card/{merchantId} (Card Checkout) to complete the purchase.

Step 1: Extract the card from the image

Send a base64-encoded photo of the card in the image field. Optionally set mimeType (defaults to image/jpeg). Authenticate with a merchant API key that has the ADMIN scope.

1
curl -X POST https://api-sandbox.coinflow.cash/api/tokenize/extract-card \
2
     -H "Authorization: <apiKey>" \
3
     -H "Content-Type: application/json" \
4
     -d '{}'

The response contains the token you will use for checkout, plus metadata you can use to pre-fill and confirm the card in your UI. cvvCaptured tells you whether the CVV was readable from the photo — if it is false, prompt the customer to enter their CVV manually before charging.

1
{
2
  "token": "string",
3
  "firstSix": "string",
4
  "lastFour": "string",
5
  "expirationMonth": "string",
6
  "expirationYear": "string",
7
  "cvvCaptured": true
8
}

Step 2: Charge the card with the returned token

Use the token from Step 1 as the card.cardToken field of the Card Checkout request. This is the same endpoint used for any new-card (tokenized) purchase.

1
curl -X POST https://api-sandbox.coinflow.cash/api/checkout/card/merchantId \
2
     -H "x-coinflow-auth-session-key: <apiKey>" \
3
     -H "Content-Type: application/json" \
4
     -d '{
5
  "subtotal": {
6
    "cents": 1,
7
    "currency": "USD"
8
  },
9
  "card": {
10
    "cardToken": "string",
11
    "expYear": "string",
12
    "expMonth": "string",
13
    "email": "string",
14
    "firstName": "string",
15
    "lastName": "string",
16
    "address1": "string",
17
    "city": "string",
18
    "country": "string"
19
  }
20
}'

1
{
2
  "paymentId": "string",
3
  "authorizationExpiration": "string"
4
}

Putting it together

1
// 1. Extract the card from the photo
2
const extractResponse = await fetch(
3
  'https://api.coinflow.cash/api/tokenize/extract-card',
4
  {
5
    method: 'POST',
6
    headers: {
7
      Authorization: MERCHANT_API_KEY,
8
      'Content-Type': 'application/json',
9
    },
10
    body: JSON.stringify({
11
      image: base64CardPhoto,
12
      mimeType: 'image/png',
13
    }),
14
  }
15
);
16
17
const {token, expirationMonth, expirationYear, cvvCaptured} =
18
  await extractResponse.json();
19
20
// 2. Charge the card using the returned token
21
const checkoutResponse = await fetch(
22
  `https://api.coinflow.cash/api/checkout/card/${merchantId}`,
23
  {
24
    method: 'POST',
25
    headers: {
26
      Authorization: SESSION_KEY,
27
      'Content-Type': 'application/json',
28
    },
29
    body: JSON.stringify({
30
      card: {
31
        cardToken: token,
32
        expMonth: expirationMonth,
33
        expYear: expirationYear,
34
        // ...customer name and billing address fields
35
      },
36
      subtotal: {cents: 1000},
37
      // ...remaining checkout fields
38
    }),
39
  }
40
);