solidus_braintree 1.2.0 → 3.0.0

data/app/assets/javascripts/spree/backend/solidus_braintree/client.js

@@ -0,0 +1,239 @@
+/**
+ * Braintree client interface
+ * @external "braintree.Client"
+ * @see {@link https://braintree.github.io/braintree-web/current/Client.html|Braintree Client Docs}
+**/
+
+/**
+ * Braintree paypal interface
+ * @external "braintree.PayPal"
+ * @see {@link https://braintree.github.io/braintree-web/current/PayPal.html|Braintree Paypal Docs}
+**/
+
+/**
+ * Braintree paypal interface
+ * @external "braintree.ApplePay"
+ * @see {@link https://braintree.github.io/braintree-web/current/ApplePay.html|Braintree Apple Pay Docs}
+**/
+
+/**
+ * Braintree dataCollector interface
+ * @external "braintree.DataCollector"
+ * @see {@link https://braintree.github.io/braintree-web/current/DataCollector.html|Braintree DataCollector Docs}
+**/
+
+/**
+ * jQuery.Deferred interface
+ *
+ * We use this for our promises because ES6 promises are non standard, and because jquery 1/2
+ * promises do not play nicely with them.
+ * @external "jQuery.Deferred"
+ * @see {@link https://api.jquery.com/category/deferred-object/|jQuery Deferred Documentation}
+**/
+
+/**
+ * Represents a wrapper around the braintree js library.
+ *
+ * This class is responsible for fetching tokens from a solidus store and using them
+ * to manage a braintree client. It takes a number of options as capabilities for the client
+ * depending on if you want to use use the data collector or paypal.
+ *
+ * We use this class mostly to hide the token operations for users.
+ *
+ * After creating the class, a call should be made to initialize before using it.
+ * @see initialize
+ *
+ * @constructor
+ * @param {Object} config Initalization options for the client
+ * @param {Boolean} config.useDataCollector Use data collector capabilities for the braintree client
+ * @param {Boolean} config.usePaypal Use Paypal capabilities for the braintree client
+ * @param {requestCallback} config.readyCallback A callback to be invoked when the client is ready to go.
+ * @param {Number} config.paymentMethodId A number indicating a specific payment method to be preferrred.
+ *
+**/
+SolidusBraintree.Client = function(config) {
+  this.paymentMethodId = config.paymentMethodId;
+  this.readyCallback = config.readyCallback;
+  this.useDataCollector = config.useDataCollector;
+  this.usePaypal = config.usePaypal;
+  this.useApplepay = config.useApplepay;
+  this.useVenmo = config.useVenmo;
+  this.flow = config.flow;
+  this.venmoNewTabSupported = config.newBrowserTabSupported
+  this.useThreeDSecure = config.useThreeDSecure;
+
+  this._braintreeInstance = null;
+  this._dataCollectorInstance = null;
+  this._paypalInstance = null;
+  this._venmoInstance = null;
+  this._threeDSecureInstance = null;
+};
+
+/**
+ * Fetches a client token from the backend and initializes the braintree client.
+ * @returns {external:"jQuery.Deferred"} Promise to be invoked after initialization is complete
+**/
+SolidusBraintree.Client.prototype.initialize = function() {
+  var initializationPromise = this._fetchToken().
+    then(this._createBraintreeInstance.bind(this));
+
+  if (this.useDataCollector) {
+    initializationPromise = initializationPromise.then(this._createDataCollector.bind(this));
+  }
+
+  if (this.usePaypal) {
+    initializationPromise = initializationPromise.then(this._createPaypal.bind(this));
+  }
+
+  if (this.useApplepay) {
+    initializationPromise = initializationPromise.then(this._createApplepay.bind(this));
+  }
+
+  if (this.useVenmo) {
+    initializationPromise = initializationPromise.then(this._createVenmo.bind(this));
+  }
+
+  if (this.useThreeDSecure) {
+    initializationPromise = initializationPromise.then(this._createThreeDSecure.bind(this));
+  }
+
+  return initializationPromise.then(this._invokeReadyCallback.bind(this));
+};
+
+/**
+ * Returns the braintree client instance
+ * @returns {external:"braintree.Client"} The braintree client that was initialized by this class
+**/
+SolidusBraintree.Client.prototype.getBraintreeInstance = function() {
+  return this._braintreeInstance;
+};
+
+/**
+ * Returns the braintree paypal instance
+ * @returns {external:"braintree.PayPal"} The braintree paypal that was initialized by this class
+**/
+SolidusBraintree.Client.prototype.getPaypalInstance = function() {
+  return this._paypalInstance;
+};
+
+/**
+ * Returns the braintree Apple Pay instance
+ * @returns {external:"braintree.ApplePay"} The Braintree Apple Pay that was initialized by this class
+**/
+SolidusBraintree.Client.prototype.getApplepayInstance = function() {
+  return this._applepayInstance;
+};
+
+/**
+ * Returns the braintree Venmo instance
+ * @returns {external:"braintree.Venmo"} The Braintree Venmo that was initialized by this class
+**/
+SolidusBraintree.Client.prototype.getVenmoInstance = function() {
+  return this._venmoInstance;
+};
+
+/**
+ * Returns the braintree dataCollector instance
+ * @returns {external:"braintree.DataCollector"} The braintree dataCollector that was initialized by this class
+**/
+SolidusBraintree.Client.prototype.getDataCollectorInstance = function() {
+  return this._dataCollectorInstance;
+};
+
+
+SolidusBraintree.Client.prototype._fetchToken = function() {
+  var payload = {
+    dataType: 'json',
+    type: 'POST',
+    url: SolidusBraintree.config.paths.clientTokens,
+    error: function(xhr) {
+      console.error("Error fetching braintree token");
+    }
+  };
+
+  if (this.paymentMethodId) {
+    payload.data = {
+      payment_method_id: this.paymentMethodId
+    };
+  }
+
+  return Spree.ajax(payload);
+};
+
+SolidusBraintree.Client.prototype._createBraintreeInstance = function(tokenResponse) {
+  this.paymentMethodId = tokenResponse.payment_method_id;
+
+  return SolidusBraintree.PromiseShim.convertBraintreePromise(braintree.client.create, [{
+    authorization: tokenResponse.client_token
+  }]).then(function (clientInstance) {
+    this._braintreeInstance = clientInstance;
+    return clientInstance;
+  }.bind(this));
+};
+
+SolidusBraintree.Client.prototype._invokeReadyCallback = function() {
+  if(this.readyCallback) {
+    this.readyCallback(this._braintreeInstance);
+  }
+
+  return this;
+};
+
+SolidusBraintree.Client.prototype._createDataCollector = function() {
+  return SolidusBraintree.PromiseShim.convertBraintreePromise(braintree.dataCollector.create, [{
+    client: this._braintreeInstance,
+    paypal: !!this.usePaypal
+  }]).then(function (dataCollectorInstance) {
+    this._dataCollectorInstance = dataCollectorInstance;
+    return dataCollectorInstance;
+  }.bind(this));
+};
+
+SolidusBraintree.Client.prototype._createPaypal = function() {
+  return SolidusBraintree.PromiseShim.convertBraintreePromise(braintree.paypalCheckout.create, [{
+    client: this._braintreeInstance
+  }]).then(function (paypalInstance) {
+    this._paypalInstance = paypalInstance;
+    return paypalInstance;
+  }.bind(this), function(error) {
+    console.error(error.name + ':', error.message);
+  });
+};
+
+SolidusBraintree.Client.prototype._createApplepay = function() {
+  return SolidusBraintree.PromiseShim.convertBraintreePromise(braintree.applePay.create, [{
+    client: this._braintreeInstance
+  }]).then(function (applePayInstance) {
+    this._applepayInstance = applePayInstance;
+    return applePayInstance;
+  }.bind(this));
+};
+
+SolidusBraintree.Client.prototype._createVenmo = function() {
+  return SolidusBraintree.PromiseShim.convertBraintreePromise(braintree.venmo.create, [{
+    client: this._braintreeInstance,
+    allowDesktop: true,
+    paymentMethodUsage: this.flow === 'vault' ? 'multi_use' : 'single_use',
+    allowNewBrowserTab: this.venmoNewTabSupported
+  }]).then(function (venmoInstance) {
+    // Verify browser support before proceeding.
+    if (!venmoInstance.isBrowserSupported()) {
+      console.log('Browser does not support Venmo');
+      return;
+    }
+
+    this._venmoInstance = venmoInstance;
+    return venmoInstance;
+  }.bind(this));
+};
+
+SolidusBraintree.Client.prototype._createThreeDSecure = function() {
+  return SolidusBraintree.PromiseShim.convertBraintreePromise(braintree.threeDSecure.create, [{
+    client: this._braintreeInstance,
+    version: 2
+  }]).then(function (threeDSecureInstance) {
+    this._threeDSecureInstance = threeDSecureInstance;
+  }.bind(this), function(error) {
+    console.log(error);
+  });
+};

