Proposal: CardScanner API

Introduction

Users on the web often encounter friction during the checkout process when manually entering their credit or debit card information. This process is not only time-consuming but also prone to human error, especially on mobile devices with small keyboards. The proposed CardScanner API addresses this challenge by allowing users to scan their card information directly through the device's camera, making the experience faster, more accurate, and more convenient.

Furthermore, integrating this feature can enhance the existing Payment Request API, allowing users to securely populate payment fields with a scan and directly proceed with transactions.

Use Cases

E-commerce Checkout: During the payment process on an e-commerce site, users can utilize the CardScanner API to quickly scan their card details, reducing the time spent filling in forms and minimizing errors.
Subscription Services: When signing up for subscription-based services, users can use the camera scan feature to simplify and expedite the entry of payment information, encouraging more seamless conversions.
Financial Apps: Many financial services and banking applications require users to add card details for various services. The CardScanner API allows users to input this information more efficiently, making onboarding smoother and more user-friendly.

Goals

Enable a streamlined, secure API for accessing device camera data to read credit or debit card information.
Reduce checkout friction by minimizing the need for manual entry of payment card details.
Ensure robust privacy and security, with local processing and user-consent-driven data capture.
Ensure cross-browser compatibility and ease of implementation for developers.

Non-goals

This proposal does not address data storage or long-term retention of card details; card information will be temporarily accessible only within the session.
This proposal does not handle advanced card verification processes (e.g., reading CVV or AVS codes).
It does not extend to processing payments; it is solely intended for data capture of card details.

Proposed Solution

The CardScanner API provides a high-level JavaScript interface that allows developers to invoke the camera on a device to scan and capture credit or debit card details. This API follows the Permissions API for camera access, requiring explicit user consent before use. The scanned image is processed locally to extract details such as the card number, expiry date, and cardholder name, which are then returned as structured data for form population.

Core Interface: CardScanner

The CardScanner API includes a .scan() method that opens the camera for scanning and returns a Promise with the structured card details. The captured data includes fields such as cardNumber, expiryDate, and cardHolderName, which can be directly injected into relevant payment fields.

interface CardScanner {
    Promise<CardData> scan();
}

CardData Object Structure

The CardData object contains:

cardNumber: 16-digit card number
expiryDate: Expiry in MM/YY format
cardHolderName: Name of the cardholder

Examples

if ('CardScanner' in navigator) {
    const cardScanner = new navigator.CardScanner();
    cardScanner.scan().then(cardData => {
        console.log("Card Number:", cardData.cardNumber);
        console.log("Expiry Date:", cardData.expiryDate);
        console.log("Card Holder:", cardData.cardHolderName);
    }).catch(error => {
        console.error("Scanning failed:", error);
    });
}

In this example, a site requests camera permission to scan the card, populates fields, and improves user convenience during payment entry.

Alternate Approaches

Manual OCR Integration: While some apps embed third-party OCR (optical character recognition) tools, this lacks the standardization, privacy assurances, and native performance of a browser-integrated API.
Manual Data Entry: Users currently enter information manually, which is often slower, error-prone, and disruptive, especially on mobile devices.

Privacy & Security Considerations

The CardScanner API is designed with the following security and privacy safeguards:

Permission-Based Access: Camera access is only granted upon explicit user consent and operates only over secure HTTPS connections.
Local Processing: Card image data is processed directly on the device to extract card details, minimizing exposure of sensitive data. No data is transmitted externally without the user’s knowledge.
Ephemeral Data Handling: Card data is stored only in memory for the session’s duration and is erased once the task completes. No long-term storage occurs without explicit user action.

Let’s Discuss

Should additional verification options (e.g., CVV scanning) be included, or is it preferable to keep these separate for security reasons?
What specific measures would help developers handle failure cases (e.g., blurry scans)?
Would the addition of metadata, such as card type detection (e.g., Visa, MasterCard), be beneficial?

WICG / proposals