solidus_braintree 1.2.0 → 2.0.0

data/app/assets/javascripts/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/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/solidus_braintree/frontend.js

@@ -0,0 +1,14 @@
+// This is a manifest file that'll be compiled into including all the files listed below.
+// Add new JavaScript/Coffee code in separate files in this directory and they'll automatically
+// be included in the compiled file accessible from http://example.com/assets/application.js
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// the compiled file.
+//
+//= require solidus_braintree/constants
+//= require solidus_braintree/promise
+//= require solidus_braintree/client
+//= require solidus_braintree/hosted_form
+//= require solidus_braintree/paypal_button
+//= require solidus_braintree/paypal_messaging
+//= require solidus_braintree/apple_pay_button
+//= require solidus_braintree/venmo_button

data/app/assets/javascripts/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/solidus_braintree/paypal_button.js

@@ -0,0 +1,178 @@
+//= require solidus_braintree/constants
+/**
+ * Constructor for PayPal button object
+ * @constructor
+ * @param {object} element - The DOM element of your PayPal button
+ */
+SolidusBraintree.PaypalButton = function(element, paypalOptions, options) {
+  this._element = element;
+  this._paypalOptions = paypalOptions || {};
+
+  this.locale = paypalOptions['locale'] || "en_US";
+  this.style = paypalOptions['style'] || {};
+  delete paypalOptions['locale'];
+  delete paypalOptions['style'];
+
+  this._options = options || {};
+  this._client = null;
+  this._environment = this._paypalOptions.environment || 'sandbox';
+  delete this._paypalOptions.environment;
+
+  this._buyerCountry = this._paypalOptions.buyerCountry;
+  delete paypalOptions['buyerCountry'];
+
+  this._enabledFunding = [];
+
+  if (paypalOptions['venmoFunding']) this._enabledFunding.push('venmo');
+  delete paypalOptions['venmoFunding'];
+
+  if(!this._element) {
+    throw new Error("Element for the paypal button must be present on the page");
+  }
+};
+
+/**
+ * Creates the PayPal session using the provided options and enables the button
+ *
+ * @param {object} options - The options passed to tokenize when constructing
+ *                           the PayPal instance
+ *
+ * See {@link https://braintree.github.io/braintree-web/3.9.0/PayPal.html#tokenize}
+ */
+SolidusBraintree.PaypalButton.prototype.initialize = function() {
+  this._client = new SolidusBraintree.createClient({
+      useDataCollector: this._paypalOptions.useDataCollector,
+      usePaypal: true
+  });
+
+  return this._client.initialize().then(this.initializeCallback.bind(this));
+};
+
+SolidusBraintree.PaypalButton.prototype.initializeCallback = function() {
+  this._paymentMethodId = this._client.paymentMethodId;
+
+  var args = {
+    "client-id": this._environment === "sandbox" ? "sb" : null,
+    currency: this._paypalOptions.currency,
+    commit: true,
+    vault: this._paypalOptions.flow == "vault",
+    components: this.style['messaging'] == "true" && this._paypalOptions.flow != "vault" ? "buttons,messages" : "buttons",
+    intent: this._paypalOptions.flow == "vault" ? "tokenize" : "authorize"
+  };
+
+  if (this._environment === "sandbox" && this._buyerCountry) {
+    args["buyer-country"] = this._buyerCountry
+  }
+  if (this._enabledFunding.length !== 0) {
+    args["enable-funding"] = this._enabledFunding.join(',');
+  }
+
+  this._client.getPaypalInstance().loadPayPalSDK(args).then(() => {
+    var create_method = this._paypalOptions.flow == "vault" ? "createBillingAgreement" : "createOrder"
+
+    var render_config = {
+      style: this.style,
+      onClick: (data) => { SolidusBraintree.fundingSource = data.fundingSource },
+      [create_method]: function () {
+        return this._client.getPaypalInstance().createPayment(this._paypalOptions);
+      }.bind(this),
+      onApprove: function (data, actions) {
+        return this._client.getPaypalInstance().tokenizePayment(data, this._tokenizeCallback.bind(this));
+      }.bind(this)
+    };
+
+    paypal.Buttons(render_config).render(this._element);
+  })
+};
+
+/**
+ * Default callback function for when tokenization completes
+ *
+ * @param {object|null} tokenizeErr - The error returned by Braintree on failure
+ * @param {object} payload - The payload returned by Braintree on success
+ */
+SolidusBraintree.PaypalButton.prototype._tokenizeCallback = function(tokenizeErr, payload) {
+  if (tokenizeErr) {
+    SolidusBraintree.config.braintreeErrorHandle(tokenizeErr);
+    return;
+  }
+
+  var params = this._transactionParams(payload);
+
+  return Spree.ajax({
+    url: SolidusBraintree.config.paths.transactions,
+    type: 'POST',
+    dataType: 'json',
+    data: params,
+    success: function(response) {
+      window.location.href = response.redirectUrl;
+    },
+    error: function(xhr) {
+      var errorText = BraintreeError.DEFAULT;
+
+      if (xhr.responseJSON && xhr.responseJSON.errors) {
+        var errors = [];
+        $.each(xhr.responseJSON.errors, function(key, values) {
+          $.each(values, function(index, value) {
+            errors.push(key + " " + value)
+          });
+        });
+
+        if (errors.length > 0)
+          errorText = errors.join(", ");
+      }
+
+      console.error("Error submitting transaction: " + errorText);
+      SolidusBraintree.showError(errorText);
+    },
+  });
+};
+
+/**
+ * Builds the transaction parameters to submit to Solidus for the given
+ * payload returned by Braintree
+ *
+ * @param {object} payload - The payload returned by Braintree after tokenization
+ */
+SolidusBraintree.PaypalButton.prototype._transactionParams = function(payload) {
+  return {
+    "payment_method_id" : this._paymentMethodId,
+    "options": this._options,
+    "transaction" : {
+      "email" : payload.details.email,
+      "phone" : payload.details.phone,
+      "nonce" : payload.nonce,
+      "payment_type" : payload.type,
+      "paypal_funding_source": SolidusBraintree.fundingSource,
+      "address_attributes" : this._addressParams(payload)
+    }
+  };
+};
+
+/**
+ * Builds the address parameters to submit to Solidus using the payload
+ * returned by Braintree
+ *
+ * @param {object} payload - The payload returned by Braintree after tokenization
+ */
+SolidusBraintree.PaypalButton.prototype._addressParams = function(payload) {
+  var name;
+  var payload_address = payload.details.shippingAddress || payload.details.billingAddress;
+  if (!payload_address) return {};
+
+  if (payload_address.recipientName) {
+    name = payload_address.recipientName
+  } else {
+    name = payload.details.firstName + " " + payload.details.lastName;
+  }
+
+  return {
+    "name" : name,
+    "address_line_1" : payload_address.line1,
+    "address_line_2" : payload_address.line2,
+    "city" : payload_address.city,
+    "state_code" : payload_address.state,
+    "zip" : payload_address.postalCode,
+    "country_code" : payload_address.countryCode
+  };
+};

