---
updatedAt: 2026-09-09T14:51:24.000Z
agentTools:
  projectIndex: https://docs.median.co/llms.txt
---

# 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 <Anchor target="_blank" href="https://median.dev/cardio/"><https://median.dev/cardio/></Anchor><i class="fa fa-external-link" style="paddingLeft: 5px"></i>

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

<MedianLogo />

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

<MedianLogo />

```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"`