当我在Spree Store中添加Braintree嵌入式用户界面时付款方式选择问题

Question

当客户选择Braintree作为付款方式时，我试图实施扩展以适应braintree的嵌入式用户界面。如果我将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' 
});