如何修改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;
}

Answer 2

Checkout集成有两个选项,第一个,您正在使用的是"简单"集成.第二个是自定义集成,它具有成功回调('令牌'功能).它看起来像这样:

<script>
  var handler = StripeCheckout.configure({
    key: 'pk_test_6pRNASCoBOKtIshFeQd4XMUh',
    image: '/square-image.png',
    token: function(token, args) {
      // Use the token to create the charge with a server-side script.
      // You can access the token ID with `token.id`
    }
  });

  document.getElementById('customButton').addEventListener('click', function(e) {
    // Open Checkout with further options
    handler.open({
      name: 'Demo Site',
      description: '2 widgets ($20.00)',
      amount: 2000
    });
    e.preventDefault();
  });
</script>

你会把你的ajax_payment功能放在token功能中.