javascript - 当我在 Spree 商店中添加 Braintree Drop-in 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.setup 的调用中指定 form 选项，braintree.js 会将其行为附加到最近的父表单元素。由于您的 Braintree 容器的父表单看起来与其他结账流程使用的表单相同，因此 Braintree.js 确实会劫持提交按钮发出的调用(无论使用的支付流程如何)。我建议创建两个单独的表单元素，并将 Braintree 使用的表单元素的 id 传递给 Braintree.setup 调用。

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