spree_braintree_vzero 3.5.1

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

@@ -0,0 +1,218 @@
+<script type="text/javascript">
+  $('#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');
+    var billingFields = [
+      'email',
+    ].reduce(function (fields, fieldName) {
+      var field = fields[fieldName] = {
+        input: document.getElementById(fieldName),
+        help: document.getElementById('help-' + fieldName)
+      };
+
+      field.input.addEventListener('focus', function() {
+        clearFieldValidations(field);
+      });
+
+      return fields;
+    }, {});
+
+    function clearFieldValidations (field) {
+      field.help.innerText = '';
+      field.help.parentNode.classList.remove('has-error');
+    }
+
+    function validateBillingFields() {
+      var isValid = true;
+
+      Object.keys(billingFields).forEach(function (fieldName) {
+        var fieldEmpty = false;
+        var field = billingFields[fieldName];
+
+        if (field.optional) {
+          return;
+        }
+
+        fieldEmpty = field.input.value.trim() === '';
+
+        if (fieldEmpty) {
+          isValid = false;
+          field.help.innerText = "<%= Spree.t(:required) %>";
+          field.help.parentNode.classList.add('has-error');
+        } else {
+          clearFieldValidations(field);
+        }
+      });
+
+      return isValid;
+    }
+
+    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: {
+              selector: '#hosted-fields-number'
+            },
+            cvv: {
+              selector: '#hosted-fields-cvv'
+            },
+            expirationDate: {
+              selector: '#hosted-fields-expiration-date'
+            }
+          }
+        }),
+        braintree.threeDSecure.create({
+          authorization: clientToken,
+          version: 2
+        })
+      ]);
+    }
+
+    function setupDropin (clientToken) {
+      return braintree.dropin.create({
+        authorization: clientToken,
+        container: '#drop-in',
+        threeDSecure: true
+      })
+    }
+
+    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() {
+        payGroup.addClass('hidden');
+        payGroup.css('display', 'none');
+        $('.credit-card-pay-success').addClass('hidden')
+        $('.credit-card-pay-errors').removeClass('hidden')
+      }
+
+      function showSuccess() {
+        payGroup.addClass('hidden');
+        payGroup.css('display', 'none');
+        <% if hosted %>
+        hostedFieldsContainer.style.display = 'none';
+        <% end %>
+        $('.credit-card-pay-errors').addClass('hidden')
+        $('.credit-card-pay-success').removeClass('hidden')
+      }
+
+      payBtn.addEventListener('click', function(event) {
+        event.preventDefault()
+        payBtn.setAttribute('disabled', 'disabled');
+        payBtn.value = "<%= Spree.t(:processing_credit_card) %>";
+
+        var billingIsValid = validateBillingFields();
+
+        if (!billingIsValid) {
+          enablePayNow();
+
+          return;
+        }
+        <% if hosted %>
+        hf.tokenize().then(function (payload) {
+          return threeDS.verifyCard({
+            onLookupComplete: function (data, next) {
+              next();
+            },
+            nonce: payload.nonce,
+            bin: payload.details.bin,
+            <% elsif dropin %>
+            dropin.requestPaymentMethod({
+              threeDSecure: {
+                <% end %>
+                amount: "<%= @order.total %>",
+                email: billingFields.email.input.value,
+                <% if hosted %>
+              })
+          }).then(function (payload) {
+            <% elsif dropin %>
+          }
+        }, function(err, payload) {
+          if (err) {
+            console.log('tokenization error:');
+            console.log(err);
+            dropin.clearSelectedPaymentMethod();
+            enablePayNow();
+
+            return;
+          }
+          <% end %>
+
+          if (!payload.liabilityShifted) {
+            console.log('Liability did not shift', payload);
+            showErrors();
+            return;
+          }
+
+          console.log('verification success:', payload);
+          showSuccess();
+          $(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 () {
+            $('.checkout-btn').attr("disabled", false)
+            $('form.edit_order').submit()
+          }, 200);
+          <% if hosted %>
+        }).catch(function (err) {
+          enablePayNow();
+          showErrors();
+          <% end %>
+        });
+      });
+
+      start();
+    });
+</script>

