spree_braintree_vzero 3.5.1

data/app/overrides/spree/orders/edit.rb

@@ -0,0 +1,6 @@
+Deface::Override.new(
+  virtual_path: 'spree/orders/edit',
+  name: 'Add PayPal button',
+  insert_before: 'erb[loud]:contains("checkout-link")',
+  partial: 'spree/braintree_vzero/paypal_checkout'
+)

data/app/overrides/spree/shared/_order_details.rb

@@ -0,0 +1,13 @@
+Deface::Override.new(
+  virtual_path: 'spree/shared/_order_details',
+  name: 'Displays payment data for PayPal Express payment methods',
+  replace: %{erb[silent]:contains('order.has_step?("payment")')},
+  text: '<% if @order.has_step?("payment") || @order.paid_with_paypal_express? %>'
+)
+
+Deface::Override.new(
+  virtual_path: 'spree/shared/_order_details',
+  name: 'Removes redirect to payment step when there is no payment',
+  replace: 'erb[loud]:contains("checkout_state_path(:payment) unless order.completed?")',
+  text: '<%= link_to "(#{Spree.t(:edit)})", checkout_state_path(:payment) unless order.completed? || order.paid_with_paypal_express? %>'
+)

data/app/overrides/spree/shared/_payment.rb

@@ -0,0 +1,28 @@
+Deface::Override.new(
+  virtual_path: 'spree/shared/_payment',
+  name: 'Displays payment data for PayPal Express payment methods',
+  replace: 'erb[silent]:contains("else")',
+  text: %{
+        <% elsif payment.payment_method.kind_of?(Spree::Gateway::BraintreeVzeroBase) %>
+          <% if (last_digits = payment.source.braintree_last_digits) %>
+            <%
+              cc_type = payment.source.braintree_card_type
+              img = "credit_cards/icons/" + cc_type.downcase + ".png"
+            %>
+            <% if asset_available?(img) %>
+              <%= image_tag img %>
+            <% else %>
+              <p><%= Spree.t(:cc_type) + ": " + cc_type %></p>
+              </br>
+            <% end %>
+            <p><%= Spree.t(:ending_in) + " " + last_digits %></p>
+          <% end %>
+
+          <% if (paypal_email = payment.source.paypal_email) %>
+            <!-- PayPal Logo --><img src="https://www.paypalobjects.com/webstatic/mktg/logo/pp_cc_mark_37x23.jpg" border="0" alt="PayPal Logo"><!-- PayPal Logo -->
+            <%= paypal_email %>
+          <% end %>
+
+        <% else %>
+        }
+)

data/app/views/spree/admin/payment_methods/_braintree_vzero_form.html.erb

