StoredPaymentMethods

[hemanth]

Introduction

Frequent entry of credit and debit card details can lead to a suboptimal user experience, especially in cases where users make repeated purchases on the same websites. To address this, the StoredPaymentMethods API is proposed as a secure way for browsers to store payment details, enabling users to retrieve them quickly during checkout. This API would streamline the experience by offering securely vaulted storage, similar to the approach used by Apple Pay or Google Pay, where stored payment methods can be seamlessly used without repeated manual input. Additionally, the API would complement the Payment Request API by allowing stored cards to be retrieved directly, enhancing flexibility in web-based transactions.

Use Cases

1. E-commerce Repeat Purchases: Users who frequently shop on a specific website can store their card details for future purchases, leading to faster, more seamless checkout experiences without re-entering payment information.

2. Subscription Services: When users subscribe to recurring services, the StoredPaymentMethods API can store payment data securely and reduce friction during renewals, improving retention.

3. One-Click Checkout: Websites can leverage stored payment methods to allow users to complete purchases with a single click, reducing the overall transaction time and increasing conversion rates.

Goals

• Create a secure, standardized method for web applications to store payment data that is accessible across sites that users authorize.
• Integrate with the existing Payment Request API for easy retrieval and usage during checkout.
• Ensure compliance with payment industry security standards, including data encryption and secure storage within the browser environment.

Non-goals

• This API does not cover the processing of payments itself; it only provides a secure mechanism to store and retrieve card information.
• It does not replace or circumvent the existing Apple Pay or Google Pay systems but rather provides an alternative option for storing and managing cards locally.

Proposed Solution

The StoredPaymentMethods API offers a high-level interface that enables web applications to securely store and retrieve credit or debit card information within the browser, accessible only with user consent. This API relies on browser-based secure vault storage to protect card data, with encrypted storage and retrieval methods ensuring robust security.

Core Interface: StoredPaymentMethods

The API’s main methods include:

• StoredPaymentMethods.save(cardData): Encrypts and securely stores card information within the browser.
• StoredPaymentMethods.retrieve(): Retrieves and decrypts stored payment methods with explicit user consent, returning available card details for authorized use.

interface StoredPaymentMethods {
    Promise<void> save(CardData cardData);
    Promise<CardData[]> retrieve();
}

CardData Object Structure

The CardData object includes:

• cardNumber: Masked version of the card number (e.g., **** **** **** 1234).
• expiryDate: Card expiration date in MM/YY format.
• cardHolderName: Name on the card.

Examples (Recommended)

Saving a Card

if ('StoredPaymentMethods' in navigator) {
    const storedPayment = new navigator.StoredPaymentMethods();
    const cardData = {
        cardNumber: '4111111111111111',
        expiryDate: '12/25',
        cardHolderName: 'Jane Doe'
    };
    storedPayment.save(cardData).then(() => {
        console.log("Card stored securely.");
    }).catch(error => {
        console.error("Card storage failed:", error);
    });
}

Retrieving Stored Cards for Payment Request

if ('StoredPaymentMethods' in navigator) {
    const storedPayment = new navigator.StoredPaymentMethods();
    storedPayment.retrieve().then(cards => {
        console.log("Available stored cards:", cards);
    }).catch(error => {
        console.error("Failed to retrieve stored cards:", error);
    });
}

Alternate Approaches

1. Integrating Directly with Payment Gateways: While integration with a gateway could work, a built-in browser API allows for cross-platform, consistent access to stored payment methods across any site that the user authorizes.

2. Third-Party Vault Services: Some e-commerce sites may opt for third-party solutions, but this typically increases implementation complexity and may lack the seamless browser-level integration that would support the Payment Request API directly.

Privacy & Security Considerations

The StoredPaymentMethods API includes the following privacy and security protections:

1. Encryption: All stored data is encrypted both at rest and in transit.

2. User Consent: Users must authorize access to stored card data explicitly, ensuring that websites cannot access payment methods without permission.

3. Secure Context Requirement: This API requires HTTPS, ensuring secure communication channels.

4. Data Scope: Each stored payment method is scoped to the user’s browser profile, ensuring that the data remains secure and accessible only to the intended user.

Let’s Discuss

• Should additional metadata, such as issuing bank or card type, be included for user convenience?
• Are there additional privacy controls users might find useful, such as time-based expiry for stored card data?
• How should we handle multi-device syncing for stored payment methods, if at all?
• Maybe this can gel well with #179 ?
• Maybe we could just have await navigator.storedPayments.save and retrieve instead?

[Crissov]

Could you please add some details how this would integrate or compete with other existing standards like Payment Request API?

[hemanth]

We can manually retrieve the data and pre-fill the payment form using the basic-card method?

Or maybe, we can enhance the Payment Request API to support store-card something like:

const storedCards = await getStoredPaymentMethods();
const supportedInstruments = [{ supportedMethods: 'basic-card' }];
if (storedCards.length > 0) {
    supportedInstruments.push({ supportedMethods: 'stored-card', data: { storedCards } });
}
const paymentRequest = new PaymentRequest(supportedInstruments, paymentDetails);