突然发生条纹信用卡处理错误答案

【问题标题】：Stripe credit card processing error occurring all of a sudden突然发生条纹信用卡处理错误
【发布时间】：2014-12-04 01:21:26
【问题描述】：

在使用 Stripe 处理信用卡时，我在浏览器上收到此错误。

Uncaught InvalidStateError: Failed to read the 'selectionDirection' property from 'HTMLInputElement': The input element's type ('hidden') does not support selection.
 Stripe.utils.r.serialize
 Stripe.utils.r.serialize
 Stripe.utils.r.serialize
 Stripe.utils.r.serialize
 Stripe.ajaxJSONP
 e.request
 t.create
 n.createToken
Acpremium.Views.FyUpgradeCCCaptureView.FyUpgradeCCCaptureView.onPaymentSubmit
p.event.dispatch
g.handle.h

我的代码使用 Backbone 和 CoffeeScript 来调用 Stripe。在 2014 年 11 月 6 日之前，我的代码（如下所示）一直在运行和处理付款。从那时起，上述错误开始发生。

我的代码中的条带调用：

   onPaymentSubmit: (event) =>
    event.preventDefault()
    $("*").addClass("busy")

    paymentForm = @$('#payment-form')
    paymentForm.find('button').prop('disabled', true)
    Stripe.card.createToken paymentForm, @stripeResponseHandler
    false

如果我更改代码

paymentForm = @$('#payment-form')

到

   paymentForm = $('#payment-form')

处理完成。对此有什么解释吗？

一个较早的stackoverflow问题How to fit Stripe into Backbone View? 表示@$ 是正确的方法，直到最近@$ 也为我工作。

还有其他人在 Stripe 上遇到过这个问题吗？

【问题讨论】：

您的代码在 11 月 6 日前后发生了什么变化？
什么都没有。代码已经 4 个月了。这就是令我惊讶的地方。该错误是从 stripe.js 的深处抛出的。 Stripe 支持表示没有其他人报告过类似的问题。
表单的 HTML 是什么样的？错误消息表明<input type="hidden"> 正在触发问题。是否有任何 Backbone、Underscore、jQuery 等升级？
输入元素是在我的支付表单中。这条线在过去的 4 个月里一直在那里。我没有对库进行版本更改。不确定 stripe.js 是否在内部依赖于任何 Backbone、Underscor 库并且存在版本不匹配。

标签： backbone.js coffeescript stripe-payments

【解决方案1】：

如果onPaymentSubmit 是您的类中的一个方法，请确保您的类有一个正确的el 元素来包装您的#payment-form 元素。

您的 HTML、CoffeeScript 结构应如下所示：

<div class='payment'>
    <form id='payment-form'>...</form>
</div>

还有 CS：

class Payment extend Backbone.View

   el: ".payment"  // Here .payment is parent element to #payment-form

   ...

   onPaymentSubmit: => ...

当您使用@$ 查找元素时，它会开始查看您视图的el 属性。所以基本上在这种情况下它看起来像：

   @$("#payment-form") === $(".payment #payment-form")

我的猜测是您的 #payment-form 超出了您的主干视图的范围

【讨论】：

我的支付表单不是 el 的直接子代，而是节点层次结构中的孙代。任何嵌套的孩子都应该在范围内，对吧？
是的，任何嵌套的孩子都应该在范围内。无论如何，@$(".. 和$(".. 之间的唯一区别是它看起来在您的视图范围内。在初始化时尝试console.log(@$("#payment-form")) 以确保您的付款表单在您的视图范围内。
是的，我可以看到 $('#payment-form') 和 @$('payment-form') 都在范围内 - 这意味着它们都指的是具有数据值的相同表单。我看到的唯一区别是“上下文”对象的值。其中一个是“文档”，而另一个是 nil 值。