当我在狂欢商店中添加 Braintree 插入式 UI 时，付款方式选择出现问题

Issue with Payment method selection when I add Braintree Drop-in UI in Spree Store

本文关键字：UI 付款方 选择 问题 插入 Braintree 添加      更新时间：2023-09-26

当客户选择Braintree作为付款方式时，我正在尝试实现扩展以适应braintree的插入UI。如果我将braintree js代码添加到_gateway.html.erb中，那么所有其他付款方式都将停止工作。如果我选择除脑树以外的任何其他方法并单击"保存并继续"，则没有任何反应。"保存并继续"按钮只是被禁用。

我已经覆盖了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>

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

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