@@ -0,0 +1,83 @@
+<div data-hook="admin_payment_method_form_fields">
+
+  <div class="card mb-3">
+    <div class="card-header">
+      <h1 class="card-title h5 mb-0">
+        <%= Spree.t(:general_settings)%>
+      </h1>
+    </div>
+
+    <div class="card-body">
+      <div class="row">
+        <div class="col-lg-4">
+          <%= f.field_container :provider, class: ['form-group'] do %>
+            <%= f.label :type, Spree.t(:provider) %>
+            <%= collection_select(:payment_method, :type, @providers, :to_s, :name, {}, {id: 'gtwy-type', class: 'select2'}) %>
+          <% end %>
+
+          <% unless @object.new_record? %>
+            <%= braintree_basic_preference_fields(@object, f) %>
+
+            <% if @object.respond_to?(:preferences) %>
+              <div id="gateway-settings-warning" class="info warning">
+                <%= Spree.t(:provider_settings_warning) %>
+              </div>
+            <% end %>
+          <% end %>
+
+          <%= f.field_container :payment_method_display_on, class: ['form-group'] do %>
+            <%= label_tag :payment_method_display_on, Spree.t(:display) %>
+            <%= select(:payment_method, :display_on, Spree::PaymentMethod::DISPLAY.collect { |display| [Spree.t(display), display.to_s] }, {}, {:class => 'select2'}) %>
+          <% end %>
+
+          <%= f.field_container :payment_method_auto_capture, class: ['form-group'] do %>
+            <%= label_tag :payment_method_auto_capture, Spree.t(:auto_capture) %>
+            <%= select(:payment_method, :auto_capture, [["#{Spree.t(:use_app_default)} (#{Spree::Config[:auto_capture]})", ''], [Spree.t(:say_yes), true], [Spree.t(:say_no), false]], {}, {:class => 'select2'}) %>
+          <% end %>
+
+          <%= f.field_container :payment_method_active, class: ['form-group'] do %>
+            <strong><%= Spree.t(:active) %></strong>
+            <div class="radio">
+              <%= label_tag :payment_method_active_true do %>
+                <%= radio_button :payment_method, :active, true %>
+                <%= Spree.t(:say_yes) %>
+              <% end %>
+            </div>
+
+            <div class="radio">
+              <%= label_tag :payment_method_active_false do %>
+                <%= radio_button :payment_method, :active, false %>
+                <%= Spree.t(:say_no) %>
+              <% end %>
+            </div>
+          <% end %>
+        </div>
+
+        <div class="col-lg-8">
+          <%= f.field_container :payment_method_name, class: ['form-group'] do %>
+            <%= label_tag :payment_method_name, Spree.t(:name) %>
+            <%= text_field :payment_method, :name, :class => 'form-control' %>
+          <% end %>
+          <%= f.field_container :payment_method_description, class: ['form-group'] do %>
+            <%= label_tag :payment_method_description, Spree.t(:description) %>
+            <%= text_area :payment_method, :description, { :cols => 60, :rows => 6, :class => 'form-control' } %>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="card mb-3">
+    <div class="card-header" id="advanced-preferences-heading" style="cursor: pointer;">
+      <h1 class="card-title h5 mb-0">
+        <span class="icon icon-chevron-right"></span>
+        <%= Spree.t(:advanced_settings)%></h1>
+    </div>
+
+    <div class="card-body collapsed" id="advanced-preferences" style="display: none;">
+      <% unless @object.new_record? %>
+        <%= braintree_advanced_preference_fields(@object, f) %>
+      <% end %>
+    </div>
+  </div>
+</div>

data/app/views/spree/admin/payments/source_forms/_braintree_vzero_dropin_ui.html.erb

@@ -0,0 +1 @@
+<%= render partial: 'spree/admin/payments/source_forms/braintree_vzero/payments', locals: { payment_method: payment_method, payment_method_type: 'dropin' } %>

data/app/views/spree/admin/payments/source_forms/_braintree_vzero_hosted_fields.html.erb

@@ -0,0 +1 @@
+<%= render partial: 'spree/admin/payments/source_forms/braintree_vzero/payments', locals: { payment_method: payment_method, payment_method_type: 'custom' } %>

data/app/views/spree/admin/payments/source_forms/_braintree_vzero_paypal_express.html.erb

@@ -0,0 +1 @@
+<%= render partial: 'spree/admin/payments/source_forms/braintree_vzero/payments', locals: { payment_method: payment_method, payment_method_type: 'paypal' } %>

data/app/views/spree/admin/payments/source_forms/braintree_vzero/_payments.html.erb

