I was looking at the Payment Request API which is apparently available on some browsers but I was wondering, where/how do you set the account to which the payments get sent? I see nowhere in the following code that specifies an account to which the payment will be sent upon success:
function onBuyClicked() {
if (!window.PaymentRequest) {
// PaymentRequest API is not available. Forwarding to
// legacy form based experience.
location.href = '/checkout';
return;
}
// Supported payment methods
var supportedInstruments = [{
supportedMethods: ['basic-card']
data: {
supportedNetworks: [
'visa', 'mastercard', 'amex', 'discover',
'diners', 'jcb', 'unionpay'
]
}
}];
// Checkout details
var details = {
displayItems: [{
label: 'Original donation amount',
amount: { currency: 'USD', value: '65.00' }
}, {
label: 'Friends and family discount',
amount: { currency: 'USD', value: '-10.00' }
}],
total: {
label: 'Total due',
amount: { currency: 'USD', value : '55.00' }
}
};
// 1. Create a `PaymentRequest` instance
var request = new PaymentRequest(supportedInstruments, details);
// 2. Show the native UI with `.show()`
request.show()
// 3. Process the payment
.then(result => {
// POST the payment information to the server
return fetch('/pay', {
method: 'POST',
credentials: 'include',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(result.toJSON())
}).then(response => {
// 4. Display payment results
if (response.status === 200) {
// Payment successful
return result.complete('success');
} else {
// Payment failure
return result.complete('fail');
}
}).catch(() => {
return result.complete('fail');
});
});
}
document.querySelector('#start').addEventListener('click', onBuyClicked);
Long story short: you don't.
Payment Request API is not a replacement for payment processors. The browser itself has no means to process the funds transfer to your account - it can't even validate whether the provided payment method is valid (though Android Pay can do this).
Per Introducing the Payment Request API doc (emphasis mine):
...
The browser then presents the payments UI to the user, who selects a payment method and authorizes the transaction. A payment method can be as straightforward as a credit card that is already stored by the browser, or as esoteric as third-party application written specifically to deliver payments to the site (this functionality is coming soon). After the user authorizes the transaction, all the necessary payment details are sent directly back to the site. For example, for a credit card payment, the site will get back a card number, a cardholder name, an expiration date, and a CVC.
...
In other words, the Payment Request API is just an easier, safer way for you to collect the user's card number and other info necessary to process a payment. Once you receive this information, it's pretty much the same as if the user submitted it via a normal form. You still need a payment processor (or something similar) to actually create a transaction.