---
Source: https://docs.microblink.com/blinkcard/autofill-form
Title: Auto-fill a payment form
Description: Populate a checkout form's card number, expiry, CVV, and name fields from a BlinkCard scan result
---

# Auto-fill a payment form

Scanning a card and writing the values straight into your checkout form removes manual typing, which speeds up checkout and reduces entry errors.
This guide maps the [scan result](./result-reference.md) onto a typical payment form.

## A typical payment form

Assume a form with the usual fields:

```html
<form id="payment-form">
  <input name="cardNumber" autocomplete="cc-number" />
  <input name="cardholderName" autocomplete="cc-name" />
  <input name="expiry" autocomplete="cc-exp" placeholder="MM/YY" />
  <input name="cvv" autocomplete="cc-csc" />
</form>
```

## Fill the fields from the result

Register a result callback, read the fields from the first card account, and write them into the inputs.
Format the expiry from the parsed `month` and `year`:

```ts
blinkCard.addOnResultCallback((result) => {
  const form = document.getElementById("payment-form") as HTMLFormElement;
  const account = result.cardAccounts[0];

  setField(form, "cardNumber", account.cardNumber);
  setField(form, "cardholderName", result.cardholderName);
  setField(form, "cvv", account.cvv);

  const { month, year } = account.expiryDate;
  if (month && year) {
    const mm = String(month).padStart(2, "0");
    const yy = String(year).slice(-2);
    setField(form, "expiry", `${mm}/${yy}`);
  }

  void blinkCard.destroy();
});

function setField(form: HTMLFormElement, name: string, value: string | undefined) {
  if (!value) return;
  const input = form.elements.namedItem(name) as HTMLInputElement | null;
  if (input) input.value = value;
}
```

The `setField` helper skips fields that weren't extracted, so an absent CVV or cardholder name simply leaves that input untouched for the user to complete.

## Validate before submitting

The result reports whether the card number passed the [Luhn](https://en.wikipedia.org/wiki/Luhn_algorithm) checksum.
Use it to flag a likely misread before the user submits:

```ts
if (!result.cardAccounts[0].cardNumberValid) {
  // Ask the user to confirm the card number
}
```

## Let users review scanned values

Scanning gets the user most of the way there, but always let them review and correct the filled-in fields before submitting.
Treat the scan as a fast first pass, not a replacement for the editable form.

## Related articles

- [Extract specific fields](./extract-fields.md)
- [Result object reference](./result-reference.md)
- [Scan a card via camera](./scan-camera.md)


Last updated on Jun 18, 2026