通过 AJAX 将 POST 条带化到烧瓶答案

【问题标题】：Stripe POST to flask through AJAX通过 AJAX 将 POST 条带化到烧瓶
【发布时间】：2018-03-06 12:34:39
【问题描述】：

我正在尝试使用在提交条带表单时发送 ajax 请求的函数。我试过使用.submit()，但它似乎没有做任何事情。这是我正在尝试的：

HTML

<form action="/download_data" method="post" id="paymentForm">
                    <script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
                        data-key="{{ stripe_key }}"
                        data-description="A Flask Charge"
                        data-amount="500"
                        data-locale="auto"> 
                    </script>
                </form>

$("#paymentForm").submit(function(event) {
    window.alert("HELLO")
    event.preventDefault();

    var $form = $(this),
        url = $form.attr('action');

    var formdata = $form.serialize();
    console.log(formdata)

    //AJAX will go here if I can get the function working
 })

而且我认为这个函数根本不会被调用，所以我有点停止添加它，直到我以某种方式解决这个问题。任何帮助将不胜感激。谢谢！

【问题讨论】：

您是如何提交表单的？有按钮吗？您是否尝试过使用 onsubmit？你看到你好警报了吗？您是否尝试删除 preventDefault？您是否尝试过返回真实？标题说 ajax 但您正在尝试提交。这是怎么回事？
刚刚测试了所有这些；依然没有。我自己都糊涂了。如果这最终不起作用，我可能不得不切换到stripe.com/docs/checkout，但我看不出它为什么不起作用。 checkout.js 脚本生成一个带有支付输入字段和提交按钮的模态框。单击该提交按钮时，表单数据将作为 POST 请求发送到表单上的操作 url（在本例中为 /download_data）。 AJAX 调用是我至少可以理解为什么没有调用该函数之后要做的事情。

标签： javascript jquery ajax stripe-payments

【解决方案1】：

您需要使用"custom integration" 方法，这样您就可以定义一个在 Checkout 创建令牌时调用的回调，然后您可以在 AJAX 请求中提交令牌（或做任何您想做的事情）：

var handler = StripeCheckout.configure({
  key: 'pk_...',
  token: function(token) {
    // Grab the token from `token.id` and send it in an AJAX request
  }
});

这是一个基本示例：https://jsfiddle.net/ywain/ym0k4t9f/

【讨论】：

这是我昨天最终做的，所以我想我还是选择这个吧。