在Stripe设置后问题提交表单Intent和3d Secure身份验证

Question

我们正在将SCA / 3D Secure集成到我们的条纹付款表格中。

我有一个大表单，可以捕获所有用户和付款数据，并且正在使用jQuery进行客户端表单验证。

这是一个基于订阅的模型，具有14天的试用期，因此我们使用的是setupIntents（handleCardSetup），而不是paymentIntents（handleCardPayment）。

在验证器SubmitHandler中，我正在调用handleCardSetup将卡详细信息与Stripe连接起来。

成功后，我们要提交正确的表单，然后在服务器上完成其余工作。

当我提交表单时，会出现3D安全模态，然后我们单击“身份验证”（测试模式），模态将按预期消失，但随后表单没有提交。

这是我的Javascript。

  //var cardholderName = document.getElementById('cardholder-name');
  var cardholderName=$("#userfirstname").val()+" "+$("#usersurname").val()
  var cardButton = document.getElementById('submit_button');
  var clientSecret = cardButton.dataset.secret;


  $("#payment-form").validate({
    rules: {

      // user info
      "userfirstname": "required",
      "usersurname": "required",
      "useremail": {
        required: true,
        email: true
      },
      "userphone": "required", 

      // company info
      "company": "required",      
      "address1": "required",
      "address2": "required",
      "country": "required"

    },  
    messages: {

      // user info
      "userfirstname": "Please provide your first name",
      "usersurname": "Please provide your surname",      
      "useremail": "Please provide a valid email address",
      "userphone": "Please provide a contact phone number",

      // company info
      "company": "Please provide a company name",
      "address1": "Please provide address line 1",
      "address2": "Please provide address line 2",
      "country": "Please provide country"

    },
    // the errorPlacement has to take the table layout into account
    errorPlacement: function(error, element) {
        error.appendTo( element.next());
    },
    submitHandler: function(form){

      // disable the submit button to prevent repeated clicks:
      $('#submit_button').attr("disabled", "disabled");

      stripe.handleCardSetup(
        clientSecret, card, {
          payment_method_data: {
            billing_details: {name: cardholderName.value}
          }
        }
      ).then(function(result) {
        if (result.error) {
          // Display error.message in your UI.
          alert("fail: "+JSON.stringify(result));            
        } else {
          alert("success: "+JSON.stringify(result));

        }
      });
      return true;      
    },
  });

提前感谢任何想法。

更新

最后，我通过在Submit按钮上使用单击处理程序使它起作用（我也取消了jQuery验证，因为我们也正在验证服务器端）：

$("#submit_button").click(function(e){
//alert("here");
e.preventDefault();
stripe.handleCardSetup(
  clientSecret, card, {
    payment_method_data: {
      billing_details: {name: cardholderName.value}
    }
  }
).then(function(result) {
  if (result.error) {
    // Display error.message in your UI.
    alert("fail: "+JSON.stringify(result));       
  } else {
    // The setup has succeeded. Display a success message.
    alert("success: "+JSON.stringify(result));
    $("#payment-form").submit();          
  }
});

}）;