Card.io

Simplify payment form completion using the device camera and machine vision to read any credit card. Hold your card in front of the card to capture cardholder name, card number, and expiry date without typing.

The Card.io module improves customer conversion by simplifying the payment process. All machine vision image processing is performed locally on the device, thus sensitive cardholder information remains secure within your website.

Formerly a commercial pay-for-use SDK, Card.io is now open source supported by PayPal. Therefore there are no additional licenses or ongoing fees to use this module.

👍

Developer Demo

Display our demo page in your app to test during development https://median.dev/cardio/

Implementation Guide

How to Scan a Credit Card

Define a JavaScript callback function to handle the scan result:

JavaScript

function processCard(data) {
  alert(JSON.stringify(data));
}

Trigger the card scanner using:

↔️Median JavaScript Bridge

To initiate a scan, open the URL:

JavaScript

median.card_io.scanCard({
  callbackFunction: processCard
});

Available Scanning Options

Customize the card scanning experience by passing optional parameters:

Option	Default	Description
requireExpiry	true	Require card expiration date
scanExpiry	true	Automatically detect expiry date
requireCVV	true	Request the card’s CVV code
requirePostalCode	false	Request postal/ZIP code
numericPostalCode	false	Expect numeric postal codes (e.g., U.S. ZIP codes)
requireCardholderName	false	Request cardholder’s name
useCardIOLogo	false	Display Card.io logo (instead of PayPal logo)
hideCardIOLogo	true	Hide all logos from the scan UI
instructions	(string)	Display custom instructions on the scan screen

Example: Scan with Postal Code Requirements

To collect the cardholder’s postal code and specify that it must be numeric:

↔️Median JavaScript Bridge

JavaScript

median.card_io.scanCard({
  callbackFunction: processCard,
  requirePostalCode: true,
  numericPostalCode: true
});

Scan Result Format

After a successful scan, your callback function receives a JavaScript object with the extracted card data. Fields may include:

• cardNumber: (string)
• cardholderName: (string)
• expiryMonth: (number)
• expiryYear: (number)
• cardType: (string) – One of "visa", "mastercard", "amex", "discover", or "jcb"