@@ -0,0 +1,87 @@
+<% display_payment_methods_list = (@methods = payment_method.customer_payment_methods(@order, payment_method_type)).any? %>
+<% shipping_address = @order.shipping_address %>
+<% paypal = payment_method_type.eql?('paypal') %>
+<% dropin = payment_method_type.eql?('dropin') %>
+<% hosted = payment_method_type.eql?('custom') %>
+
+<div class="clearfix">
+  <% if display_payment_methods_list %>
+    <%= label_tag 'saved_payment_methods', I18n.t("braintree.checkout.saved_payment_method.#{payment_method_type}") %>
+    <%= select_tag "saved_payment_methods_for_#{payment_method.id}", options_from_braintree_payments(@methods, true), class: 'form-control saved-payment-methods' %>
+
+    <% unless paypal %>
+      <div class="radio show-new-payment">
+        <label data-hook="braintree_payment_method_field">
+          <%= link_to Spree.t(dropin ? :add_new_payment_method : :add_new_credit_card), '', id: 'show-new-payment' %>
+        </label>
+      </div>
+    <% end %>
+  <% end %>
+
+  <% if paypal %>
+    <div>
+      <% unless display_payment_methods_list %>
+        <div class="alert alert-warning">
+          <%= I18n.t('braintree.admin.no_paypal_payments') %>
+        </div>
+      <% end %>
+  <% else %>
+    <div class="<%= display_payment_methods_list ? 'new-braintree-payment-method' : '' %>" style="<%= display_payment_methods_list ? 'display: none;' : '' %>">
+  <% end %>
+
+    <% if hosted %>
+      <br/>
+      <%= label_tag 'card_number_label', payment_method.preferred_number_placeholder %>
+      <span class="required">*</span><br />
+      <p id="hosted-fields-number" class="form-control"></p>
+
+      <%= label_tag 'cvv_label', payment_method.preferred_cvv_placeholder %>
+      <span class="required">*</span><br />
+      <p id="hosted-fields-cvv" class="form-control"></p>
+
+      <%= label_tag 'expiration_date_label', payment_method.preferred_expiration_date_placeholder %>
+      <span class="required">*</span><br />
+      <p id="hosted-fields-expiration-date" class="form-control"></p>
+      <br/>
+    <% elsif dropin %>
+      <br/>
+      <div id="payment-form"/>
+      <br/>
+    <% end %>
+  </div>
+
+  <% unless paypal %>
+    <%= button Spree.t('actions.update'), 'save', 'submit', class: 'new-braintree-payment-method braintree-submit' %>
+  <% end %>
+</div>
+
+<script src="https://js.braintreegateway.com/v2/braintree.js"></script>
+<script src="https://js.braintreegateway.com/v1/braintree-data.js" async=true></script>
+
+<script type="text/javascript">
+  $('#payment_payment_method_id_<%= payment_method.id %>').click(function (e) {
+    var checkoutFormId = "new_payment";
+
+    SpreeBraintreeVzero.advancedFraudTools = false;
+    SpreeBraintreeVzero.paymentMethodID = "<%= payment_method.id %>";
+    SpreeBraintreeVzero.checkoutFormId = "#" + checkoutFormId;
+    SpreeBraintreeVzero.threeDSecure = false;
+    SpreeBraintreeVzero.paypal = <%= paypal %>;
+    SpreeBraintreeVzero.admin = true;
+    SpreeBraintreeVzero.paypal_empty = <%= !display_payment_methods_list %>
+
+    var clientToken = "<%= payment_method.client_token(@order) %>";
+    var errorMessagesContainer = "col-md-12";
+
+    <% if dropin %>
+      var container = "payment-form";
+      $('#' + container).empty();
+    <% end %>
+    var checkout;
+
+    braintree.setup(clientToken, '<%= payment_method_type %>', {
+      <%= render(partial: 'spree/shared/braintree_vzero/dropin', locals: { shipping_address: shipping_address, payment_method: payment_method }, formats: [:js]) if dropin %>
+      <%= render(partial: 'spree/shared/braintree_vzero/hosted', locals: { payment_method: payment_method }, formats: [:js]) if hosted %>
+    });
+  });
+</script>

data/app/views/spree/admin/payments/source_views/_braintree_vzero_dropin_ui.html.erb

@@ -0,0 +1 @@
+<%= render partial: 'spree/admin/payments/source_views/braintree_vzero/payment', locals: { payment: payment, payment_type: 'dropin' } %>

data/app/views/spree/admin/payments/source_views/_braintree_vzero_hosted_fields.html.erb

@@ -0,0 +1 @@
+<%= render partial: 'spree/admin/payments/source_views/braintree_vzero/payment', locals: { payment: payment, payment_type: 'custom' } %>

data/app/views/spree/admin/payments/source_views/_braintree_vzero_paypal_express.html.erb

@@ -0,0 +1 @@
+<%= render partial: 'spree/admin/payments/source_views/braintree_vzero/payment', locals: { payment: payment, payment_type: 'paypal' } %>

data/app/views/spree/admin/payments/source_views/braintree_vzero/_payment.html.erb

@@ -0,0 +1,17 @@
+<fieldset data-hook="braintree_vzero">
+  <legend><%= I18n.t("braintree.title.#{payment_type}") %></legend>
+  <table class="table table-condensed table-bordered">
+    <tr>
+      <th width="20%"><%= Spree.t(:transaction_id) %>:</th>
+      <td><%= payment.source.transaction_id %></td>
+    </tr>
+    <tr>
+      <th><%= I18n.t('braintree.state') %>:</th>
+      <td><%= payment.source.state %></td>
+    </tr>
+    <tr>
+      <th><%= Spree.t(:state) %>:</th>
+      <td><%= payment.state %></td>
+    </tr>
+  </table>
+</fieldset>

