仅在进行条带付款时提交表格

Question

我有一个表单，我想仅在完成条带付款后提交其数据。条带支付对应这个JS脚本：

// Get Stripe publishable key
fetch("/config")
.then((result) => { return result.json(); })
.then((data) => {
  // Initialize Stripe.js
  const stripe = Stripe(data.publicKey);

  // new
  // Event handler
  document.querySelector("#submitBtn").addEventListener("click", () => {
    // Get Checkout Session ID
    fetch("/create-checkout-session")
    .then((result) => { return result.json(); })
    .then((data) => {
      console.log(data);
      // Redirect to Stripe Checkout
      return stripe.redirectToCheckout({sessionId: data.sessionId})
    })
    .then((res) => {
      console.log(res);
    });
  });
document.getElementById("form_post").submit();
});

到目前为止，我所做的是在 JS 脚本的末尾添加document.getElementById("form_post").submit();，如您所见，但它不起作用。使用此代码，可以进行条带付款，但我的表单未提交。

这是带有表单的 HTML 部分：

{% extends 'base.html' %}

{% block content %}
<script src="https://js.stripe.com/v3/"></script>
<script src="{{ url_for('static', filename='main.js') }}"></script>
<script defer src="https://use.fontawesome.com/releases/v5.14.0/js/all.js"></script>
  <form id="form_post" method="post" enctype=multipart/form-data>
    <label for="sername">Nom de l'entreprise</label>
    <input name="username" id="username" value="{{ request.form['username'] }}" required>
    </form>

    <section class="section">
      <div class="container">
        <button class="button is-primary" id="submitBtn">Purchase!</button>
      </div>
    </section>

{% endblock %}

有关信息，我正在使用 python 的框架 Flask。

Answer 1

这不起作用，因为 Stripe 会将您重定向到另一个页面进行结帐会话，因此重定向后的代码将永远不会运行，除非由于网络问题或其他原因重定向失败。

当 Stripe 将您返回到您的网站时，在付款完成后，他们会将查询参数附加到您提供的重定向 URL。您可以获取该查询参数并将其提交到您的服务器以进行任何处理。

您需要在表单中存储有关用户的任何信息，您应该在重定向之前提前完成。然后通过处理 Stripe 发送的 webhook 或检查结帐会话的状态，在服务器端验证付款是否成功。