如何修改条纹来结账，而不是发送一个AJAX请求？ [英] How can I modify Stripe Checkout to instead send an AJAX request?

问题描述

我用条纹和结帐创建一个付款的形式，我希望能够使用Google Checkout的真棒JavaScript库，但我也想改变表单提交的只是一个普通的POST到一个AJAX POST。

于是，我尝试添加一个处理程序，你应该有表单元素，但我的控制台线路从来没有触发，所以它不是使用提交给定的形式。

然后我试图寻找到多数民众赞成长大当覆盖被触发的code。这是一个有点混乱，我只是想知道如果任何人能弄明白，或者如果它犯了难，因为它是一个安全的事？

  //条纹插件
＆LT;形式ID =payment_form的方法='后'行动={{url_for（'process_payment'）}}＆GT;
        ＆LT;脚本
            SRC =htt​​ps://checkout.stripe.com/checkout.js级=条形按钮
            数据键=测试键＆GT;
        ＆LT; / SCRIPT＆GT;
＆LT; /形式GT;

//表单提交处理程序
$（文件）。就绪（函数（）{
    $（＃payment_form）。递交（函数（五）{
        的console.log（处理...）;
        ajax_payment（）;
        返回false;
    }）;

}）;
 

解决方案

您可以这样来做。这个例子使用了PHP，但掉在你的preferred服务器端语言：

1）创建一个 nocontent.php 文件，其中包含此行：标题（HTTP / 1.0 204无内容）; 这令人惊讶的返回一个HTTP / 1.0 204无内容的头。浏览器会出现什么也不做，当它请求该页面。您可以选择有这个网页过程中的POST数据，或者你可以拥有这仅仅是与单行一个虚拟页面。

2）在你的HTML把 nocontent.php 路径到＆LT;形式标签的动作属性：＆LT;形式的行动=nocontent.php。

3）将JavaScript函数的 window.onbeforeunload 事件。该事件被触发的浏览器请求新的页面，即使浏览器显得无能为力这样被激发。此功能条纹后调用生成的令牌。

4）你的表单现在包含＆LT;输入类型=隐藏名称=stripeToken值=.../＆GT; 和＆LT;输入类型=隐藏名称=stripeEmail值=.../＆GT; 元素

5）现在，你有选择，这取决于当你处理表单的POST数据。

• a）如果你的 nocontent.php 页只返回一个没有内容头，你可以现在AJAX重新提交表单数据到另一个页面（为正常），将实际处理的POST数据并返回条纹的状态信息。这就是我所走的路线。

• 二）如果你的 nocontent.php 页面本身处理表单的POST数据，你可以存储在服务器上的条纹响应，并使用令牌作为重点在一个Ajax请求时，它从磁条到达检索付款状态。

请注意，这可能是更好的做法，从触发窗体本身上提交事件拦截和prevent条纹，但我没有可靠的成功与方法。

I'm using Stripe and Checkout to create a payment form and I want to be able to use Checkout's awesome javascript library, but I also want to change the form submission from just a normal POST to an AJAX POST.

So I tried adding a handler to the form element you're supposed to have, but my console line was never triggered, so it's not submitting using the given form.

Then I tried looking into the code that's brought up when the overlay is triggered. It's a bit confusing and I'm just wondering if anybody else was able to figure it out, or if it's made difficult because it's a security matter?

// 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;
    });

});

解决方案

You can do it this way. This example uses PHP, but swap in your preferred server-side language:

1) Create a nocontent.php file that contains this line: header("HTTP/1.0 204 No Content"); which surprisingly returns a 'HTTP/1.0 204 No Content' header. The browser will appear to do nothing when it requests this page. You can optionally have this page process the POST data, or you can have this simply be a dummy page with that single line.

2) In your HTML put the nocontent.php path into the <form tag's action attribute : <form action="nocontent.php".

3) Attach a javascript function to the window.onbeforeunload event. This event is triggered as the browser requests the new page, and so is fired even though the browser appears to do nothing. This function is called after Stripe generates its token.

4) Your form now contains the <input type="hidden" name="stripeToken" value="..."/> and <input type="hidden" name="stripeEmail" value="..."/> elements.

5) Now you have options, depending on when you handled the form's POST data.

• a) If your nocontent.php page simply returns a 'no content' header, you can now AJAX re-submit your form's data to another page (as normal) that will actually process the POST data and return Stripe's status information. That's the route I took.

• b) If your nocontent.php page itself processes the form's POST data, you can store the Stripe response on the server and use your token as a key in an ajax request to retrieve payment status whenever it arrives from Stripe.

Note that it might be better practice to intercept and prevent Stripe from triggering the submit event on the form itself, but I did not have reliable success with that method.

这篇关于如何修改条纹来结账，而不是发送一个AJAX请求？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！