Overview

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

Once the premium module has been added to your app, you may use the following Median JavaScript Bridge commands to access its functionality.

Scanning a card

To scan a credit card, define a function in JavaScript, for example:

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

↔️Median JavaScript Bridge

To initiate a scan, open the URL:

JavaScript

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

Scanning options

Optional query parameters include:

• requireExpiry: default true. Get the expiry date.
• scanExpiry: default true. Attempt to automatically determine the expiry date.
• requireCVV: default true. Get the CVV of the card.
• requirePostalCode: default false. Get the postal code of the cardholder.
• numericPostalCode: default false. Set to true if you know the postal code must be numeric.
• requireCardholderName: default false. Get the cardholder's name.
• useCardIOLogo: default false. Show card.io logo instead of Paypal logo. Obviated if hideCardIOLogo is true.
• hideCardIOLogo: default true. Hide the logo from the UI.
• instructions: a custom instruction string to show on the UI. Card.io provides a default string.

↔️Median JavaScript Bridge

For example, if you know the postal code must be numeric and to get the postal code of the cardholder, initiate a scan by opening the URL:

JavaScript

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

Scanning result

On a successful card scan, the callback function will be called with a JavaScript object as its parameter. The object may have the following fields:

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