data/app/views/spree/shared/braintree_vzero/_dropin.js.erb

@@ -0,0 +1,70 @@
+container: container,
+paypal: {
+  singleUse: <%= payment_method.preferred_store_payments_in_vault.eql?('do_not_store') %>,
+  amount: <%= @order.order_total_after_store_credit %>,
+  currency: "<%= current_currency %>",
+  enableShippingAddress: true,
+  shippingAddressOverride: {
+    recipientName: '<%= "#{shipping_address.firstname} #{shipping_address.lastname}" %>',
+    streetAddress: '<%= shipping_address.address1 %>',
+    extendedAddress: '<%= shipping_address.address2 %>',
+    locality: '<%= shipping_address.city %>',
+    countryCodeAlpha2: '<%= shipping_address.country.try(:iso) %>',
+    postalCode: '<%= shipping_address.zipcode %>',
+    region: '<%= shipping_address.state.try(:abbr) %>',
+    phone: '<%= shipping_address.phone %>',
+    editable: false
+  }
+},
+
+onPaymentMethodReceived: function (result) {
+  var formId = "#" + checkoutFormId;
+
+  function submitWithAttributes(data) {
+    switch (data.type) {
+      case "CreditCard":
+        $(formId).append("<input type='hidden' name='braintree_last_two' value=" + result.details.lastTwo + ">");
+        $(formId).append("<input type='hidden' name='braintree_card_type' value=" + result.details.cardType.replace(/\s/g, "") + ">");
+        break;
+      case "PayPalAccount":
+        $(formId).append("<input type='hidden' name='paypal_email' value=" + (result.details.email)+ ">");
+        break;
+    }
+    if(SpreeBraintreeVzero.admin)
+      $(formId).append("<input type='hidden' name='payment_method_nonce' value=" + data.nonce + ">");
+    else
+      $(formId).append("<input type='hidden' name='order[payments_attributes][][braintree_nonce]' value=" + data.nonce + ">");
+    $(formId)[0].submit();
+  }
+
+  if (SpreeBraintreeVzero.threeDSecure && result.type == "CreditCard") {
+    var client = new braintree.api.Client({
+      clientToken: clientToken
+    });
+
+    client.verify3DS({
+      amount: <%= @order.order_total_after_store_credit %>,
+      creditCard: result.nonce
+    }, function (error, response) {
+      if (!error) {
+        submitWithAttributes(response);
+      } else {
+        $(errorMessagesContainer).prepend("<div class='alert alert-error'><%= I18n.t(:gateway_error, scope: 'braintree.error') %></div>")
+      }
+    });
+  } else {
+      submitWithAttributes(result);
+  }
+},
+
+onReady: function (integration) {
+  if(!SpreeBraintreeVzero.admin)
+    SpreeBraintreeVzero.deviceData = integration.deviceData;
+  <%= render partial: 'spree/checkout/payment/braintree_vzero/dropin_on_ready_callback', formats: [:js] %>
+},
+
+onError: function (error) {
+  SpreeBraintreeVzero.enableSubmitButton();
+  <%= render partial: 'spree/checkout/payment/braintree_vzero/dropin_on_error_callback', formats: [:js] %>
+}
+

data/app/views/spree/shared/braintree_vzero/_hosted.js.erb

