Проблемы с отправкой формы после настройки StripeIntent и 3d Secure аутентификации - PullRequest
Новая
       62

Проблемы с отправкой формы после настройки StripeIntent и 3d Secure аутентификации

0 голосов
/ 04 октября 2019

Мы интегрируем SCA / 3D Secure в нашу бланковую форму оплаты.

У меня есть большая форма, которая собирает все данные о пользователях и платежах и использую jQuery для проверки формы на стороне клиента.

Это модель на основе подписки с 14-дневной пробной версией, поэтому мы используем setupIntents (handleCardSetup), а не paymentIntents (handleCardPayment).

В validator submitHandler я вызываю handleCardSetup, чтобы связать данные карты сStripe.

В случае успеха мы хотим правильно отправить форму и сделать все остальное на сервере.

Когда я отправляю форму, появляется модальный 3D Secure, и мы нажимаем кнопку аутентификации (тестовый режим) имодал исчезает, как и ожидалось, но тогда форма не отправляется.

Вот мой 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;      
    },
  });

Заранее спасибо за любые идеи.

ОБНОВЛЕНИЕ

В конце концов я начал работать с помощью обработчика щелчка на кнопке отправки (я покончил с проверкой jQuery, так как мы проверяем seтакже со стороны поворота): 

$("#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();          
  }
});

});

...