jquery - 如何修改 Stripe Checkout 以改为发送 AJAX 请求？

Question

我正在使用 Stripe 和 Checkout 创建付款表单，并且希望能够使用 Checkout 出色的 javascript 库，但我也想将表单提交从普通 POST 更改为 AJAX POST。

因此，我尝试向您应该拥有的表单元素添加一个处理程序，但我的控制台行从未被触发，因此它没有使用给定的表单提交。

然后我尝试查看触发叠加时显示的代码。这有点令人困惑，我只是想知道其他人是否能够弄清楚它，或者是否因为安全问题而变得困难？

// Stripe plugin
<form id="payment_form" method='post' action="{{url_for('process_payment')}}">
        <script
            src="https://checkout.stripe.com/checkout.js" class="stripe-button"
            data-key="test key">
        </script>
</form>

// Form submit handler
$(document).ready(function(){
    $("#payment_form").submit(function(e) {
        console.log("Processing...");
        ajax_payment();
        return false;
    });

});

Answer 1

Stripe 触发表单的 submit() 函数。您可以为其设置事件处理程序(而不是监听器!)以防止发送正常的 POST 请求。

使用纯 JavaScript 的示例:

var form = document.getElementById('myStripeForm');
form.submit = function() {
    // ... get form data here and send it through ajax

    // Prevent form submit.
    return false;
}

使用 jQuery 的示例:

$('#myStripeForm').get(0).submit = function() {
    var data = $(this).serializeArray();
    // process data and send ajax request

    $.ajax(...);

    // Prevent form submit.
    return false;
}