data/app/assets/javascripts/spree/backend/solidus_braintree/constants.js

@@ -0,0 +1,89 @@
+SolidusBraintree = {
+  APPLE_PAY_API_VERSION: 1,
+
+  config: {
+    paths: {
+      clientTokens: Spree.pathFor('solidus_braintree/client_token'),
+      transactions: Spree.pathFor('solidus_braintree/transactions')
+    },
+
+    // Override to provide your own error messages.
+    braintreeErrorHandle: function(braintreeError) {
+      BraintreeError.getErrorFromSlug(braintreeError.code);
+      SolidusBraintree.showError(error);
+    },
+
+    classes: {
+      hostedForm: function() {
+        return SolidusBraintree.HostedForm;
+      },
+
+      client: function() {
+        return SolidusBraintree.Client;
+      },
+
+      paypalButton: function() {
+        return SolidusBraintree.PaypalButton;
+      },
+
+      paypalMessaging: function() {
+        return SolidusBraintree.PaypalMessaging;
+      },
+
+      applepayButton: function() {
+        return SolidusBraintree.ApplepayButton;
+      },
+
+      venmoButton: function() {
+        return SolidusBraintree.VenmoButton;
+      }
+    }
+  },
+
+  showError: function(error) {
+    var $contentContainer = $("#content");
+    var $flash = $("<div class='flash error'>" + error + "</div>");
+    $contentContainer.prepend($flash);
+    $flash.show().delay(5000).fadeOut(500);
+  },
+
+  createHostedForm: function() {
+    return SolidusBraintree._factory(SolidusBraintree.config.classes.hostedForm(), arguments);
+  },
+
+  createClient: function() {
+    return SolidusBraintree._factory(SolidusBraintree.config.classes.client(), arguments);
+  },
+
+  createPaypalButton: function() {
+    return SolidusBraintree._factory(SolidusBraintree.config.classes.paypalButton(), arguments);
+  },
+
+  createPaypalMessaging: function() {
+    return SolidusBraintree._factory(SolidusBraintree.config.classes.paypalMessaging(), arguments);
+  },
+
+  createApplePayButton: function() {
+    return SolidusBraintree._factory(SolidusBraintree.config.classes.applepayButton(), arguments);
+  },
+
+  createVenmoButton: function() {
+    return SolidusBraintree._factory(SolidusBraintree.config.classes.venmoButton(), arguments);
+  },
+
+  _factory: function(klass, args) {
+    var normalizedArgs = Array.prototype.slice.call(args);
+    return new (Function.prototype.bind.apply(klass, [null].concat(normalizedArgs)));
+  }
+};
+
+BraintreeError = {
+  DEFAULT: "Something bad happened!",
+
+  getErrorFromSlug: function(slug) {
+    error = BraintreeError.DEFAULT
+    if (slug in BraintreeError)
+      error = BraintreeError[slug]
+    return error
+  }
+}

