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功能中。

Answer 3

你可以这样做。此示例使用PHP，但使用您首选的服务器端语言进行交换：

1）创建一个包含以下行的nocontent.php文件：header("HTTP/1.0 204 No Content");令人惊讶地返回了一个＆＃39; HTTP / 1.0 204 No Content＆＃39;头。浏览器在请求此页面时似乎什么都不做。您可以选择让此页面处理POST数据，或者您可以将其设置为包含该单行的虚拟页面。

2）在您的HTML中，将nocontent.php路径放入<form代码的action属性：<form action="nocontent.php"。

3）将javascript函数附加到window.onbeforeunload事件。当浏览器请求新页面时会触发此事件，因此即使浏览器似乎什么都不做，也会触发此事件。在Stripe生成其令牌后调用此函数。

4）您的表单现在包含<input type="hidden" name="stripeToken" value="..."/>和<input type="hidden" name="stripeEmail" value="..."/>元素。

5）现在您可以选择，具体取决于您何时处理表单的POST数据。

a）如果您的nocontent.php页面只是返回“没有内容”字样。标题，您现在可以将AJAX重新提交您的表单数据到另一个页面（正常情况下），该页面将实际处理POST数据并返回Stripe的状态信息。那是我走的路。
b）如果您的nocontent.php页面本身处理了表单的POST数据，您可以将Stripe响应存储在服务器上，并将您的令牌用作ajax请求中的密钥以检索付款从Stripe到达时的状态。

请注意，拦截和阻止Stripe在表单上触发提交事件可能是更好的做法，但是我没有使用该方法取得可靠的成功。

如何修改Stripe Checkout而不是发送AJAX请求？

3 个答案: