在Spree商店中添加Braintree嵌入式UI时，付款方式选择存在问题

Question

当客户选择Braintree作为付款方式时，我试图实现扩展以适应Braintree的嵌入式UI。 如果我将Braintree js代码添加到_gateway.html.erb中，则所有其他付款方式都将停止工作。 如果我选择除braintree以外的任何其他方法，然后单击“保存并继续”，则什么也不会发生。 “保存并继续”按钮只是被禁用。

我已经覆盖了spree / frontend / app / views / spree / checkout / _gateway.html.erb。

<% if payment_method.name == "Braintree" %>

 <div id="dropin"></div>

<% else %>
<div class="well clearfix">

  <%= image_tag 'credit_cards/credit_card.gif', :id => 'credit-card-image', :class => 'pull-right', :width => '170', :height => '28' %>
  <% param_prefix = "payment_source[#{payment_method.id}]" %>

  <p class="field">
    <%= label_tag "name_on_card_#{payment_method.id}" do %>
      <%= Spree.t(:name_on_card) %><abbr class="required" title="required">*</abbr>
    <% end %>
    <%= text_field_tag "#{param_prefix}[name]", "#{@order.billing_firstname} #{@order.billing_lastname}", { id: "name_on_card_#{payment_method.id}", :class => 'form-control required'} %>
  </p>

  <p class="field" data-hook="card_number">
    <%= label_tag "card_number" do %>
      <%= Spree.t(:card_number) %><abbr class="required" title="required">*</abbr>
    <% end %>
    <% options_hash = Rails.env.production? ? {:autocomplete => 'off'} : {} %>
    <%= text_field_tag "#{param_prefix}[number]", '', options_hash.merge(:id => 'card_number', :class => 'form-control required cardNumber', :size => 19, :maxlength => 19, :autocomplete => "off") %>
    &nbsp;
    <span id="card_type" style="display:none;">
      ( <span id="looks_like" ><%= Spree.t(:card_type_is) %> <span id="type"></span></span>
        <span id="unrecognized"><%= Spree.t(:unrecognized_card_type) %></span>
      )
    </span>
  </p>
  <div class="row">
    <div class="col-md-8 field" data-hook="card_expiration">
      <%= label_tag "card_expiry" do %>
        <%= Spree.t(:expiration) %><abbr class="required" title="required">*</abbr>
      <% end %>
      <%= text_field_tag "#{param_prefix}[expiry]", '', :id => 'card_expiry', :class => "form-control required cardExpiry", :placeholder => "MM / YY" %>
    </div>
    <div class="col-md-4 field" data-hook="card_code">
      <%= label_tag "card_code" do %>
        <%= Spree.t(:card_code) %><abbr class="required" title="required">*</abbr>
      <% end %>
      <%= text_field_tag "#{param_prefix}[verification_value]", '', options_hash.merge(:id => 'card_code', :class => 'form-control required cardCode', :size => 5) %>
      <%= link_to "(#{Spree.t(:what_is_this)})", spree.content_path('cvv'), :target => '_blank', "data-hook" => "cvv_link", :id => "cvv_link" %>
    </div>
  </div>

  <%= hidden_field_tag "#{param_prefix}[cc_type]", '', :id => "cc_type", :class => 'ccType' %>
</div>

<% end %>
<%= @client_token = Braintree::ClientToken.generate %>
<script type="text/javascript">
braintree.setup("<%=@client_token%>", 'dropin', {
      container: 'dropin'
    });
</script>

Answer 1

我在Braintree工作。 如果未在braintree.setup的调用内指定form选项，braintree.js会将其行为附加到最接近的父form元素。 由于您的braintree容器的父表单看起来与其他结帐流程所使用的表单相同，因此braintree.js的确会劫持“提交”按钮进行的​​调用（无论使用何种付款流程）。 我建议创建两个单独的表单元素，并将braintree使用的表单元素的id传递给braintree.setup调用。

braintree.setup("<%=@client_token%>", 'dropin', {
    container: ‘dropin’,
    form: ‘braintree_checkout'
});