Stripe Payment Intent API предотвращает отправку формы до тех пор, пока пользователь не аутентифицирует карту - PullRequest
Новая
       2

Stripe Payment Intent API предотвращает отправку формы до тех пор, пока пользователь не аутентифицирует карту

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

Используя новый API Stripe Payment Intent и Stripe.js, я хочу сделать следующее:

1) Если карта пользователя действительна, но требует аутентификации (SCA), не отправляйтеФорма до тех пор, пока пользователь не нажмет «полная аутентификация» во всплывающем окне 3D-безопасности.

2) Если карточка пользователя действительна, но не требует аутентификации (SCA), отправьте форму. видео моей проблемы: https://streamable.com/797e5

Как видно из видео, форма отправляется с картой, требующей аутентификации, но у пользователя нет времени нажимать «полная аутентификация», так как форма обновляется. страница сразу.

Поддержка Stripe говорит, что JavaScript необходим с e.preventDefault () и возвращает false, чтобы сделать это, и предоставил мне пример PHP. https://glitch.com/edit/#!/stripe-php-sca-example?path=public/charge.php:9:0

Однако я использую Django, а не PHP. Я также не уверен, как кодировать это в JavaScript.

Любая помощь будет принята с благодарностью.

HTML: 

<form onsubmit="return false;" action="{{checkout}}" method="post" id="payment-form">{% csrf_token %}
  <div class="form-row">
    <label for="card-element">
      Credit or debit card
    </label>
    <div id="card-element">
      <!-- A Stripe Element will be inserted here. -->
    </div>

    <!-- Used to display form errors. -->
    <div id="card-errors" role="alert"></div>
  </div>

<button id="card-button" data-secret="{{ client_secret }}">
  Submit Payment
</button>
</form>
<script src="https://js.stripe.com/v3/"></script>

Stripe.js: 

var stripe = Stripe('<KEY>');

var elements = stripe.elements();
var cardElement = elements.create('card');
cardElement.mount('#card-element');

var cardButton = document.getElementById('card-button');
var clientSecret = cardButton.dataset.secret;

stripe.createPaymentMethod('card', cardElement, {
}).then(function(result) {
  console.log(result.paymentMethod)
});


cardButton.addEventListener('click', function(ev) {
  stripe.handleCardPayment(
    clientSecret, cardElement
  ).then(function(result) {
    if (result.error) {
      console.log(result.error.message);
    } else {
      console.log(result.message);
    }
  });
});
...