Enable Braintree credit card payments via hosted fields

.rubocop.yml

@@ -233,3 +233,6 @@ Metrics/ParameterLists:
 
 Metrics/PerceivedComplexity:
   Enabled: false
+
+Bundler/OrderedGems:
+  Enabled: false

.travis.yml

@@ -1,5 +1,6 @@
 sudo: false
 language: ruby
+dist: trusty
 cache:
   directories:
     - "travis_phantomjs"

Gemfile

@@ -13,9 +13,9 @@ end
 gem 'solidus_auth_devise', '~> 1.0'
 
 group :development, :test do
-  gem "chromedriver-helper"
   gem "pry-rails"
-  gem "selenium-webdriver"
+  gem 'selenium-webdriver', require: false
+  gem 'chromedriver-helper', require: false
 end
 
 gemspec

app/assets/javascripts/spree/backend/solidus_paypal_braintree.js

@@ -1,2 +1,42 @@
-// Placeholder manifest file.
-// the installer will append this file to the app vendored assets here: vendor/assets/javascripts/spree/backend/all.js'
+//= require spree/braintree_hosted_form.js
+
+$(function() {
+  var $paymentForm = $("#new_payment"),
+      $hostedFields = $("[data-braintree-hosted-fields]");
+
+  function onError (err) {
+    var msg = err.name + ": " + err.message;
+    show_flash("error", msg);
+    console.error(err);
+  }
+
+  // exit early if we're not looking at the New Payment form, or if no
+  // SolidusPaypalBraintree payment methods have been configured.
+  if (!$paymentForm.length || !$hostedFields.length) { return; }
+
+  $hostedFields.each(function() {
+    var $this = $(this),
+        $new = $("[name=card]", $this);
+
+    var id = $this.data("id");
+
+    var hostedFieldsInstance;
+
+    $new.on("change", function() {
+      var isNew = $(this).val() === "new";
+
+      function setHostedFieldsInstance(instance) {
+        hostedFieldsInstance = instance;
+        return instance;
+      }
+
+      if (isNew && hostedFieldsInstance == null) {
+        braintreeForm = new BraintreeHostedForm($paymentForm, $this, id);
+        braintreeForm.initializeHostedFields().
+          then(setHostedFieldsInstance).
+          then(braintreeForm.addFormHook(onError)).
+          fail(onError)
+      }
+    });
+  });
+});

app/assets/javascripts/spree/braintree_hosted_form.js

@@ -0,0 +1,101 @@
+//= require vendor/braintree/client.js
+//= require vendor/braintree/hosted_fields.js
+
+function BraintreeHostedForm($paymentForm, $hostedFields, paymentMethodId) {
+  this.paymentForm = $paymentForm;
+  this.hostedFields = $hostedFields;
+  this.paymentMethodId = paymentMethodId;
+}
+
+BraintreeHostedForm.prototype.initializeHostedFields = function() {
+  return this.getToken().
+    then(this.createClient.bind(this)).
+    then(this.createHostedFields())
+}
+
+BraintreeHostedForm.prototype.promisify = function (fn, args, self) {
+  var d = $.Deferred();
+
+  fn.apply(self || this, (args || []).concat(function (err, data) {
+    err && d.reject(err);
+    d.resolve(data);
+  }));
+
+  return d.promise();
+}
+
+BraintreeHostedForm.prototype.getToken = function () {
+  var opts = {
+    url: "/solidus_paypal_braintree/client_token",
+    method: "POST",
+    data: {
+      payment_method_id: this.paymentMethodId
+    },
+  };
+
+  function onSuccess(data) {
+    return data.client_token;
+  }
+
+  return Spree.ajax(opts).then(onSuccess);
+}
+
+BraintreeHostedForm.prototype.createClient = function (token) {
+  var opts = { authorization: token };
+  return this.promisify(braintree.client.create, [opts]);
+}
+
+BraintreeHostedForm.prototype.createHostedFields = function () {
+  var self = this;
+  var id = this.paymentMethodId;
+
+  return function(client) {
+    var opts = {
+      client: client,
+
+      fields: {
+        number: {
+          selector: "#card_number" + id
+        },
+
+        cvv: {
+          selector: "#card_code" + id
+        },
+
+        expirationDate: {
+          selector: "#card_expiry" + id
+        }
+      }
+    };
+
+    return self.promisify(braintree.hostedFields.create, [opts]);
+  }
+}
+
+BraintreeHostedForm.prototype.addFormHook = function (errorCallback) {
+  var self = this;
+  var shouldSubmit = false;
+
+  function submit(payload) {
+    shouldSubmit = true;
+
+    $("#payment_method_nonce", self.hostedFields).val(payload.nonce);
+    self.paymentForm.submit();
+  }
+
+  return function(hostedFields) {
+    self.paymentForm.on("submit", function(e) {
+      if (self.hostedFields.is(":visible") && !shouldSubmit) {
+        e.preventDefault()
+
+        hostedFields.tokenize(function(err, payload) {
+          if (err) {
+            errorCallback(err);
+          } else {
+            submit(payload);
+          }
+        })
+      }
+    });
+  }
+}

app/assets/javascripts/spree/checkout/braintree.js

@@ -0,0 +1,35 @@
+$(function() {
+  /* This provides a default error handler for Braintree. Since we prevent
+   * submission if tokenization fails, we need to manually re-enable the
+   * submit button. */
+  function braintreeError (err) {
+    alert(err.name + ": " + err.message);
+
+    $submitButton = $("input[type='submit']", $paymentForm);
+    /* If we're using jquery-ujs on the frontend, it will automatically disable
+     * the submit button, but do so in a setTimeout here:
+     * https://github.com/rails/jquery-rails/blob/master/vendor/assets/javascripts/jquery_ujs.js#L517
+     * The only way we can re-enable it is by delaying longer than that timeout
+     * or stopping propagation so their submit handler doesn't run. */
+    if ($.rails) {
+      setTimeout(function () {
+        $.rails.enableFormElement($submitButton);
+      }, 100);
+    }
+    /* This reverses Spree.disableSaveOnClick() */
+    $submitButton.attr("disabled", false).addClass("primary").removeClass("disabled");
+  }
+
+  var $paymentForm = $("#checkout_form_payment"),
+  $hostedFields = $("[data-braintree-hosted-fields]");
+
+  $hostedFields.each(function() {
+    var $this = $(this);
+    var id = $this.data("id");
+
+    var braintreeForm = new BraintreeHostedForm($paymentForm, $this, id);
+    braintreeForm.initializeHostedFields().
+      then(braintreeForm.addFormHook(braintreeError)).
+      fail(braintreeError);
+  });
+});

app/assets/javascripts/spree/frontend/paypal_button.js

@@ -1,3 +1,5 @@
+//= require braintree/3.5.0/paypal
+
 /**
  * Constructor for PayPal button object
  * @constructor

app/assets/javascripts/spree/frontend/solidus_paypal_braintree.js

@@ -1,5 +1,6 @@
-// Placeholder manifest file.
-// the installer will append this file to the app vendored assets here: vendor/assets/javascripts/spree/frontend/all.js'
+//= require braintree/3.5.0/client
+//= require braintree/3.5.0/data-collector
+//= require spree/braintree_hosted_form.js
 
 window.SolidusPaypalBraintree = {
   APPLE_PAY_API_VERSION: 1,