用于添加 CC 的 Braintree 托管字段

Question

我已经使用托管字段设置了 braintree 支付，如下所示：

在 JS 文件中：

braintree.setup(client_token, "custom", {
      id: "my-sample-form",
      paypal: {
          container: "paypal-container"
        },
        hostedFields: {
          number: {
            selector: '#my-credit-card-field',
          },
          cvv: {
            selector: '#my-security-code-field',
          },
          expirationDate: {
            selector: '#my-expiration-field',
          },
          postalCode: {
            selector: '#my-postal-code-field',
          }
        },
      });

我在尝试设置新客户时没有问题，当他们需要填写他们的 CC 详细信息时，但是，当我尝试设置现有客户时，JS 文件因不存在而失败 #my-credit-card-field，等等..

在我的 new.html.erb 中，我有这样的东西：

 <% unless current_user.has_payment_info? %>
     <div id="my-credit-card" readonly>**** **** **** <%= @last_4_number %></div>
 <% else %>
     <div id="my-credit-card-field"></div>
     <div id="my-security-code-field"></div>
     <div id="my-expiration-field"></div>
     <div id="my-postal-code-field"></div>
 <% end %>

所以我会询问新客户的抄送详细信息，现有客户可以保存他们的付款方式信息。我的控制器中有这样的东西：

def create
  @amount = params[:slider]
  @token = Braintree::Customer.find(current_user.braintree_customer_id).credit_cards.first.token
  unless current_user.has_payment_info?    
    @result = Braintree::Transaction.sale(
            amount: @amount,
            payment_method_nonce: params[:payment_method_nonce],
            options: {
               store_in_vault: true
                     })
  else
    @result = Braintree::Transaction.sale(
            customer_id: current_user.braintree_customer_id,
            amount: @amount,
            payment_method_token: @token)
  end

if @result.success?
 #Some codes here
end
end

我的问题：

如果我将现有客户表单的 ID 设置为 my-credit-card-field，那么由于 hostedfields 选择器 js，他们将需要填写详细信息。如果我没有设置任何选择器，那么 JS 文件中就会有错误。那么有没有更好的方法为已经设置付款方式的现有客户创建表单？

谢谢，我们将不胜感激！

Answer 1

嗯，你可以做以下两件事之一。

选项 1：一个简单的 hack。

当您不需要 Braintree 时，将 div 添加到您页面上表单外的某个位置，例如：

 <div style="display:none" id="my-credit-card-field"></div>
 <div style="display:none" id="my-security-code-field"></div>
 <div style="display:none" id="my-expiration-field"></div>
 <div style="display:none" id="my-postal-code-field"></div>

现在，在页面加载时，Braintree 会找到它们并填充它们，但不会提交任何内容。

当然，当你确实需要它时，不要将这些隐藏的 div 添加到页面（因为它们已经存在于表单中）。

选项 2（推荐）：使用部分。

在不需要Braintree的情况下，真的没必要调用javascript，对吧？因此，您可以将 javascript 移动到仅在必要时才添加到页面的部分。这样，在这种情况下，Braintree 甚至都不会尝试调用来填充 div，因此没有错误。只需在您的条件块中包含渲染调用。

虽然选项 1 肯定更快，但我会推荐选项 2，因为它可能是 "right" 方法，当您忘记 hack 时，您将避免在线下的 "why do we have his hidden div" 问题。

用于添加 CC 的 Braintree 托管字段

Braintree hosted field for added CC

jquery

ruby-on-rails

braintree