data/app/views/spree/braintree_vzero/_paypal_checkout.html.erb

@@ -0,0 +1,87 @@
+<% if (payment_method = Spree::PaymentMethod.where(type: 'Spree::Gateway::BraintreeVzeroPaypalExpress', active: true).last).try(:preferred_paypal_display_on_cart) %>
+  <div id="paypal-container" class="btn">
+    <input type='hidden' name='paypal[payment_method_id]' value='<%= payment_method.id %>'>
+    <img src="https://www.paypalobjects.com/en_US/i/btn/btn_xpressCheckout.gif" id="btnOpenFlow">
+  </div>
+
+  <script src="https://js.braintreegateway.com/v2/braintree.js"></script>
+  <script src="https://js.braintreegateway.com/js/braintree-2.32.1.min.js"></script>
+
+  <script type="text/javascript">
+    var checkoutFormId = '#update-cart';
+    var checkout;
+    SpreeBraintreeVzero.checkoutFormId = '#update-cart';
+
+    braintree.setup("<%= payment_method.client_token(current_order) %>", "paypal", {
+      container: "paypal-container",
+      singleUse: <%= payment_method.preferred_store_payments_in_vault.eql?('do_not_store') %>,
+      amount: <%= @order.total %>,
+      currency: "<%= current_currency %>",
+      locale: "en_us",
+      enableShippingAddress: true,
+      enableBillingAddress: true,
+      displayName: "<%= payment_method.preferred_paypal_display_name %>",
+      <% if payment_method.preferred_advanced_fraud_tools %>
+        dataCollector: {
+          kount: {
+            environment: "<%= payment_method.preferred_server %>"
+            <% if (kount_id = payment_method.preferred_kount_merchant_id).present? %>
+              ,
+              merchantId: "<%= kount_id %>"
+            <% end %>
+          }
+        },
+      <% end %>
+
+      onReady: function (integration) {
+        SpreeBraintreeVzero.deviceData = integration.deviceData;
+        checkout = integration;
+      },
+      headless: true,
+
+      onPaymentMethodReceived: function (result) {
+        $('#paypal-container').hide()
+        $('#checkout-link').prop("disabled", true);
+        phone = result.details.phone
+        SpreeBraintreeVzero.addDeviceData();
+
+        if(shippingAddress = result.details.shippingAddress) {
+          $(checkoutFormId).append("<input type='hidden' name='order[ship_address][zipcode]' value='" + shippingAddress.postalCode + "'>");
+          $(checkoutFormId).append("<input type='hidden' name='order[ship_address][full_name]' value='" + shippingAddress.recipientName + "'>");
+          $(checkoutFormId).append("<input type='hidden' name='order[ship_address][firstname]' value='" + result.details.firstName + "'>");
+          $(checkoutFormId).append("<input type='hidden' name='order[ship_address][lastname]' value='" + result.details.lastName + "'>");
+          $(checkoutFormId).append("<input type='hidden' name='order[ship_address][address1]' value='" + shippingAddress.streetAddress + "'>");
+          $(checkoutFormId).append("<input type='hidden' name='order[ship_address][address2]' value='" + shippingAddress.extendedAddress + "'>");
+          $(checkoutFormId).append("<input type='hidden' name='order[ship_address][city]' value='" + shippingAddress.locality + "'>");
+          $(checkoutFormId).append("<input type='hidden' name='order[ship_address][country]' value='" + shippingAddress.countryCodeAlpha2 + "'>");
+          $(checkoutFormId).append("<input type='hidden' name='order[ship_address][state]' value='" + shippingAddress.region + "'>");
+          if(phone)
+            $(checkoutFormId).append("<input type='hidden' name='order[ship_address][phone]' value='" + phone + "'>");
+        }
+
+        if(billingAddress = result.details.billingAddress) {
+          $(checkoutFormId).append("<input type='hidden' name='order[bill_address][zipcode]' value='" + billingAddress.postalCode + "'>");
+          $(checkoutFormId).append("<input type='hidden' name='order[bill_address][firstname]' value='" + result.details.firstName + "'>");
+          $(checkoutFormId).append("<input type='hidden' name='order[bill_address][lastname]' value='" + result.details.lastName + "'>");
+          $(checkoutFormId).append("<input type='hidden' name='order[bill_address][address1]' value='" + billingAddress.streetAddress + "'>");
+          $(checkoutFormId).append("<input type='hidden' name='order[bill_address][address2]' value='" + billingAddress.extendedAddress + "'>");
+          $(checkoutFormId).append("<input type='hidden' name='order[bill_address][city]' value='" + billingAddress.locality + "'>");
+          $(checkoutFormId).append("<input type='hidden' name='order[bill_address][country]' value='" + billingAddress.countryCodeAlpha2 + "'>");
+          $(checkoutFormId).append("<input type='hidden' name='order[bill_address][state]' value='" + billingAddress.region + "'>");
+          if(phone)
+            $(checkoutFormId).append("<input type='hidden' name='order[bill_address][phone]' value='" + phone + "'>");
+        }
+
+        $(checkoutFormId).append("<input type='hidden' name='order[email]' value=" + result.details.email + ">");
+        $(checkoutFormId).append("<input type='hidden' name='paypal[payment_method_nonce]' value=" + result.nonce + ">");
+        $(checkoutFormId).append("<input type='hidden' name='checkout' value=true>");
+
+        $(checkoutFormId).submit();
+      }
+    });
+
+    document.querySelector('#btnOpenFlow').addEventListener('click', function () { checkout.paypal.initAuthFlow(); }, false);
+  </script>
+<% else %>
+  &nbsp;
+<% end %>