@@ -0,0 +1,66 @@
+id: checkoutFormId,
+hostedFields: {
+  styles: {
+    <%= render partial: 'spree/checkout/payment/braintree_vzero/hosted_fields_styles', formats: [:js] %>
+  },
+  number: {
+    selector: "<%= payment_method.preferred_number_selector %>",
+    placeholder: "<%= payment_method.preferred_number_placeholder %>"
+  },
+  cvv: {
+    selector: "<%= payment_method.preferred_cvv_selector %>",
+    placeholder: "<%= payment_method.preferred_cvv_placeholder %>"
+  },
+  expirationDate: {
+    selector: "<%= payment_method.preferred_expiration_date_selector %>",
+    placeholder: "<%= payment_method.preferred_expiration_date_placeholder %>"
+  },
+
+  onFieldEvent: function (event) {
+    <%= render partial: 'spree/checkout/payment/braintree_vzero/hosted_fields_on_field_event_callback', formats: [:js] %>
+  }
+},
+
+onError: function (error) {
+  SpreeBraintreeVzero.enableSubmitButton();
+},
+
+onReady: function (integration) {
+  if(!SpreeBraintreeVzero.admin)
+    SpreeBraintreeVzero.deviceData = integration.deviceData;
+},
+
+onPaymentMethodReceived: function (result) {
+  var formId = "#" + checkoutFormId;
+
+  function submitWithAttributes(data) {
+    $(formId).append("<input type='hidden' name='braintree_last_two' value=" + result.details.lastTwo + ">");
+    $(formId).append("<input type='hidden' name='braintree_card_type' value=" + result.details.cardType.replace(/\s/g, "") + ">");
+
+    if(SpreeBraintreeVzero.admin)
+      $(formId).append("<input type='hidden' name='payment_method_nonce' value=" + data.nonce + ">");
+    else
+      $(formId).append("<input type='hidden' name='order[payments_attributes][][braintree_nonce]' value=" + data.nonce + ">");
+    $(formId)[0].submit();
+  }
+
+  if (SpreeBraintreeVzero.threeDSecure && result.type == "CreditCard") {
+    var client = new braintree.api.Client({
+      clientToken: clientToken
+    });
+
+    client.verify3DS({
+      amount: <%= @order.order_total_after_store_credit %>,
+      creditCard: result.nonce
+    }, function (error, response) {
+      if (!error) {
+        submitWithAttributes(response);
+      } else {
+        $(errorMessagesContainer).prepend("<div class='alert alert-error'><%= I18n.t(:gateway_error, scope: 'braintree.error') %></div>")
+      }
+    });
+  } else {
+    submitWithAttributes(result);
+  }
+}
+

data/app/views/spree/shared/braintree_vzero/_paypal.js.erb

@@ -0,0 +1,39 @@
+container: "paypal-container",
+singleUse: <%= payment_method.preferred_store_payments_in_vault.eql?('do_not_store') %>,
+amount: <%= @order.order_total_after_store_credit %>,
+currency: "<%= current_currency %>",
+locale: "en_us",
+displayName: "<%= payment_method.preferred_paypal_display_name %>",
+enableShippingAddress: true,
+shippingAddressOverride: {
+  recipientName: '<%= "#{shipping_address.firstname} #{shipping_address.lastname}" %>',
+  streetAddress: '<%= shipping_address.address1 %>',
+  extendedAddress: '<%= shipping_address.address2 %>',
+  locality: '<%= shipping_address.city %>',
+  countryCodeAlpha2: '<%= shipping_address.country.try(:iso) %>',
+  postalCode: '<%= shipping_address.zipcode %>',
+  region: '<%= shipping_address.state.try(:abbr) %>',
+  phone: '<%= shipping_address.phone %>',
+  editable: false
+},
+
+onReady: function (integration) {
+  if(!SpreeBraintreeVzero.admin)
+    SpreeBraintreeVzero.deviceData = integration.deviceData;
+  checkout = integration;
+},
+headless: true,
+
+onPaymentMethodReceived: function (result) {
+  var formId = "#" + checkoutFormId;
+
+  if (result.nonce.length) {
+    $(formId).append("<input type='hidden' name='order[payments_attributes][][braintree_nonce]' value=" + result.nonce + ">");
+    $(formId).append("<input type='hidden' name='paypal_email' value=" + result.details.email + ">");
+    paymentMethodSelect = $("#order_payments_attributes__braintree_token")
+    if(paymentMethodSelect.length) paymentMethodSelect.val("");
+    $(formId)[0].submit();
+  } else {
+    $(errorMessagesContainer).prepend("<div class='alert alert-error'><%= I18n.t(:gateway_error, scope: 'braintree.error') %>></div>")
+  }
+}

data/bin/rails

@@ -0,0 +1,7 @@
+# This command will automatically be run when you run "rails" with Rails 3 gems installed from the root of your application.
+
+ENGINE_ROOT = File.expand_path('../..', __FILE__)
+ENGINE_PATH = File.expand_path('../../lib/spree_braintree_vzero/engine', __FILE__)
+
+require 'rails/all'
+require 'rails/engine/commands'

