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

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

所以我尝试在你应该拥有的表单元素中添加一个处理程序，但是我的控制台行从未被触发过，因此它不会使用给定的表单提交。

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

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

Answer 1

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

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

2）在HTML中将nocontent.php路径放入 tag的action属性：

。

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

4）您的表单现在包含和元素。

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

• a）如果你的nocontent.php页面只是返回一个'no content'标题，你现在可以将AJAX重新提交你的表单数据到另一个页面（正常情况下），它将实际处理POST数据并返回Stripe的状态信息。 那是我走的路。

• b）如果您的nocontent.php页面本身处理表单的POST数据，您可以将Stripe响应存储在服务器上，并将您的令牌用作ajax请求中的密钥，以便在从Stripe到达时检索付款状态。

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

Answer 2

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 3

Checkout集成有两个选项，第一个，您正在使用的是“简单”集成。 第二个是自定义集成，它具有成功回调（’令牌’function）。 它看起来像这样：

你可以将你的ajax_payment函数放在token函数中。