spree_braintree_vzero 3.5.1 → 3.6.0

data/app/models/spree/log_entry_decorator.rb

@@ -0,0 +1,52 @@
+module Spree
+  module LogEntryDecorator
+    PERMITTED_CLASSES = [
+      Braintree::Errors,
+      Braintree::ErrorResult,
+      ActiveMerchant::Billing::Response,
+      Braintree::Gateway,
+      Braintree::Configuration,
+      Logger,
+      Logger::Formatter,
+      Logger::LogDevice,
+      IO,
+      Monitor,
+      Symbol,
+      Braintree::GraphQLClient,
+      Braintree::ValidationErrorCollection,
+      Braintree::ValidationError,
+      Braintree::SuccessfulResult,
+      Braintree::Transaction,
+      BigDecimal, Time,
+      Braintree::Transaction::StatusDetails,
+      Braintree::Descriptor,
+      Braintree::Transaction::DisbursementDetails,
+      Braintree::RiskData,
+      Braintree::Transaction::CreditCardDetails,
+      Braintree::Transaction::SubscriptionDetails,
+      Braintree::Transaction::CustomerDetails,
+      Braintree::Transaction::AddressDetails,
+      Braintree::Transaction::LocalPaymentDetails,
+      Braintree::Transaction::PayPalDetails,
+      Braintree::Transaction::PayPalHereDetails,
+      Braintree::Transaction::ApplePayDetails,
+      Braintree::Transaction::GooglePayDetails,
+      Braintree::Transaction::VenmoAccountDetails,
+      Braintree::Transaction::VisaCheckoutCardDetails,
+      Braintree::Transaction::SamsungPayCardDetails,
+      Thread::Mutex
+    ].freeze
+
+    def parsed_details
+      @details ||= YAML.safe_load(details, aliases: true, permitted_classes: permitted_classes)
+    end
+
+    private
+
+    def permitted_classes
+      PERMITTED_CLASSES
+    end
+  end
+end
+
+::Spree::LogEntry.prepend(Spree::LogEntryDecorator)

data/app/models/spree/payment_processing_decorator.rb

@@ -55,6 +55,18 @@ module Spree
         current_state
       end
     end
+
+    def handle_payment_preconditions
+      unless block_given?
+        raise ArgumentError, 'handle_payment_preconditions must be called with a block'
+      end
+
+      braintree_payment_method? ? yield : super
+    end
+
+    def braintree_payment_method?
+      payment_method.try(:provider) == Braintree
+    end
   end
 end
 

data/app/models/spree/preferences/preferable_decorator.rb

@@ -10,7 +10,7 @@ module Spree
         when :password
           value.to_s
         when :decimal
-          BigDecimal.new(value.to_s)
+          value.to_d
         when :integer
           value.to_i
         when :boolean, :boolean_select

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

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

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

@@ -4,84 +4,102 @@
     <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/v2/braintree.js" onload="braintreeLoaded()"></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';
+    // TODO: Investiagate what kind of checkout (if any) steps should be included during paypal express payment
+    function setupBraintreePayPal() {
+      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 %>
+      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 %>"
+            ,
+            merchantId: "<%= kount_id %>"
             <% end %>
           }
         },
-      <% end %>
+        <% end %>
 
-      onReady: function (integration) {
-        SpreeBraintreeVzero.deviceData = integration.deviceData;
-        checkout = integration;
-      },
-      headless: true,
+        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();
+        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 (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>");
 
-        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).submit();
         }
+      });
+      document.querySelector('#btnOpenFlow').addEventListener('click', function () { checkout.paypal.initAuthFlow(); }, false);
+    }
 
-        $(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>");
+    function braintreeLoaded () {
+      if(document.readyState !== 'loading') {
+        initBraintreePayPal()
+      } else {
+        window.addEventListener('DOMContentLoaded', initBraintreePayPal);
+      }
+    }
 
-        $(checkoutFormId).submit();
+    function initBraintreePayPal() {
+      if (typeof SpreeBraintreeVzero === "undefined") {
+        window.addEventListener('spreebraintree:ready', setupBraintreePayPal)
+      }
+      else {
+        setupBraintreePayPal()
       }
-    });
+    }
 
-    document.querySelector('#btnOpenFlow').addEventListener('click', function () { checkout.paypal.initAuthFlow(); }, false);
   </script>
-<% else %>
-  &nbsp;
 <% end %>

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

