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

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

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

这是带有表单的 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 或检查该结帐会话的状态，在服务器端验证付款是否成功。