data/app/views/spree/checkout/payment/_braintree_vzero_dropin_ui.html.erb

@@ -0,0 +1,4 @@
+<% payment_method_type = 'dropin' %>
+
+<%= render 'spree/checkout/payment/braintree_vzero/payment', payment_method_type: payment_method_type, payment_method: payment_method %>
+

data/app/views/spree/checkout/payment/_braintree_vzero_hosted_fields.html.erb

@@ -0,0 +1,4 @@
+<% payment_method_type = 'custom' %>
+
+<%= render 'spree/checkout/payment/braintree_vzero/payment', payment_method_type: payment_method_type, payment_method: payment_method %>
+

data/app/views/spree/checkout/payment/_braintree_vzero_paypal_express.html.erb

@@ -0,0 +1,4 @@
+<% payment_method_type = 'paypal' %>
+
+<%= render 'spree/checkout/payment/braintree_vzero/payment', payment_method_type: payment_method_type, payment_method: payment_method %>
+

data/app/views/spree/checkout/payment/braintree_vzero/_buttons.html.erb

@@ -0,0 +1,11 @@
+<% @order.available_payment_methods.each do |method| %>
+  <% next unless method.kind_of?(Spree::Gateway::BraintreeVzeroBase) %>
+
+  <% if method.is_a?(Spree::Gateway::BraintreeVzeroPaypalExpress) %>
+         <span id="paypal-submit", class="btn btn-lg btn-success primary braintree-submit", style="display: none;" method_id="<%= method.id %>">
+      <%= Spree.t(:save_and_continue) %>
+    </span>
+  <% else %>
+    <%= submit_tag Spree.t(:save_and_continue), class: 'btn btn-lg btn-success primary braintree-submit', style: 'display: none;', method_id: method.id %>
+  <% end %>
+<% end %>

data/app/views/spree/checkout/payment/braintree_vzero/_dropin_on_error_callback.js.erb

@@ -0,0 +1,3 @@
+// console.log(error.type)
+// console.log(error.message)
+// console.log(error.details)

data/app/views/spree/checkout/payment/braintree_vzero/_dropin_on_ready_callback.js.erb

@@ -0,0 +1 @@
+// console.log(integration)

data/app/views/spree/checkout/payment/braintree_vzero/_hosted_fields_on_field_event_callback.js.erb

@@ -0,0 +1,12 @@
+// if (event.type === "focus") {
+//   console.log('focus');
+// } else if (event.type === "blur") {
+//   console.log('blur');
+// } else if (event.type === "fieldStateChange") {
+//   console.log('fieldStateChange');
+//   console.log(event.isValid); // true|false
+//   if (event.card) {
+//     console.log(event.card.type);
+//     // visa|master-card|american-express|diners-club|discover|jcb|unionpay|maestro
+//   }
+// }

data/app/views/spree/checkout/payment/braintree_vzero/_hosted_fields_styles.js.erb

