我正在尝试获得基本的Web Payments Request API演示。据我了解，当我运行此代码时，弹出窗口应显示，询问我想使用哪张信用卡：
<html>
<head>
</head>
<body>
<h1>Pay here</h1>
<script>
if(window.PaymentRequest){
alert("Payment request exists!");
const supportedPaymentMethods = [ {
supportedMethods: ["basic-card"]
}
];
const paymentDetails = {
total: {
label: "Total Cost",
amount: {
currency: "GBP",
value: 1
}
}
};
const options = {};
const paymentRequest = new PaymentRequest(
supportedMethods, paymentDetails, options
);
paymentRequest.show();
}
</script>
</body>
</html>
但没有太多事情发生。发生的是警报消息出现的情况。我只是想让基础工作起作用。我不相信这段代码会向任何人汇款，因为没有提到帐户。我希望下一步。请帮忙！谢谢。
我终于找到了一个工作演示。它会将您的信用卡详细信息保存在浏览器中，并以易于使用的格式显示（无表单字段）。它不会将信用卡详细信息发送到支付系统，它只是准备它：
<button id="buyButton">Buy</button>
<script>
/**
* Builds PaymentRequest for credit cards, but does not show any UI yet.
*
* @return {PaymentRequest} The PaymentRequest oject.
*/
function initPaymentRequest() {
let networks = ['amex', 'diners', 'discover', 'jcb', 'mastercard', 'unionpay', 'visa', 'mir'];
let types = ['debit', 'credit', 'prepaid'];
let supportedInstruments = [{
supportedMethods: networks,
}, {
supportedMethods: ['basic-card'],
data: {supportedNetworks: networks, supportedTypes: types},
}];
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'},
}
]
};
return new PaymentRequest(supportedInstruments, details);
}
/**
* Invokes PaymentRequest for credit cards.
*
* @param {PaymentRequest} request The PaymentRequest object.
*/
function onBuyClicked(request) {
request.show().then(function(instrumentResponse) {
sendPaymentToServer(instrumentResponse);
})
.catch(function(err) {
ChromeSamples.setStatus(err);
});
}
/**
* Simulates processing the payment data on the server.
*
* @param {PaymentResponse} instrumentResponse The payment information to
* process.
*/
function sendPaymentToServer(instrumentResponse) {
// There's no server-side component of these samples. No transactions are
// processed and no money exchanged hands. Instantaneous transactions are not
// realistic. Add a 2 second delay to make it seem more real.
window.setTimeout(function() {
instrumentResponse.complete('success')
.then(function() {
document.getElementById('result').innerHTML = instrumentToJsonString(instrumentResponse);
})
.catch(function(err) {
ChromeSamples.setStatus(err);
});
}, 2000);
}
/**
* Converts the payment instrument into a JSON string.
*
* @private
* @param {PaymentResponse} instrument The instrument to convert.
* @return {string} The JSON string representation of the instrument.
*/
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 = initPaymentRequest();
payButton.setAttribute('style', 'display: inline;');
payButton.addEventListener('click', function() {
onBuyClicked(request);
request = initPaymentRequest();
});
} else {
ChromeSamples.setStatus('This browser does not support web payments');
}
</script>
您可以复制/粘贴上面的代码并保存为HTML并从本地驱动器加载它（不需要任何花哨的东西，比如像我想的那样从安全的https URL加载它）。