Payment Methods
The Payment Request API makes it easy for a browser to pass payment credentials, such as credit card details, to a merchant. The API can also accept payments through apps that process payments in nearly any way they wish: e-money, bank transfers, bitcoin, etc.
In the Payment Request API, payment methods are processes that can be invoked to process a payment, and can be thought of somewhat like "plugins" for the Payment Request API. Each payment method consists of a required payment method identifier and an optional detail parameter.
In the following example, we declare three payment methods: one that can process
Visa, Mastercard, and JCB cards via basic-card; Google Pay; and an Android app
called BobPay built to integrate with the Payment Request API via the URL
https://bobpay.xyz/pay.
const methodData = [{
supportedMethods: 'basic-card',
data: {
supportedNetworks: ['visa', 'master', 'jcb']
}
}, {
supportedMethods: 'https://google.com/pay',
data: {
...
}
}, {
supportedMethods: 'https://bobpay.xyz/pay'
}];
When the Payment Request UI is displayed to a customer during checkout, they see a subset of the payment methods specified by the merchant. The subset displayed to the user consists of all the payment methods available to the user on this device. The customer can select one of the methods to use for payment, as shown here:
Standardized vs. URL-based Payment Methods
There are two types of payment method identifiers: standardized and URL-based.
Standardized
Standardized payment methods are those that are literally standardized in their
respective W3C specifications, meaning that all parameters required to fill the
data property are defined in the specs.
You may already be familiar with the basic-card
method. At this time, August
2018, it is the only officially-standardized payment method, and is supported by
most browsers that implement the Payment Request API. However, because it
returns raw, untokenized card information, it is safe to say that basic-card
is not the future of web payments.
There is a registry of standardized payment methods in the spec, but there are other standardization candidates under active discussion:
- Basic Credit Transfer Payment (basic-credit-transfer): A payment method to transfer money between bank accounts.
- Tokenized Card Payment (tokenized-card): A payment method that provides a token representing a card instead of a raw card number.
- Interledger Payment Method (interledger): A payment method that transfers money using the interledger protocol.
- Basic SEPAmail Payment (sepamail): A payment method that supports payment by SEPAmail Applications such as RUBIS, GEMME, or JADE.
In the example below, basic-card is specified as the supportedMethods value
and requires that the data value be supplied, containing a list of the
supported card providers and card types.
supportedMethods: 'basic-card',
data: {
supportedNetworks: ['visa', 'master', 'jcb'],
supportedTypes: ['credit', 'debit', 'prepaid']
}
URL-based
URL-based payment methods are those that anyone can define independently,
without reliance on W3C standardization. Proprietary payment methods such as
Google Pay, Apple Pay, Samsung Pay are good examples. These payment methods are
specified using a unique URL identifier such as https://google.com/pay or
https://www.alipay.com/webpay.
The URLs represent a payment method and are usually associated with a particular payment app, but it is not necessarily a one-to-one relationship. It's possible for one payment method to be supported by multiple payment apps, or for one payment app to support multiple payment methods.
For example, a third-party payment app might support both the basic-card method
as well as a specific https://bobpay.xyz method.
Unlike standardized payment methods, URL-based payment methods have no registry. Anyone can develop and provide their own payment apps that support a payment method. This allows the Web Payments concept to inherently scale into quite a large payment ecosystem.
In the example below, Google Pay is invoked via its URL; any information to be
passed to the payment method can be supplied in the optional data value.
supportedMethods: 'https://google.com/pay',
data: {
...
}
Existing payment method identifiers
- Google Pay (
https://google.com/pay) - Apple Pay (
https://apple.com/apple-pay) - Samsung Pay (
https://spay.samsung.com)
Next Up
If you handle payments and are interested to build your own payment app, proceed to Android payment apps developer guide or web based payment apps developer guide to learn how to implement them.