使用 Braintree.js 创建具有 CC 信息的用户

Question

我正在尝试通过braintree.js 在一个表单中提交一个创建新用户（设计）和支付令牌的表单。我的 html 表单如下所示。

<div class="container">
  <h2 class='registration'>Sign up</h2>
  <%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: {:class => 'col-sm-12'}) do |f| %>
    <%= devise_error_messages! %>

    <div class="form-horizontal">
      <%= f.label :email, class: "col-sm-3 control-label" %>
      <div class="col-sm-7">
        <%= f.email_field :email, class: "form-control" %>
      </div>
    </div><br /><br />

    <div class="form-horizontal">
      <%= f.label :full_name, class: "col-sm-3 control-label" %>
      <div class="col-sm-7">
        <%= f.text_field :full_name, class: "form-control",autofocus: true %>
      </div>
    </div><br /><br />

    <div class="form-horizontal">
      <%= f.label :password, class: "col-sm-3 control-label" %>
      <div class="col-sm-7">
        <%= f.password_field :password, autocomplete: "off", class: "form-control" %>
      </div>
    </div><br /><br />

    <div class="form-horizontal">
      <%= f.label :password_confirmation, class: "col-sm-3 control-label" %>
      <div class="col-sm-7">
        <%= f.password_field :password_confirmation, autocomplete: "off", class: "form-control" %>
      </div>
    </div><br /><br />

      <input data-braintree-name="number" value="4111111111111111">
      <input data-braintree-name="cvv" value="100">

      <input data-braintree-name="expiration_month" value="10">
      <input data-braintree-name="expiration_year" value="2020">

      <div id="braintree-container"></div>

      <script src="https://js.braintreegateway.com/v2/braintree.js"></script>
      <script>
        braintree.setup("MY BRAINTREE TOKEN",
                        "custom",
                          {
                          container: "braintree-container",
                          paymentMethodNonceInputField: "payment-method-nonce"}
        );
        var client = new braintree.api.Client({clientToken: <%= @client_token %>});
        client.tokenizeCard({number: "4111111111111111", expirationDate: "10/20"}, function (err, nonce) {

      </script>

    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-6">
        <%= f.submit "Sign up", class: "btn btn-primary form-registration", id: "user-form-submit" %>
      </div>
    </div><br /><br />
  <% end %>
</div>

我认为当我提交此内容时应该发生的事情是。 Rails 创建了一个新用户。然后 Braintree.js 使用 CC 信息向他们的服务发出请求，并返回一个带有值的 params[:payment method_nonce]。然而会发生什么是用户被创建，但我没有得到有关 payment_method_nonce 的信息。

您可能会问我为什么要尝试从一个页面添加所有这些信息？一旦用户注册，我计划创建一个后台工作人员来创建订阅。

控制器（我的用户控制器）

class Users::RegistrationsController < Devise::RegistrationsController
  def new
    @client_token = Braintree::ClientToken.generate()
    super
  end


  def create
    super
  end

 def configure_sign_up_params
    devise_parameter_sanitizer.for(:sign_up) << [:full_name, :credit_card, :cvc,
    :expiration_month, :expiration_year, :token, :client_token]
  end

我的架构是这样的

 create_table "users", force: true do |t|
    t.string   "email",                  default: "", null: false
    t.string   "encrypted_password",     default: "", null: false
    t.datetime "created_at"
    t.datetime "updated_at"
    t.string   "full_name",                           null: false
    t.string   "token"
  end

附加信息

-Rails 4 -红宝石 2.0 - Braintree.js v2

Answer 1

我在布伦特里工作。 Braintree 的自定义集成旨在让您控制表单的外观，同时仍自动处理信用卡信息到 BT 服务器的安全传输，并为您的表单添加付款方式 nonce。它不与braintree.api.Client 和卡标记一起使用；这仅在您想自己处理卡片数据的标记化或在提交之前对表单执行更复杂的事情时使用。

至于为什么你没有得到随机数，你是否在对braintree.setup 的调用中插入了客户端令牌（就像你在创建客户端时所做的那样）？此外，因为您正在向 setup 调用提供 paymentMethodNonceInputField，所以这是 BT javascript 将用来向您发送 nonce 的隐藏输入的名称。这是一个可选字段，因此除非您有理由使用破折号而不是下划线来命名此参数，否则您可能需要删除它。如果你同时做这两件事，nonce 应该可以在你的控制器中作为params[:payment_method_nonce] 访问。

最后，我们不建议以与付款方式相同的形式创建用户。偶尔会发生用户在错误字段中输入信用卡数据的情况，在这种情况下，它最终会出现在您的服务器上。

为了实现您的目标，您可能需要颠倒事情发生的顺序，并拥有两种不同的形式。首先，点击提交，让 Braintree.js 做它的事情，然后在你传递给它的回调中，获取结果并将其放入你提交给 rails 并提交的单独表单中，然后使用信息进行用户创建等该表单提交。

如果您还有其他问题，可以联系Braintree support。