Stripe API 无限循环答案

【问题标题】：Stripe API Infinite LoopStripe API 无限循环
【发布时间】：2014-10-26 10:27:56
【问题描述】：

我在阅读本 Stripe 教程 (https://stripe.com/docs/tutorials/forms) 时遇到了无限循环。

$j('#payment-form').submit(function(){

    var $form = $j(this);

    $j('#submit',$form).prop('disabled',true);

    Stripe.card.createToken($form,stripeResponseHandler);

    return false;

});

// Stripe Callback

function stripeResponseHandler(status,response){

    var $form = $j('#payment-form');

    if(response.error){

        /* Show the errors on the form */

        $j('.payment-errors',$form).addClass('msg error_msg').text(response.error.message);
        $j('#submit',$form).prop('disabled', false);

    } else {

        var token = response.id;

        $form.append($j('<input type="hidden" name="stripeToken" />').val(token));
        $form.get(0).submit();

    }

};

createToken 响应处理程序说要使用 $form.get(0).submit() 重新提交表单而不重新触发初始提交侦听器，但我收到一个控制台错误说 $form.get(. .).submit 不是函数。

将 $form.get(0).submit() 更改为 $form.submit() 会启动循环。

根据我找到的其他一些建议，我在提交侦听器中添加了对令牌的检查，如果令牌存在则返回 true。这打破了循环，但表单永远不会提交。

$j('#payment-form').submit(function(){

    if(typeof $j('input[name="stripeToken"]').val() !== 'undefined'){
        return true;
    }

    var $form = $j(this);

    $j('#submit',$form).prop('disabled',true);

    Stripe.card.createToken($form,stripeResponseHandler);

    return false;

});

我正在使用 jQuery 1.11.1。

感谢任何帮助。谢谢！

【问题讨论】：

尝试将this而不是$form传递给createToken
不走运，仍然在 $form.get(0).submit() 处循环或抛出 TypeError...
为什么 $form.get(0) 没有按预期工作？
检查文档，有些地方不对，文档很好
我正在直接从文档中学习教程。

标签： jquery infinite-loop stripe-payments

【解决方案1】：

我可以通过将提交按钮的 ID 从“提交”更改来解决问题。

我真的不明白为什么会导致问题，所以如果有人能详细说明，那就太好了。

【讨论】：

我相信这是因为他们的 JS 使用提交按钮的禁用/启用作为最终是否获取新令牌或提交表单的标记。如果您要为令牌使用文本输入而不是隐藏，您会看到它无限地获得新令牌。

【解决方案2】：

我发现摆脱无限循环的另一种方法是使用以下代码：

$form[0].submit();

它救了我，我希望它救了你。 :)

【讨论】：

这仅适用于页面上有 1 个表单。如果您有其他表单，例如标题中的搜索框，则必须更改该索引。

【解决方案3】：

我正在使用新的 Stripe Elements 库（Stripe.js 的一部分）并且也有循环。

我没有逐行遵循示例，而是使用 jQuery 将事件处理程序附加到提交事件，例如：

var form = $('#payment-form')
form.on('submit', function() { ...

如果你像我一样这样做，如果你在代码的其他任何地方使用form.submit()，你将尝试使用 jQuery 提交表单，这将触发一个无限循环，因为它会触发 jQuery 在表单上的提交事件处理程序一次又一次（只是看着你的 devtools 网络标签发疯）。

解决方案是在不使用 jQuery 的情况下提交，使用 form[0].submit()，记住 form 是一个 jQuery 对象，而 form[0] 为您提供本机表单元素。这为我解决了循环。

【讨论】：