Rails: Stripe 自定义表单不会提交（Stripe 是双重加载错误）

Question

几天来我一直在尝试实现自定义 Stripe 表单。我学习了很多教程，目前正在关注 Stripe's own tutorial 到 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 action="" method="POST" id="payment-form">

<label class="form-label" for="number">Card Number</label>
<input type="text" data-stripe="number" />

<label class="form-label" for="cvc">CVC</label>
<input type="text" data-stripe="cvc" />

<label class="form-label">Exp (MM)</label>
<input type="text" data-stripe="exp-month" />

<label class="form-label">Exp (YYYY)</label>
<input type="text" data-stripe="exp-year" />

<button type="submit">Submit Payment</button>

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($('<input type="hidden" name="stripeToken" />').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

Answer 1

刚收到 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;
  });
});

Rails: Stripe 自定义表单不会提交（Stripe 是双重加载错误）

Rails: Stripe Custom Form Won't Submit (Stripe is Double Loaded Error)

ruby

ruby-on-rails

stripe-payments