条纹元素抛出“未处理的承诺拒绝”
Posted
技术标签:
【中文标题】条纹元素抛出“未处理的承诺拒绝”【英文标题】：Stripe Elements throw 'Unhandled Promise Rejection' 【发布时间】：2020-07-08 18:03:27 【问题描述】：根据此处的文档：https://stripe.com/docs/payments/save-during-payment
，在尝试使用 Stripe Elements 创建结帐页面时，我不断收到此错误错误：未处理的承诺拒绝：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>
【问题讨论】：
为什么confirmCardPayment 紧跟在mount 之后？我的意思是，confirmCardPayment 应该在用户单击某个接受按钮后被调用，并且该按钮的 eventListener 应该附加在“就绪”事件之后/中。
【参考方案1】：
正如评论中提到的，您的集成是在安装元素后立即调用confirmCardPayment()，因此在安装card 元素之前触发它，从而导致错误。
您设置了“支付”按钮，但尚未连接。为“支付”按钮创建一个点击处理程序，并将confirmCardPayment 调用移动到该点击处理程序中。
【讨论】：
以上是关于条纹元素抛出“未处理的承诺拒绝”的主要内容，如果未能解决你的问题，请参考以下文章
（节点：32032）UnhandledPromiseRejectionWarning：未处理的承诺拒绝（拒绝 id：1）：MongoError：身份验证失败