Payment Request

The Payment Request API facilitates the collection of payment information such as credit card number by storing the information for future use. (After the collection of information, we will still need to pass the information to a payment processor and listen for the confirmation of money receipt at the back end.)

Notice the message that reads: Card and addresses are from Chrome. You can manage them in Settings.
RESETRUNFULL
<!DOCTYPE html><html><body>
<button onclick="pay()">PAY</button>
<script>
function pay(){
   var instruments = [{
      supportedMethods: 'basic-card',
      data: { supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb', 'diners', 'discover', 'mir', 'unionpay']}}];
   var details = {total          : {label: 'Donation',
                                    amount: {currency: 'USD', value: '65.00'}},
                  displayItems   : [{label: 'Original donation amount',
                                     amount:{currency: 'USD',value: '65.00'}}],
                  shippingOptions: [{id: 'standard',
                                     label: 'Standard shipping',
                                     amount: {currency: 'USD', value: '0.00'},
                                     selected: true}]};
   var options = {requestShipping: true};
   var request = new PaymentRequest(instruments, details, options);
   request.show().then(function(instrumentResponse) {});
   // request.canMakePayment().then(/*...*/);
   // request.canMakePayment();
}
</script>
</body></html>