@@ -0,0 +1,178 @@
+<script type="text/javascript">
+  if(document.readyState !== 'loading') {
+    setupPayment()
+  } else {
+    window.addEventListener('DOMContentLoaded', setupPayment);
+  }
+
+  function setupPayment() {
+    $('#order_payments_attributes__payment_method_id_<%= payment_method.id %>').click(function (e) {
+    var threeDSecure;
+    var checkoutFormId = "<%= payment_method.preferred_checkout_form_id %>"
+    var formId = "#" + checkoutFormId;
+
+    var clientToken = "<%= payment_method.client_token(@order) %>";
+
+    <% if hosted %>
+      var hf, threeDS;
+      var hostedFieldsContainer = document.getElementById('hosted-fields');
+    <% elsif dropin %>
+      var dropin;
+    <% end %>
+
+    var payBtn = document.getElementsByName('commit')[0];
+    var payGroup = $('.pay-group');
+
+    $('.credit-card-pay-success').css('display', 'none');
+    $('.credit-card-pay-errors').css('display', 'none');
+
+    function start() {
+      getClientToken();
+    }
+
+    function getClientToken() {
+      onFetchClientToken(clientToken);
+    }
+
+    function setupComponents (clientToken) {
+      return Promise.all([
+        braintree.hostedFields.create({
+          authorization: clientToken,
+          styles: {
+            input: {
+              'font-size': '14px',
+              'font-family': 'monospace'
+            }
+          },
+          fields: {
+            number: {
+              <% if payment_method.respond_to?(:preferred_number_selector) && payment_method.preferred_number_selector.present? %>
+                selector: "<%= payment_method.preferred_number_selector %>"
+              <% else %>
+                selector: '#hosted-fields-number'
+              <% end %>
+            },
+            cvv: {
+              <% if payment_method.respond_to?(:preferred_cvv_selector) && payment_method.preferred_cvv_selector.present? %>
+                selector: "<%= payment_method.preferred_cvv_selector %>"
+              <% else %>
+                selector: '#hosted-fields-cvv'
+              <% end %>
+            },
+            expirationDate: {
+              <% if payment_method.respond_to?(:preferred_expiration_date_selector) && payment_method.preferred_expiration_date_selector.present? %>
+                selector: "<%= payment_method.preferred_expiration_date_selector %>"
+              <% else %>
+                selector: '#hosted-fields-expiration-date'
+              <% end %>
+            }
+          }
+        })
+      ]);
+    }
+
+    function setupDropin (clientToken) {
+      return braintree.dropin.create({
+        authorization: clientToken,
+        container: '#drop-in'
+      })
+    }
+
+    function onFetchClientToken(clientToken) {
+      <% if hosted %>
+      return setupComponents(clientToken).then(function(instances) {
+        hf = instances[0];
+        threeDS = instances[1];
+        <% elsif dropin %>
+        return setupDropin(clientToken).then(function(instance) {
+          dropin = instance;
+          <% end %>
+
+          setupForm();
+        }).catch(function (err) {
+          console.log('component error:', err);
+        });
+      }
+
+      function setupForm() {
+        enablePayNow();
+      }
+
+      function enablePayNow() {
+        payBtn.value = "<%= Spree.t(:save_and_continue) %>";
+        payBtn.removeAttribute('disabled');
+      }
+
+      function showErrors(err) {
+        if (err) {
+          if (err.details && err.details.invalidFields) {
+            const invalidFields = []
+            Object.keys(err.details.invalidFields).forEach(function (key) {
+              if (key === "expirationDate") {
+                invalidFields.push("expiration")
+              } else {
+                invalidFields.push(key)
+              }
+            })
+            const errorString = invalidFields.join(", ")
+            const linkingVerb = invalidFields.length > 1 ? "are" : "is"
+
+            $('.credit-card-pay-errors').text("Card " + errorString + " " + linkingVerb + " incorrect.")
+          }
+        }
+        payGroup.addClass('hidden');
+        payGroup.css('display', 'none');
+        $('.credit-card-pay-success').css('display', 'none');
+        $('.credit-card-pay-errors').css('display', 'block');
+      }
+
+      function showSuccess() {
+        payGroup.addClass('hidden');
+        payGroup.css('display', 'none');
+        <% if hosted %>
+        hostedFieldsContainer.style.display = 'none';
+        <% end %>
+        $('.credit-card-pay-success').css('display', 'block');
+        $('.credit-card-pay-errors').css('display', 'none');
+      }
+
+      payBtn.addEventListener('click', function(event) {
+        event.preventDefault()
+        payBtn.setAttribute('disabled', 'disabled');
+        payBtn.value = "<%= Spree.t(:processing_credit_card) %>";
+
+        <% if hosted %>
+          hf.tokenize().then(function (payload) {
+        <% elsif dropin %>
+          dropin.requestPaymentMethod(
+          function(err, payload) {
+            if (err) {
+              console.log('tokenization error:');
+              console.log(err);
+              dropin.clearSelectedPaymentMethod();
+              enablePayNow();
+
+              return;
+            }
+        <% end %>
+
+            $(formId).append("<input type='hidden' name='braintree_last_two' value=" + payload.details.lastTwo + ">");
+            $(formId).append("<input type='hidden' name='braintree_card_type' value=" + payload.details.cardType.replace(/\s/g, "") + ">");
+            $(formId).append("<input type='hidden' name='order[payments_attributes][][braintree_nonce]' value=" + payload.nonce + ">");
+            $(formId).append("<input type='hidden' name='payment_method_nonce' value=" + payload.nonce + ">");
+            setTimeout(function () {
+              $(payBtn).attr("disabled", false)
+              $('#checkout form').submit()
+            }, 200);
+            <% if hosted %>
+              }).catch(function (err) {
+                enablePayNow();
+                showErrors(err);
+            <% end %>
+              });
+          });
+
+          start();
+      });
+    }
+</script>

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

@@ -25,28 +25,41 @@
       <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>
+    <% if payment_method.try(:preferred_3dsecure) == "true" %>
+      <div class="col-xs-12" >
+        <div class="form-group">
+          <label for="email"><%= Spree.t(:email) %></label>
+          <%= email_field_tag :email, @order.email, class: 'form-control' %>
+          <span id="help-email" class="help-block"></span>
+        </div>
       </div>
-    </div>
+    <% end %>
 
     <% 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>
-
+          <% if payment_method&.preferred_number_selector&.present? %>
+            <p id="<%= payment_method.preferred_number_selector.sub("#", "") %>" class="form-control"></p>
+          <% else %>
+            <p id="hosted-fields-number" class="form-control"></p>
+          <% end %>
           <%= 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>
+          <% if payment_method&.preferred_cvv_selector&.present? %>
+            <p id="<%= payment_method.preferred_cvv_selector.sub("#", "") %>" class="form-control"></p>
+          <% else %>
+            <p id="hosted-fields-cvv" class="form-control"></p>
+          <% end %>
 
           <%= 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>
+          <% if payment_method&.preferred_expiration_date_selector&.present? %>
+            <p id="<%= payment_method.preferred_expiration_date_selector.sub("#", "") %>" class="form-control"></p>
+          <% else %>
+            <p id="hosted-fields-expiration-date" class="form-control"></p>
+          <% end %>
 
       <% elsif dropin %>
         <div class="input-group pay-group bt-drop-in-container">
@@ -79,6 +92,12 @@
   <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 }
-%>
+<% if payment_method.try(:preferred_3dsecure) == "true" %>
+  <%= render partial: 'spree/checkout/payment/braintree_vzero/three_d_secure',
+             locals: { payment_method: payment_method, hosted: hosted, dropin: dropin }
+  %>
+<% else %>
+  <%= render partial: 'spree/checkout/payment/braintree_vzero/non_three_d_secure',
+             locals: { payment_method: payment_method, hosted: hosted, dropin: dropin }
+  %>
+<% end %>

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

@@ -1,5 +1,12 @@
 <script type="text/javascript">
-  $('#order_payments_attributes__payment_method_id_<%= payment_method.id %>').click(function (e) {
+  if(document.readyState !== 'loading') {
+    setupThreeDSecure()
+  } else {
+    window.addEventListener('DOMContentLoaded', setupThreeDSecure);
+  }
+
+  function setupThreeDSecure() {
+    $('#order_payments_attributes__payment_method_id_<%= payment_method.id %>').click(function (e) {
     var threeDSecure;
     var checkoutFormId = "<%= payment_method.preferred_checkout_form_id %>"
     var formId = "#" + checkoutFormId;
@@ -9,12 +16,16 @@
     <% if hosted %>
     var hf, threeDS;
     var hostedFieldsContainer = document.getElementById('hosted-fields');
-    <% elsif dropin%>
+    <% elsif dropin %>
     var dropin;
     <% end %>
 
     var payBtn = document.getElementsByName('commit')[0];
     var payGroup = $('.pay-group');
+
+    $('.credit-card-pay-success').css('display', 'none');
+    $('.credit-card-pay-errors').css('display', 'none');
+
     var billingFields = [
       'email',
     ].reduce(function (fields, fieldName) {
@@ -80,13 +91,25 @@
           },
           fields: {
             number: {
-              selector: '#hosted-fields-number'
+              <% if payment_method.respond_to?(:preferred_number_selector) && payment_method.preferred_number_selector.present? %>
+                selector: "<%= payment_method.preferred_number_selector %>"
+              <% else %>
+                selector: '#hosted-fields-number'
+              <% end %>
             },
             cvv: {
-              selector: '#hosted-fields-cvv'
+              <% if payment_method.respond_to?(:preferred_cvv_selector) && payment_method.preferred_cvv_selector.present? %>
+                selector: "<%= payment_method.preferred_cvv_selector %>"
+              <% else %>
+                selector: '#hosted-fields-cvv'
+              <% end %>
             },
             expirationDate: {
-              selector: '#hosted-fields-expiration-date'
+              <% if payment_method.respond_to?(:preferred_expiration_date_selector) && payment_method.preferred_expiration_date_selector.present? %>
+                selector: "<%= payment_method.preferred_expiration_date_selector %>"
+              <% else %>
+                selector: '#hosted-fields-expiration-date'
+              <% end %>
             }
           }
         }),
@@ -130,11 +153,27 @@
         payBtn.removeAttribute('disabled');
       }
 
-      function showErrors() {
+      function showErrors(err) {
+        if (err) {
+          if (err.details && err.details.invalidFields) {
+            const invalidFields = []
+            Object.keys(err.details.invalidFields).forEach(function (key) {
+              if (key === "expirationDate") {
+                invalidFields.push("expiration")
+              } else {
+                invalidFields.push(key)
+              }
+            })
+            const errorString = invalidFields.join(", ")
+            const linkingVerb = invalidFields.length > 1 ? "are" : "is"
+
+            $('.credit-card-pay-errors').text("Card " + errorString + " " + linkingVerb + " incorrect.")
+          }
+        }
         payGroup.addClass('hidden');
         payGroup.css('display', 'none');
-        $('.credit-card-pay-success').addClass('hidden')
-        $('.credit-card-pay-errors').removeClass('hidden')
+        $('.credit-card-pay-success').css('display', 'none');
+        $('.credit-card-pay-errors').css('display', 'block');
       }
 
       function showSuccess() {
@@ -143,8 +182,8 @@
         <% if hosted %>
         hostedFieldsContainer.style.display = 'none';
         <% end %>
-        $('.credit-card-pay-errors').addClass('hidden')
-        $('.credit-card-pay-success').removeClass('hidden')
+        $('.credit-card-pay-success').css('display', 'block');
+        $('.credit-card-pay-errors').css('display', 'none');
       }
 
       payBtn.addEventListener('click', function(event) {
@@ -194,7 +233,7 @@
             showErrors();
             return;
           }
-
+          
           console.log('verification success:', payload);
           showSuccess();
           $(formId).append("<input type='hidden' name='braintree_last_two' value=" + payload.details.lastTwo + ">");
@@ -202,17 +241,18 @@
           $(formId).append("<input type='hidden' name='order[payments_attributes][][braintree_nonce]' value=" + payload.nonce + ">");
           $(formId).append("<input type='hidden' name='payment_method_nonce' value=" + payload.nonce + ">");
           setTimeout(function () {
-            $('.checkout-btn').attr("disabled", false)
-            $('form.edit_order').submit()
+            $(payBtn).attr("disabled", false)
+            $('#checkout form').submit()
           }, 200);
           <% if hosted %>
         }).catch(function (err) {
           enablePayNow();
-          showErrors();
+          showErrors(err);
           <% end %>
         });
       });
 
       start();
     });
+  }
 </script>

data/config/initializers/prepend_helpers.rb

@@ -1 +1,3 @@
-Spree::Admin::NavigationHelper.prepend(Spree::Admin::DecoratedNavigationHelper)
+Rails.application.config.after_initialize do
+  Spree::Admin::NavigationHelper.prepend(Spree::Admin::DecoratedNavigationHelper)
+end

data/db/migrate/20160112153422_add_admin_payment_to_spree_braintree_checkout.rb

@@ -1,5 +1,5 @@
 class AddAdminPaymentToSpreeBraintreeCheckout < SpreeExtension::Migration[4.2]
   def change
-    add_column :spree_braintree_checkouts, :admin_payment, :bool
+    add_column :spree_braintree_checkouts, :admin_payment, :boolean
   end
 end