Skip to main content
Version: v3000

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 onto a typical payment form.

A typical payment form​

Assume a form with the usual fields:

<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:

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 checksum. Use it to flag a likely misread before the user submits:

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.

Last updated on