条带元素抛出“Unhandled Rejection”
条带元素抛出“Unhandled Rejection”
提问于 2020-03-28 07:30:16
根据这里的文档，在尝试使用条纹元素创建结帐页面时，我一直收到这个错误：https://stripe.com/docs/payments/save-during-payment
错误:未处理的Promise Rejection: IntegrationError:无法从指定元素检索数据。请确保您尝试使用的元素仍处于挂载状态。
<html>
<head>
<title>Checkout</title>
<script src="https://js.stripe.com/v3/"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
/**
* The CSS shown here will not be introduced in the Quickstart guide, but shows
* how you can use CSS to style your Element's container.
*/
.StripeElement {
box-sizing: border-box;
height: 40px;
padding: 10px 12px;
border: 1px solid transparent;
border-radius: 4px;
background-color: white;
box-shadow: 0 1px 3px 0 #e6ebf1;
-webkit-transition: box-shadow 150ms ease;
transition: box-shadow 150ms ease;
}
.StripeElement--focus {
box-shadow: 0 1px 3px 0 #cfd7df;
}
.StripeElement--invalid {
border-color: #fa755a;
}
.StripeElement--webkit-autofill {
background-color: #fefde5 !important;
}
</style>
</head>
<script>
// Set your publishable key: remember to change this to your live publishable key in production
var stripe = Stripe('%%key%%');
var elements = stripe.elements();
</script>
<div id="card-element">
<!-- Elements will create input elements here -->
</div>
<!-- We'll put the error messages in this element -->
<div id="card-errors" role="alert"></div>
<button id="submit">Pay</button>
<script>
var clientSecret = '%%clientSecret%%';
// Set up Stripe.js and Elements to use in checkout form
var style = {
base: {
color: "#32325d",
}
};
var card = elements.create("card", { style: style });
card.mount("#card-element");
card.addEventListener('change', function(event) {
var displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
});
stripe.confirmCardPayment(clientSecret, {
payment_method: {
card: card,
billing_details: {
name: 'Jenny Rosen'
}
},
setup_future_usage: 'off_session'
}).then(function(result) {
if (result.error) {
// Show error to your customer
console.log(result.error.message);
} else {
if (result.paymentIntent.status === 'succeeded') {
// Show a success message to your customer
// There's a risk of the customer closing the window before callback execution
// Set up a webhook or plugin to listen for the payment_intent.succeeded event
// to save the card to a Customer
// The PaymentMethod ID can be found on result.paymentIntent.payment_method
}
}
});
</script>
</html>回答 1
Stack Overflow用户
发布于 2020-03-28 08:43:45
正如注释中所提到的，您的集成在元素挂载之后立即调用confirmCardPayment()，因此它在card元素挂载之前被触发，从而导致错误。
你已经设置了一个"Pay“按钮，但它还没有连接上。为"Pay“按钮创建一个单击处理程序，并将confirmCardPayment调用移动到该单击处理程序中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60895490
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号