Smart Checkouts with Payment Request API
Online shopping should be fun and easy to do. Yet, it can be frustrating when it comes to the checkout forms, which can be time consuming to fill out and often require multiple steps to complete. Good news is, this difficult process just became simpler, — thanks to Payment Request API.
This article describes the basic concepts of Payment Request API, and how we have integrated it to develop our own payment method and make smart payments.
What is Payment Request API?
- It is an open and cross-browser standard that is meant to eliminate checkout forms by allowing the browsers to intermediate between the users, the merchant and the payment processor.
- It is a W3C standard, in progress, with a working draft at: https://www.w3.org/TR/payment-request/
- Main backers for this API are Google, Facebook, Microsoft
The aim of Payment Request API is to provide a fully standardized online payment flow, by collecting and passing the payment information between the payment method and the merchant, thus making checkout flows easier, faster and consistent across shopping sites that use it.
Do keep in mind that Payment Request API performs no arithmetic and does not process the payment transaction itself.
How it works [Developer aspect]
A web page creates a paymentRequest object in response to a user action, like clicking the buy button, which initiates a payment. This object allows for the exchange of payment information between the payment method and the merchant, while the user provides input to complete the transaction.
Object initialization
In order to use the API the first step is to create a payment request object, with the parameters containing the payment data:
var request = new PaymentRequest(supportedMethods, details, options);
The constructor takes three parameters, the supported payment methods, the payment details, and the third one “options” which is optional — and we do not use it.
Supported payment methods
The first parameter defines which payment method(s) are supported by the merchant. In it’s simple form, the definition of the supported payment method can consist of supporting basic-card payments with a credit or debit card.
const supportedPaymentMethods = [
{
supportedMethods: ['basic-card'],
data: {
supportedNetworks: ['visa', 'mastercard', 'amex']
}
}
] Later on, I will show you how we have integrated our custom payment method.
The devil is in the details
The second object, payment details, contains information about the specific payment, such as the total payment amount, tax and shipping costs. The only required property is total, giving us the following definition:
const details = {
total: {
label: "Total",
amount: {
currency: "CHF",
value: "50"
}
}
}Process the payment
Having completed the payment request (the object is created), it is shown to the user with the .show() method. This method pops up a native UI dialog, from which the user can either add or select a payment method that is already stored in the browser (if he/she has previously agreed to that option), or they can close the UI and abort the payment.
request.show().then(payment => {
//pressed "Pay"
//process the Payment
});The sparkle project …
… is a simple online shopping page, found at https://payapi.netcetera.com:
It has the Payment Request API integrated, and supports the third party payment processor NcaPay:
const supportedPaymentMethods = [{
{
supportedMethods: ['https://ncapay.netcetera.com'],
data: {} //is optional
},
{
supportedMethods: ['basic-card'],
data: {
supportedNetworks: ['visa', 'mastercard', 'amex']
}
}
]On the other hand, the NcaPay processor is a mobile application, which acts as a wallet and authorizes the payment.
In the following example a user, using their mobile device (on which the NcaPay application was previously installed), selects an article and clicks the buy button. Then, the native UI dialog pops up and shows the payment information data, as shown:
When the user is ready to proceed with the payment, they click on the pay button, and get redirected to the mobile app in order to authorize the payment:
Code wise, the web app will receive a PaymentResponse object in the show() promise. This object contains the user’s payment information that, upon successful authorization, the browser will forward to the merchant, responsible for the payment processing. After the payment has been processed, a status will be returned indicating whether the transaction was successful or not.
request.show().then(paymentResponse){
sendPaymentToServer(paymentResponse);
}function sendPaymentToServer(paymentResponse) {
window.setTimeout(function() {
paymentResponse.complete('success')
.then(function() {
document.getElementById('result').innerHTML =
instrumentToJsonString(paymentResponse);
})
.catch(function(err) {
ChromeSamples.setStatus(err);
});
}, 2000);
}function instrumentToJsonString(instrument) {
let details = instrument.details;
//details.cardNumber = 'XXXX-XXXX-XXXX-' + //details.cardNumber.substr(12);
//details.cardSecurityCode = '***';return JSON.stringify({
methodName: instrument.methodName,
details: details,
}, undefined, 2);
}
In our example, we directly call the .complete(‘success’) method, to mock a successful transaction, and the paymentResponse object data is used to update the user interface, informing the user of the successful transaction.
This is how the story goes, so far. Stay tuned for our next NcaPay article where we discuss the Payment Handler API in more detail.
