Stripe Payment Intent API 阻止表单提交，直到用户验证卡答案

【问题标题】：Stripe Payment Intent API Prevent Form From Submitting Until User Authenticates CardStripe Payment Intent API 阻止表单提交，直到用户验证卡
【发布时间】：2020-02-19 05:35:46
【问题描述】：

使用新的 Stripe Payment Intent API 和 Stripe.js，我希望能够做到以下几点：

1) 如果用户的卡有效但需要身份验证 (SCA)，请在用户点击 3D 安全弹出窗口上的“完成身份验证”之前不要提交表单。

2) 如果用户卡有效但不需要身份验证（SCA），则提交表单。

这是我的问题的视频： https://streamable.com/797e5

从视频中可以看到，表单提交自己的卡片需要身份验证，但用户没有时间点击“完成身份验证”，因为表单会立即刷新页面。

Stripe 支持说 e.preventDefault() 需要 JavaScript 并返回 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);
    }
  });
});

【问题讨论】：

标签： javascript html django stripe-payments

【解决方案1】：

您的提示“Stripe 支持说 e.preventDefault() 需要 JavaScript 并返回 false 来执行此操作”救了我。

试试：

.
.
.
cardButton.addEventListener('click', function(ev) {
  ev.preventDefault(); // Required by Stripe.
  ev.stopPropagation(); // Not required but stops the click event from bubbling.

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

  return false // Required by Stripe.
});

我在同样的问题上苦苦挣扎，用户会输入他们所有的信用卡数据并且页面会刷新，导致他们不得不再次输入。

希望这会有所帮助！

【讨论】：