@@ -0,0 +1,29 @@
+// // Style all elements
+// "input": {
+//   "font-size": "16pt",
+//   "color": "#3A3A3A"
+// },
+//
+// // Styling a specific field
+// ".number": {
+//   "font-family": "monospace"
+// },
+//
+// // Styling element state
+// ":focus": {
+//   "color": "blue"
+// },
+".valid": {
+  "color": "green"
+},
+".invalid": {
+  "color": "red"
+},
+//
+// // Media queries
+// // Note that these apply to the iframe, not the root window.
+// "@media screen and (max-width: 700px)": {
+//   "input": {
+//     "font-size": "14pt"
+//   }
+// }

data/app/views/spree/checkout/payment/braintree_vzero/_payment.html.erb

@@ -0,0 +1,84 @@
+<% display_payment_methods_list = !payment_method.try(:preferred_3dsecure) && (@methods = payment_method.customer_payment_methods(@order, payment_method_type)).any? %>
+<% paypal = payment_method_type.eql?('paypal') %>
+<% dropin = payment_method_type.eql?('dropin') %>
+<% hosted = payment_method_type.eql?('custom') %>
+
+<div class="card clearfix">
+  <div class="card-body bg-light">
+    <% if display_payment_methods_list %>
+      <%= label_tag 'saved_payment_methods', I18n.t("braintree.checkout.saved_payment_method.#{payment_method_type}") %>
+      <%= select_tag "saved_payment_methods_for_#{payment_method.id}", options_from_braintree_payments(@methods, true), class: 'form-control saved-payment-methods' %>
+
+      <% unless paypal %>
+        <div class="radio show-new-payment">
+          <label data-hook="braintree_payment_method_field">
+            <%= link_to Spree.t(dropin ? :add_new_payment_method : :add_new_credit_card), '', id: 'show-new-payment' %>
+          </label>
+        </div>
+      <% end %>
+    <% end %>
+    <br/>
+
+    <% if paypal %>
+      <div id="paypal-container">
+    <% else %>
+      <div class="<%= display_payment_methods_list ? 'new-braintree-payment-method' : '' %>">
+    <% end %>
+
+    <div class="col-xs-12" >
+      <div class="form-group">
+        <label for="email">Email address</label>
+        <%= email_field_tag :email, @order.email, class: 'form-control' %>
+        <span id="help-email" class="help-block"></span>
+      </div>
+    </div>
+
+    <% if hosted || dropin %>
+      <% if hosted %>
+        <div id="hosted-fields">
+          <%= label_tag 'card_number_label', (payment_method&.preferred_number_placeholder || 'Card Number') %>
+          <span class="required">*</span><br />
+          <p id="hosted-fields-number" class="form-control"></p>
+
+          <%= label_tag 'cvv_label', payment_method.try(:preferred_cvv_placeholder) || 'Cvv code' %>
+          <span class="required">*</span><br />
+          <p id="hosted-fields-cvv" class="form-control"></p>
+
+          <%= label_tag 'expiration_date_label', payment_method.try(:preferred_expiration_date_placeholder) || 'Card Expiration Date' %>
+          <span class="required">*</span><br />
+          <p id="hosted-fields-expiration-date" class="form-control"></p>
+
+      <% elsif dropin %>
+        <div class="input-group pay-group bt-drop-in-container">
+          <div id="drop-in"></div>
+      <% end %>
+
+      </div>
+
+      <div class="col-xs-6">
+        <div class="input-group pay-group">
+        </div>
+        <div class="credit-card-pay-success hidden">
+          <%= Spree.t(:credit_card_veryfied_successfully) %>
+        </div>
+        <div class="credit-card-pay-errors hidden">
+          <%= Spree.t(:verify_credit_card_failed) %>
+        </div>
+      </div>
+    <% end %>
+    </div>
+  </div>
+</div>
+<hr/>
+
+<% if hosted %>
+  <script src="https://js.braintreegateway.com/web/3.54.1/js/client.min.js"></script>
+  <script src="https://js.braintreegateway.com/web/3.54.1/js/hosted-fields.min.js"></script>
+  <script src="https://js.braintreegateway.com/web/3.54.1/js/three-d-secure.min.js"></script>
+<% elsif dropin %>
+  <script src='https://js.braintreegateway.com/web/dropin/1.20.4/js/dropin.min.js'></script>
+<% end %>
+
+<%= render partial: 'spree/checkout/payment/braintree_vzero/three_d_secure',
+           locals: { payment_method: payment_method, hosted: hosted, dropin: dropin }
+%>