jquery – 如何修改Stripe Checkout以发送AJAX请求?

前端之家收集整理的这篇文章主要介绍了jquery – 如何修改Stripe Checkout以发送AJAX请求?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我使用Stripe和Checkout创建一个付款表单,我想要使用Checkout的awesome 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;
    });

});

解决方法

你可以这样做.此示例使用PHP,但是以您首选的服务器端语言进行交换:

1)创建一个包含以下行的nocontent.PHP文件:header(“HTTP / 1.0 204 No Content”);这令人惊讶地返回一个“HTTP / 1.0 204无内容”头.浏览器在请求此页面时似乎不会执行任何操作.您可以选择使此页面处理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到达时检索付款状态.

请注意,拦截和防止条纹触发表单本身的提交事件可能是更好的做法,但是我没有使用该方法获得可靠的成功.

猜你在找的jQuery相关文章