data/app/assets/javascripts/spree/backend/solidus_braintree/hosted_form.js

@@ -0,0 +1,46 @@
+SolidusBraintree.HostedForm = function(paymentMethodId) {
+  this.paymentMethodId = paymentMethodId;
+  this.client = null;
+};
+
+SolidusBraintree.HostedForm.prototype.initialize = function() {
+  this.client = SolidusBraintree.createClient({
+    paymentMethodId: this.paymentMethodId,
+    useThreeDSecure: (typeof(window.threeDSecureOptions) !== 'undefined'),
+  });
+
+  return this.client.initialize().
+    then(this._createHostedFields.bind(this));
+};
+
+SolidusBraintree.HostedForm.prototype._createHostedFields = function () {
+  if (!this.client) {
+    throw new Error("Client not initialized, please call initialize first!");
+  }
+
+  var opts = {
+    _solidusClient: this.client,
+    client: this.client.getBraintreeInstance(),
+
+    fields: {
+      number: {
+        selector: "#card_number" + this.paymentMethodId,
+        placeholder: placeholder_text["number"]
+      },
+
+      cvv: {
+        selector: "#card_code" + this.paymentMethodId,
+        placeholder: placeholder_text["cvv"]
+      },
+
+      expirationDate: {
+        selector: "#card_expiry" + this.paymentMethodId,
+        placeholder: placeholder_text["expirationDate"]
+      }
+    },
+
+    styles: credit_card_fields_style
+  };
+
+  return SolidusBraintree.PromiseShim.convertBraintreePromise(braintree.hostedFields.create, [opts]);
+};