data/config/initializers/extend_spree_permitted_checkout_attributes.rb

@@ -0,0 +1,5 @@
+module Spree
+  module PermittedAttributes
+    @@payment_attributes = [:amount, :payment_method_id, :payment_method, :braintree_token, :braintree_nonce]
+  end
+end

data/config/initializers/prepend_helpers.rb

@@ -0,0 +1 @@
+Spree::Admin::NavigationHelper.prepend(Spree::Admin::DecoratedNavigationHelper)

data/config/locales/en.yml

@@ -0,0 +1,79 @@
+# Sample localization file for English. Add more files in this directory for other locales.
+# See https://github.com/svenfuchs/rails-i18n/tree/master/rails%2Flocale for starting points.
+
+en:
+  braintree:
+    admin:
+      no_paypal_payments: No vaulted paypal payments for this user
+      guest_checkout_warning: To use braintree vaulted payment methods do not modify this section. Use Customer Select from above.
+    channel_parameter: SpreeCommerceInc_Cart_Braintree
+    checkout:
+      saved_payment_method:
+        custom: Use a Saved Credit Card
+        dropin: Use a Saved Payment Method
+        paypal: Use a Saved Paypal Account
+      blank_saved_payment_method: Click to Choose
+    error:
+      three_d_secure: There was a problem with processing your credit card!
+      fraud: There was a problem with processing your credit card!
+      duplicate: Duplicated transaction, please try again!
+      cvv: Wrong CVV!
+      avs_and_cvv: Wrong AVS and CVV!
+      avs: Wrong AVS!
+      gateway_error: An error occured, please try again
+    phone_number_placeholder: XXXXXXXXX
+    preferences:
+      do_not_store: Do not store
+      production: production
+      sandbox: sandbox
+      store_only_on_success: Store only on success
+      store_all: Store all
+    state: Braintree State
+    title:
+      custom: Hosted Fields
+      dropin: Drop-in UI
+      paypal: Paypal Express
+
+  spree:
+    3dsecure: 3D Secure
+    add_new_credit_card: Add new credit card
+    add_new_payment_method: Add new payment method
+    admin:
+      risk_id: Braintree Risk ID
+      risk_decision: Braintree Risk Decision
+      vaulted_payments:
+        credit_card: "%{card_type} ending with %{last_4}"
+        paypal: "Paypal %{email}"
+        cant_create_note: Can't create payment. No payment methods stored for this user.
+    advanced_fraud_tools: Advanced Fraud Tools
+    advanced_settings: Advanced settings
+    back_end: Back End
+    checkout_form_id: Checkout Form
+    cc_type: Type
+    cvv_placeholder: CVV Placeholder
+    cvv_selector: CVV Selector
+    descriptor_name: Card or Bank Statement Name
+    descriptor_name_information_box_text: "This field will be displayed on the consumer’s bank or card statement.<br/><br/>If this field is not enabled by Braintree, please call Sales Rep or Braintree Support to set this up."
+    dropin_container: Drop-in UI Container
+    dropin_error_messages_container_id: DropinUI Error Messages Container
+    error_messages_container_id: Error Messages Container
+    expiration_date_placeholder: Expiration Date Placeholder
+    expiration_date_selector: Expiration Date Selector
+    how_paypal_works: How PayPal works?
+    kount_merchant_id: Kount Merchant
+    merchant_id: Merchant ID
+    number_placeholder: Number Placeholder
+    numner_selector: Number Selector
+    pass_billing_and_shipping_address: Pass Billing and Shipping Address
+    verify_card: Verify card
+    verify_credit_card_failed: Verify credit card failed
+    credit_card_veryfied_successfully: Credit Card verified successfully.
+    paypal_display_name: PayPal Display Name
+    paypal_display_on_cart: PayPal Display on Cart
+    private_key: Private Key
+    processing_credit_card: Processing Credit Card
+    public_key: Public Key
+    required: Required
+    store_payments_in_vault: Store Payments In Vault
+    settle: Settle
+    what_is_paypal: What is PayPal?