小编典典

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

ajax

我正在使用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;
    });

});

阅读 338

收藏
2020-07-26

共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;
}
2020-07-26