data/app/assets/javascripts/spree/backend/solidus_braintree/promise.js

@@ -0,0 +1,20 @@
+SolidusBraintree.PromiseShim = {
+  convertBraintreePromise: function(fn, args, context) {
+    var jqPromise  = $.Deferred();
+
+    args = args || [];
+    context = context || this;
+
+    args = args.concat(function(error, data) {
+      if (error) {
+        jqPromise.reject(error);
+      } else {
+        jqPromise.resolve(data);
+      }
+    });
+
+    fn.apply(context, args);
+
+    return jqPromise.promise();
+  }
+}

data/app/assets/javascripts/spree/backend/solidus_braintree.js

@@ -0,0 +1,96 @@
+//= require spree/backend/solidus_braintree/constants
+//= require spree/backend/solidus_braintree/client
+//= require spree/backend/solidus_braintree/promise
+//= require spree/backend/solidus_braintree/hosted_form
+
+$(function() {
+  var $paymentForm = $("#new_payment"),
+      $hostedFields = $("[data-braintree-hosted-fields]"),
+      hostedFieldsInstance = null;
+
+  function onError (err) {
+    var msg = err.name + ": " + err.message;
+    show_flash("error", msg);
+  }
+
+  function showForm(id) {
+    $("#card_form" + id).show();
+  }
+
+  function hideForm(id) {
+    $("#card_form" + id).hide();
+  }
+
+  function addFormHook(braintreeForm, errorCallback) {
+    var shouldSubmit = false;
+
+    function submit(payload) {
+      shouldSubmit = true;
+
+      $("#payment_method_nonce", braintreeForm.hostedFields).val(payload.nonce);
+      $paymentForm.submit();
+    }
+
+    return function(hostedFields) {
+      $paymentForm.on("submit", function(e) {
+        if ($hostedFields.is(":visible") && !shouldSubmit) {
+          e.preventDefault();
+
+          hostedFields.tokenize(function(err, payload) {
+            if (err) {
+              errorCallback(err);
+            } else {
+              submit(payload);
+            }
+          });
+        }
+      });
+    };
+  }
+
+  function initFields($container, id) {
+    function setHostedFieldsInstance(instance) {
+      hostedFieldsInstance = instance;
+      return instance;
+    }
+
+    if (hostedFieldsInstance === null) {
+      braintreeForm = new SolidusBraintree.createHostedForm(id);
+      braintreeForm.initialize().
+        then(setHostedFieldsInstance).
+        then(addFormHook(braintreeForm, onError)).
+        fail(onError);
+    }
+  }
+
+  // exit early if we're not looking at the New Payment form, or if no
+  // SolidusBraintree payment methods have been configured.
+  if (!$paymentForm.length || !$hostedFields.length) { return; }
+
+  $.when(
+    $.getScript("https://js.braintreegateway.com/web/3.84.0/js/client.min.js"),
+    $.getScript("https://js.braintreegateway.com/web/3.84.0/js/hosted-fields.min.js")
+  ).done(function() {
+    $hostedFields.each(function() {
+      var $this = $(this),
+          $radios = $("[name=card]", $this),
+          id = $this.data("payment-method-id");
+
+      // If we have previous cards, init fields on change of radio button
+      if ($radios.length) {
+        $radios.on("change", function() {
+          if ($(this).val() == 'new') {
+            showForm(id);
+            initFields($this, id);
+          } else {
+            hideForm(id);
+          }
+        });
+      } else {
+        // If we don't have previous cards, init fields immediately
+        initFields($this, id);
+        showForm(id);
+      }
+    });
+  });
+});

data/app/assets/stylesheets/spree/backend/solidus_braintree.scss

