gpt4 book ai didi

javascript - 基本 Web 支付请求 API 示例

转载 作者:行者123 更新时间:2023-12-03 02:49:29 25 4
gpt4 key购买 nike

我正在尝试让基本的 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 加载它)。

关于javascript - 基本 Web 支付请求 API 示例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47952478/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com