如何修改Stripe Checkout来发送AJAX请求？

Question

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

因此，我尝试将处理程序添加到您应该具有的form元素中，但是从未触发我的控制台行，因此它没有使用给定的表单提交。

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

// 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

条带触发表单的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;
}