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]

<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：条带自定义窗体不会提交（条带是双重加载错误）

1 个答案: