Rails:Stripe 自定义表单无法提交(Stripe 是双重加载错误) [英] Rails: Stripe Custom Form Won't Submit (Stripe is Double Loaded Error)

问题描述

我已经尝试了几天来实现自定义 Stripe 表单.我已经学习了很多教程，目前正在关注 Stripe 自己的教程到 T.错误消息我在尝试提交表单时收到的是:

I've been trying for days to implement a custom Stripe form. I've followed many tutorials, and am currently following Stripe's own tutorial to a T. The error message I receive when trying to submit my form is:

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

POST https://api.stripe.com/v1/tokens 400 (Bad Request)

展开时，显示:

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

我真的被困在这一点上，所以希望得到任何见解！

I'm really stuck at this point so would appreciate any insight!

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

推荐答案

刚刚从 Stripe 支持人员那里得到回复，然后他们建议的解决方案(有效！)是将 Stripe.card.createToken 作为对象传递，而不是表单领域.这需要向每个表单字段添加相关类(见下文)并更新 jQuery 函数.

Just heard back from Stripe support, and then solution they suggested (which worked!) was to pass the Stripe.card.createToken as an object, rather than form fields. This required adding relevant classes to each form field (see below) and updating the jQuery function.

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

The updated part of my orders.js now looks like:

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 是双重加载错误)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！