Web Payments: Payment Request API

3 min readFeb 12, 2019

Making the payments easier

Payment Request APIs are created to make the payment journey easier and safer.

Have you been annoyed by entering card details for every online transaction you make? You might say there’s always an option to save your card details but while making a payment for multiple websites you need to enter it every time.

Google chrome took this issue and started to ask us whether we would like it to remember the card details. Which makes our life easier, easy payments. Payment Request APIs take this concept and push it further. You can enter the payment data on the client side.

As a developer it makes it easier for me too. I don’t have to rebuild the payment screens and checkout forms which reduces all the effort to develop, test and fix it.

The work flow of payment request API is quite simple.

The above image shows the data flow. Imagine the user has selected two items in the cart and starts the checkout process.

Initiate Payment: Using the Payment Request API the a window pops up in the browser asking for the payment details. The details can be customisable for e.g. you can add a tip or shipping charges or type of payment or types of cards. It will also save your details for next transactions.
Returns payment data: The Payment Request API returns the payment details to the front end.
Forward payment data: The front end now sends the payment details to the backend server.
Send Payment Request: The server forwards payment request to the Payment Service Provider (PSP)or bank.
PSP returns confirmation: PSP returns the confirmation (or rejection) to the merchant backend server.
Backend Server Sends Confirmation: Server forward the payment confirmation (or rejection) to the front end.

Code Example

Let’s write a code to simulate the payment process. We’ll focus on only step 1 and 2 of the process.

index.html

<!DOCTYPE html>
<html><head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Spike Web Payments">
  <meta name="author" content="Digvijay Upadhyay">
  <title>Web Payments API</title>
  <link rel="stylesheet" href="./css/styles.css">
</head><body>
  <div id="du-test-pay" style="margin-top: 200px;">
    <button id="du-test-pay-button" onClick="pay()">Click here to Pay</button>
    <div id="du-message" style="margin-top: 20px;"></div>
  </div>
  <script type="text/javascript" src="./js/app.js"></script>
</body></html>

./js/app.js

function pay() {
  var payButton = document.getElementById('du-test-pay-button'),
    message = document.getElementById('du-message');if (!window.PaymentRequest) {
    // disable the button and show the message
    payButton.disabled = true;
    message.innerHTML = 'Your browser does not support the Web Payment API';
    return;
  }// Supported payment methods
  const paymentMethods = [{
    supportedMethods: 'basic-card',
    data: {
      supportedNetworks: [
        'visa', 'mastercard', 'amex', 'discover',
        'diners', 'jcb', 'unionpay'
      ]
    }
  }, {
    supportedMethods: 'https://bobpay.xyz/pay',
  }];const paymentDetails = {
    displayItems: [{
      label: 'The Great Gatsby by F. Scott Fitzgerald',
      amount: {
        currency: 'USD',
        value: '22.15'
      }
    }, {
      label: 'War and Peace by Leo Tolstoy',
      amount: {
        currency: 'USD',
        value: '22.15'
      }
    }],
    total: {
      label: 'Total due',
      amount: {
        currency: 'USD',
        value: '44.30'
      }
    }
  };var paymentOptions = {};var request = new PaymentRequest(paymentMethods, paymentDetails, paymentOptions);request.show()
    .then(function(uiResult) {
      new Promise(function(resolve) {
          // We will trigger backend request to process the payment
          // here, we are just using set timeout to imitate the async action
          setTimeout(function() {
            resolve(uiResult);
          }, 2000);
        })
        .then(function(uiResult) {
          // payment is now complete
          uiResult.complete('success');
          message.innerHTML = 'Payment was successful.';
        })
        .catch(function(error) {
          // This could be a server side error
          message.innerHTML = 'Could not process the payment for some reason.';
        });
    })
    .catch(function(error) {
      // This is not a server side error
      // or when user cancels the payment
      message.innerHTML = 'Oops, Something went wrong with the purchase.';
    });
}

Live Demo

You can view the live demo here

Source

You can find the source here