Vanilla PRAPI

HTML

<button id='buyButton'>
  Buy
</button>
<div id='result'>
  Result
</div>

JavaScript

let details = {
  total: {
    label: 'Donation',
    amount: {
      currency: 'USD',
      value: '55.00'
    }
  },
  displayItems: [{
      label: 'Original donation amount',
      amount: {
        currency: 'USD',
        value: '65.00'
      },
    },
    {
      label: 'Friends and family discount',
      amount: {
        currency: 'USD',
        value: '-10.00'
      },
    },
  ],
};

function initBasicCardPaymentRequest() {
  let methodData = [{
    supportedMethods: ['basic-card'],
    data: {
      supportedNetworks: ['amex', 'diners', 'discover', 'jcb', 'mastercard', 'unionpay',
        'visa', 'mir'
      ],
      supportedTypes: ['debit', 'credit', 'prepaid'],
    },
  }];

  return new PaymentRequest(methodData, details);
}

function onBuyClicked(request) {
  request.canMakePayment().then(function(result) {
		console.log('canMakePayment', result);
    request.show().then(function(instrumentResponse) {
        sendPaymentToServer(instrumentResponse);
      })
      .catch(function(err) {
        console.log(err);
      });
  });
}

function sendPaymentToServer(instrumentResponse) {
  window.setTimeout(function() {
    instrumentResponse.complete('success')
      .then(function() {
        document.getElementById('result').innerHTML =
          instrumentToJsonString(instrumentResponse);
      })
      .catch(function(err) {
        console.log(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);
}

const payButton = document.getElementById('buyButton');
payButton.setAttribute('style', 'display: none;');
if (window.PaymentRequest) {
  let request = initBasicCardPaymentRequest();
  payButton.setAttribute('style', 'display: inline;');
  payButton.addEventListener('click',...