javascript - Javascript:Stripe 和 Apple Pay 网络设置
问题描述
我正在尝试按照此处的指南(https://stripe.com/docs/stripe-js/elements/payment-request-button)设置 Apple Pay for web 和 Stripe。初始步骤(例如域验证和所有预设置)已完成,但我在付款步骤后遇到问题。
Apple Pay 按钮出现在我的 Safari 浏览器中。单击按钮时,我会触发一个名为checkoutWithApplePay()
. 第 3 步后我迷路了,不知道该怎么办。我发布到我的后端和后端,创建付款意图并返回client_secret
checkoutWithApplePay() {
// STEP 1 FROM GUIDE
const stripe = Stripe("_____");
// STEP 2 FROM GUIDE
const paymentRequest = stripe.paymentRequest({
country: 'US',
currency: 'usd',
total: {
label: 'Store Total',
amount: cartTotal() ,
},
requestPayerName: true,
requestPayerEmail: true,
});
// STEP 3 FROM GUIDE
const elements = stripe.elements();
const prButton = elements.create('paymentRequestButton', {
paymentRequest: paymentRequest,
});
paymentRequest.canMakePayment().then(function(result) {
if (result) {
prButton.mount('#payment-request-button');
} else {
document.getElementById('payment-request-button').style.display = 'none';
}
});
// STEP 4 FROM GUIDE -- THIS RETURNS A CLIENT SECRET
axios.post('/api/checkout/checkout-with-apple-pay-web', {
total: this.formattedCartTotal()
})
.then((resp) => {
myClientSecrent = resp.clientSecret;
});
// THIS IS WHERE I GET CONFUSED AND NOT SURE HOW TO HANDLE AND BELOW IS
JUST TEMPLATE CODE FROM THE GUIDE
paymentRequest.on('paymentmethod', function(ev) {
// Confirm the PaymentIntent without handling potential next actions (yet).
stripe.confirmCardPayment(
clientSecret,
{payment_method: ev.paymentMethod.id},
{handleActions: false}
).then(function(confirmResult) {
if (confirmResult.error) {
// Report to the browser that the payment failed, prompting it to
// re-show the payment interface, or show an error message and close
// the payment interface.
ev.complete('fail');
} else {
// Report to the browser that the confirmation was successful, prompting
// it to close the browser payment method collection interface.
ev.complete('success');
// Check if the PaymentIntent requires any actions and if so let Stripe.js
// handle the flow. If using an API version older than "2019-02-11" instead
// instead check for: `paymentIntent.status === "requires_source_action"`.
if (confirmResult.paymentIntent.status === "requires_action") {
// Let Stripe.js handle the rest of the payment flow.
stripe.confirmCardPayment(clientSecret).then(function(result) {
if (result.error) {
let data = {
msg: "An error occurred. Please try again."
}
this.handleShowFlashMsg(data);
} else {
this.handleShowOrderConfirmModal();
}
});
} else {
// The payment has succeeded.
}
}
});
}
解决方案
您快到了。当您收到“paymentmethod”事件时,您将使用之前检索到的 PaymentIntent 客户端密码来确认 PaymentIntent 并完成付款:
let clientSecret;
axios.post('/api/checkout/checkout-with-apple-pay-web', {
total: this.formattedCartTotal()
}).then((resp) => {
// Assign this previously defined variable
clientSecret = resp.clientSecret;
});
paymentRequest.on('paymentmethod', function(ev) {
// Confirm the PaymentIntent without handling potential next actions (yet).
stripe.confirmCardPayment(
clientSecret,
{payment_method: ev.paymentMethod.id},
{handleActions: false}
).then(function(confirmResult) {
if (confirmResult.error) {
// Report to the browser that the payment failed, prompting it to
// re-show the payment interface, or show an error message and close
// the payment interface.
ev.complete('fail');
} else {
// Report to the browser that the confirmation was successful, prompting
// it to close the browser payment method collection interface.
ev.complete('success');
// Check if the PaymentIntent requires any actions and if so let Stripe.js
// handle the flow. If using an API version older than "2019-02-11" instead
// instead check for: `paymentIntent.status === "requires_source_action"`.
if (confirmResult.paymentIntent.status === "requires_action") {
// Let Stripe.js handle the rest of the payment flow.
stripe.confirmCardPayment(clientSecret).then(function(result) {
if (result.error) {
let data = {
msg: "An error occurred. Please try again."
}
this.handleShowFlashMsg(data);
} else {
this.handleShowOrderConfirmModal();
}
});
} else {
// The payment has succeeded.
}
}
});
推荐阅读
- c++ - 用于识别潜在无符号整数溢出的警告(或其他方式)
- visual-studio-code - 如何从 vscode Jupyter 中的原生 Notebook 体验返回
- python - 在数据框中混合原始计算和列计算
- javascript - 如何仅读取 Firebase 实时数据库中的更改
- python - 如何使用 R 或 Python 提取我需要的 netCDF/nc 数据?
- firebase - 在flutter中使用2个where子句查询Firestore
- flask - validate_on_submit (flask-wtf) 不工作
- c++ - 如何在 ax_boost_base 中使用 HAVE_BOOST
- azure-storage - 如何使用 ADLS gen 2 容器的访问策略生成 SAS 令牌
- reactjs - 如何随机化 qraphql 查询结果?