Javascript 如何让3DSecure modal处理条带支付意图？_Javascript_Stripe Payments_3d Secure

Javascript 如何让3DSecure modal处理条带支付意图？

javascript stripe-payments

Javascript 如何让3DSecure modal处理条带支付意图？,javascript,stripe-payments,3d-secure,Javascript,Stripe Payments,3d Secure,我可以为不需要3DSecure身份验证的测试卡付款。对于需要它的卡，不会弹出模式。在仪表板中，付款将显示状态“客户必须完成额外的身份验证步骤”。在这些情况下，我甚至无法到达 then(function(result) { if (result.error) { alert(result.error.message); } else

我可以为不需要3DSecure身份验证的测试卡付款。对于需要它的卡，不会弹出模式。在仪表板中，付款将显示状态“客户必须完成额外的身份验证步骤”。在这些情况下，我甚至无法到达

then(function(result) {
                    if (result.error) {
                        alert(result.error.message);
                    }
                    else {
                        alert('Success!');

代码部分。对于非3ds测试卡，此部分工作正常。调试javascript将向我展示stripe js脚本中一些毫无意义的异常

考虑到它适用于某些卡，可以排除支付意图的服务器站点初始化和clientsecret的传递，这部分工作正常

<head runat="server">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://js.stripe.com/v3/"></script>
    <style type="text/css">
        .auto-style1 {
            width: 930px;
        }
    </style>
</head>
<form id="form1" runat="server">
    <div>           
        <asp:HiddenField ID="hiddenClientSecret" runat="server" />
        <input id="cardholder-name" type="text"/>
        <!-- placeholder for Elements -->
        <div id="card-element" class="auto-style1"></div>
        <button id="card-button">
          Submit Payment
        </button>
    </div>
</form>
<script >
    var stripe = Stripe('mykey', {locale: 'en'});
    var elements = stripe.elements({locale: 'en'});
    var cardElement = elements.create('card', {hidePostalCode: true});
    cardElement.mount('#card-element');
    var cardholderName = document.getElementById('cardholder-name');
    var cardButton = document.getElementById('card-button');
    var clientSecret = document.getElementById('hiddenClientSecret').value;
    cardButton.addEventListener('click', function(ev) {
        stripe.handleCardPayment(
                clientSecret, cardElement, {
                    payment_method_data: {
                    billing_details: {name: cardholderName.value}
                  }
                }
            ).then(function(result) {
                if (result.error) {
                    alert(result.error.message);
                }
                else {
                    alert('Success!');
                }
            });
    });

 </script>


.auto-style1{
宽度：930px；
}
付款
var stripe=stripe（'mykey'，{locale:'en'}）；
var elements=stripe.elements（{locale:'en'}）；
var cardeElement=elements.create（'card'，{hidePostalCode:true}）；
挂载（“#卡元素”）；
var CANDARNAME=document.getElementById（'CANDARD-name'）；
var cardButton=document.getElementById（'card-button'）；
var clientSecret=document.getElementById（'hiddenClientSecret'）。值；
cardButton.addEventListener（'click'，函数（ev）{
条纹手卡付款(
clientSecret，cardElement{
付款方式数据：{
账单详细信息：{name:cardingname.value}
}
}
).然后（函数（结果）{
if（result.error）{
警报（结果、错误、消息）；
}
否则{
警惕（“成功！”）；
}
});
});

好的，我需要显式地将按钮类型设置为“button”-否则它会向服务器提交往返：

。代码部分直接取自Stripe，似乎他们需要在文档中更加精确一点

你能在你的帖子中添加你是如何在头部初始化Stripe.js的吗？您应该看到的错误是Stripe.js未正确初始化，但您稍后会引用它。代码已更新-添加此：。auto-style1{width:930px；}Stripe.js必须正确初始化-它适用于非3dsecure卡！Martin，您正在使用哪个3DS卡进行测试？一些测试卡可能要求您使用雷达规则来制作3DS显示。我尝试了40000027603184-此测试卡要求对所有事务进行身份验证。和4000000000003220-必须在所有事务上完成3D Secure 2身份验证。