@@ -0,0 +1,28 @@
+/*
+Placeholder manifest file.
+the installer will append this file to the app vendored assets here: 'vendor/assets/stylesheets/spree/backend/all.css'
+*/
+
+// Set Bootstrap variables if they're not already defined
+// e.g if we're on Solidus < v1.4
+$input-border-color: #cee1f4 !default;
+$border-radius: 3px !default;
+$input-color: #5498DA !default;
+$brand-danger: #C60F13 !default;
+$brand-success: #9FC820 !default;
+
+.braintree-hosted-fields .input {
+  border: 1px solid $input-border-color;
+  border-radius: $border-radius;
+  color: $input-color;
+  height: 30px;
+  padding: 7px 10px;
+
+  &.braintree-hosted-fields-invalid {
+    border-color: $brand-danger;
+  }
+
+  &.braintree-hosted-fields-valid {
+    border-color: $brand-success;
+  }
+}

data/app/decorators/controllers/solidus_braintree/admin_payments_controller_decorator.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module SolidusBraintree
+  module AdminPaymentsControllerDecorator
+    def self.prepended(base)
+      base.helper ::SolidusBraintree::BraintreeAdminHelper
+    end
+
+    ::Spree::Admin::PaymentsController.prepend(self)
+  end
+end

data/app/decorators/controllers/solidus_braintree/client_tokens_controller.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module SolidusBraintree
+  class ClientTokensController < ::Spree::Api::BaseController
+    skip_before_action :authenticate_user
+
+    before_action :load_gateway
+
+    def create
+      token = @gateway.generate_token
+      if token
+        render json: { client_token: token, payment_method_id: @gateway.id }
+      else
+        render json: { error: Gateway::TOKEN_GENERATION_DISABLED_MESSAGE }, status: :unprocessable_entity
+      end
+    end
+
+    private
+
+    def load_gateway
+      if params[:payment_method_id]
+        @gateway = ::SolidusBraintree::Gateway.find(params[:payment_method_id])
+      else
+        store_payment_methods_scope =
+          if current_store.payment_methods.empty?
+            ::SolidusBraintree::Gateway.all
+          else
+            ::SolidusBraintree::Gateway.where(id: current_store.payment_method_ids)
+          end
+        @gateway = ::SolidusBraintree::Gateway.where(active: true).merge(store_payment_methods_scope).first!
+      end
+    end
+
+    def generate_token
+      @gateway.generate_token
+    rescue ::SolidusBraintree::Gateway::TokenGenerationDisabledError => e
+      Rails.logger.error e
+      nil
+    end
+  end
+end

data/app/decorators/models/solidus_braintree/spree/store_decorator.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module SolidusBraintree
+  module Spree
+    module StoreDecorator
+      def self.prepended(base)
+        base.has_one :braintree_configuration, class_name: "SolidusBraintree::Configuration", dependent: :destroy
+        base.before_create :build_default_configuration
+      end
+
+      private
+
+      def build_default_configuration
+        build_braintree_configuration unless braintree_configuration
+      end
+
+      ::Spree::Store.prepend self
+    end
+  end
+end

data/app/decorators/models/solidus_braintree/spree/user_decorator.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module SolidusBraintree
+  module Spree
+    module UserDecorator
+      def self.prepended(base)
+        base.has_one :braintree_customer, class_name: 'SolidusBraintree::Customer', inverse_of: :user
+      end
+
+      ::Spree.user_class.prepend self
+    end
+  end
+end

data/app/helpers/solidus_braintree/braintree_admin_helper.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module SolidusBraintree
+  module BraintreeAdminHelper
+    # Returns a link to the Braintree web UI for the given Braintree payment
+    def braintree_transaction_link(payment)
+      environment = payment.payment_method.preferred_environment == 'sandbox' ? 'sandbox' : 'www'
+      merchant_id = payment.payment_method.preferred_merchant_id
+      response_code = payment.response_code
+
+      return if response_code.blank?
+      return response_code if merchant_id.blank?
+
+      link_to(
+        response_code,
+        "https://#{environment}.braintreegateway.com/merchants/#{merchant_id}/transactions/#{response_code}",
+        title: 'Show payment on Braintree',
+        target: '_blank',
+        rel: 'noopener'
+      )
+    end
+  end
+end

data/app/models/application_record.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+class ApplicationRecord < ActiveRecord::Base
+  self.abstract_class = true
+end