Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

Payment Method Basics

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 two payment methods: one that can process Visa, Mastercard, and JCB cards via basic-card; 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.

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

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.

Feedback

Was this page helpful?