Rails:条带自定义窗体不会提交(条带是双重加载错误)

我一直在努力实现自定义Stripe表单。 我已经遵循了很多教程,目前我正在关注Stripe自己的教程 T.我在尝试提交表单时收到的错误消息是:

POST https://api.stripe.com/v1/tokens 400(错误请求)

展开后,显示:

Stripe.isDoubleLoaded.c @ (index):3 Stripe.isDoubleLoaded.e @ (index):3 Stripe.isDoubleLoaded.a @ (index):3 Stripe.isDoubleLoaded.Stripe.xhr @ (index):3 Stripe.a._rawRequest @ (index):2 Stripe.a.request @ (index):2 Stripe.token.a.create @ (index):2 Stripe.card.b.createToken @ (index):2 Stripe.a._channelListener @ (index):2 Stripe.isDoubleLoaded.H.Socket.t.concat.incoming @ (index):2 f 

我真的陷入了这一点,所以我将不胜感激!

orders.new [FORM]

 

orders.js

 Stripe.setPublishableKey('MY STRIPE TEST KEY'); jQuery(function($) { $('#payment-form').submit(function(event) { var $form = $(this); // Disable the submit button to prevent repeated clicks $form.find('button').prop('disabled', true); Stripe.card.createToken($form, stripeResponseHandler); // Prevent the form from submitting with the default action return false; }); }); function stripeResponseHandler(status, response) { var $form = $('#payment-form'); if (response.error) { // Show the errors on the form $form.find('.payment-errors').text(response.error.message); $form.find('button').prop('disabled', false); } else { // response contains id and card, which contains additional card details var token = response.id; // Insert the token into the form so it gets submitted to the server $form.append($('').val(token)); // and submit $form.get(0).submit(); } }; 

orders_controller [相关部分]

  begin charge = Stripe::Charge.create( :amount => @amountCents, :source => params[:stripeToken], :currency => 'usd') rescue Stripe::CardError => e charge_error = e.message end 

刚从Stripe支持中听到,然后他们建议的解决方案(有效!)是将Stripe.card.createToken作为对象传递,而不是表单字段。 这需要向每个表单字段添加相关的类(见下文)并更新jQuery函数。

我的orders.js的更新部分现在看起来像:

 jQuery(function($) { $('#payment-form').submit(function(event) { var $form = $(this); // Disable the submit button to prevent repeated clicks $form.find('button').prop('disabled', true); Stripe.card.createToken({ number: $('.card-number').val(), cvc: $('.card-cvc').val(), exp_month: $('.card-expiry-month').val(), exp_year: $('.card-expiry-year').val() }, stripeResponseHandler); // Prevent the form from submitting with the default action return false; }); });