Microsoft Pay PRAPI

HTML

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

JavaScript

function initMicrosoftPayPaymentRequest() {
	let methodData = [{
  	supportedMethods: ['https://pay.microsoft.com/microsoftpay'],
    data: {
    	merchantId: 'c1f8f3c3-381d-4cca-be71-5a212d5e07e1',
      merchantDisplayName: ['test-merchant']
    }
  }];
  
  let details = {
    total: {label: 'Total', amount: {currency: 'USD', value: '55.00'}},
    displayItems: [
      {
        label: 'T-shirt',
        amount: {currency: 'USD', value: '65.00'},
      },
      {
        label: 'Discount',
        amount: {currency: 'USD', value: '-10.00'},
      },
    ],
  };
  
  return new PaymentRequest(methodData, details);
}

function onBuyClicked(request) {
  request.show().then(function(instrumentResponse) {
    document.getElementById('result').innerHTML =
              instrumentToJsonString(instrumentResponse);
  })
  .catch(function(err) {
		console.log(err);
  });
}

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 = initMicrosoftPayPaymentRequest();
  payButton.setAttribute('style', 'display: inline;');
  payButton.addEventListener('click', function() {
    onBuyClicked(request);
    request = initMicrosoftPayPaymentRequest();
  });
} else {
  console.error('This browser does not support web payments');
}