data/app/assets/javascripts/solidus_braintree/paypal_messaging.js

@@ -0,0 +1,22 @@
+//= require solidus_braintree/constants
+
+SolidusBraintree.PaypalMessaging = function(paypalOptions) {
+  this._paypalOptions = paypalOptions || {};
+
+  this._client = null;
+};
+
+SolidusBraintree.PaypalMessaging.prototype.initialize = function() {
+  this._client = new SolidusBraintree.createClient({usePaypal: true});
+
+  return this._client.initialize().then(this.initializeCallback.bind(this));
+};
+
+SolidusBraintree.PaypalMessaging.prototype.initializeCallback = function() {
+  this._paymentMethodId = this._client.paymentMethodId;
+
+  this._client.getPaypalInstance().loadPayPalSDK({
+    currency: this._paypalOptions.currency,
+    components: "messages"
+  })
+};

data/app/assets/javascripts/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/solidus_braintree/venmo_button.js

@@ -0,0 +1,86 @@
+//= require solidus_braintree/constants
+/**
+ * Constructor for Venmo button object
+ * @constructor
+ * @param {object} element - The DOM element of your Venmo button
+ */
+SolidusBraintree.VenmoButton = function(element, venmoOptions) {
+  this._element = element;
+  this._client = null;
+  this._venmoOptions = venmoOptions || {};
+
+  if(!this._element) {
+    throw new Error("Element for the Venmo button must be present on the page");
+  }
+};
+
+/**
+ * Creates the Venmo session using the provided options and enables the button
+ *
+ * @param {object} options - The options passed to tokenize when constructing
+ *                           the Venmo instance
+ *
+ * See {@link https://braintree.github.io/braintree-web/3.84.0/module-braintree-web_venmo.html#.create}
+ */
+SolidusBraintree.VenmoButton.prototype.initialize = function() {
+  this._client = new SolidusBraintree.createClient({
+    useVenmo: true,
+    newBrowserTabSupported: this._venmoOptions.newBrowserTabSupported,
+    flow: this._venmoOptions.flow
+  });
+
+  return this._client.initialize().then(this.initializeCallback.bind(this));
+};
+
+SolidusBraintree.VenmoButton.prototype.initializeCallback = function() {
+  this._venmoInstance = this._client.getVenmoInstance();
+
+  this._element.classList.add('visible');
+
+  // Check if tokenization results already exist. This occurs when your
+  // checkout page is relaunched in a new tab.
+  if (!this._venmoOptions.newBrowserTabSupported && this._venmoInstance.hasTokenizationResult()) {
+    this.tokenize();
+  }
+
+  this._element.addEventListener('click', function(event) {
+    event.preventDefault();
+    this._element.disabled = true;
+    this.initializeVenmoSession();
+  }.bind(this), false);
+};
+
+SolidusBraintree.VenmoButton.prototype.initializeVenmoSession = function() {
+  this.tokenize();
+};
+
+SolidusBraintree.VenmoButton.prototype.tokenize = function() {
+  var venmoButton = this._element;
+  this._venmoInstance.tokenize().then(handleVenmoSuccess).catch(handleVenmoError).then(function () {
+    venmoButton.removeAttribute('disabled');
+  });
+};
+
+function handleVenmoSuccess(payload) {
+  var $paymentForm = $("#checkout_form_payment");
+  var $nonceField = $("#venmo_payment_method_nonce", $paymentForm);
+
+  // Disable hostedFields' and enable Venmo's inputs as they use the same fields.
+  // Otherwise, they will clash. (Disabled inputs are not used on form submission)
+  $('.hosted-fields input').each(function(_index, input) {
+    input.disabled = true;
+  });
+  $('.venmo-fields input').each(function(_index, input) {
+    input.removeAttribute('disabled');
+  });
+
+  // remove hostedFields submit listener, otherwise empty credit card errors occur
+  $paymentForm.off('submit');
+
+  $nonceField.val(payload.nonce);
+  $paymentForm.submit();
+}
+
+function handleVenmoError(error) {
+  SolidusBraintree.config.braintreeErrorHandle(error);
+}