如何获得3DSecure模式以与Stripe Payment意图配合使用?

时间:2019-08-30 10:51:50

标签: javascript stripe-payments 3d-secure

我可以为不需要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>

1 个答案:

答案 0 :(得分:0)

好的,我需要将按钮类型显式设置为“按钮”-否则它将向服务器提交往返行程:<button type="button" id="card-button">。该代码部分直接取自Stripe,看来他们的文档需要更加精确!