solidus_paypal_braintree 0.1.0 → 0.2.0

data/app/assets/javascripts/solidus_paypal_braintree/constants.js

@@ -0,0 +1,58 @@
+SolidusPaypalBraintree = {
+  APPLE_PAY_API_VERSION: 1,
+
+  config: {
+    paths: {
+      clientTokens: Spree.pathFor('solidus_paypal_braintree/client_token'),
+      transactions: Spree.pathFor('solidus_paypal_braintree/transactions')
+    },
+
+    // Override to provide your own error messages.
+    braintreeErrorHandle: function(braintreeError) {
+      var $contentContainer = $("#content");
+      var $flash = $("<div class='flash error'>" + braintreeError.name + ": " + braintreeError.message + "</div>");
+      $contentContainer.prepend($flash);
+
+      $flash.show().delay(5000).fadeOut(500);
+    },
+
+    classes: {
+      hostedForm: function() {
+        return SolidusPaypalBraintree.HostedForm;
+      },
+
+      client: function() {
+        return SolidusPaypalBraintree.Client;
+      },
+
+      paypalButton: function() {
+        return SolidusPaypalBraintree.PaypalButton;
+      },
+
+      applepayButton: function() {
+        return SolidusPaypalBraintree.ApplepayButton;
+      }
+    }
+  },
+
+  createHostedForm: function() {
+    return SolidusPaypalBraintree._factory(SolidusPaypalBraintree.config.classes.hostedForm(), arguments);
+  },
+
+  createClient: function() {
+    return SolidusPaypalBraintree._factory(SolidusPaypalBraintree.config.classes.client(), arguments);
+  },
+
+  createPaypalButton: function() {
+    return SolidusPaypalBraintree._factory(SolidusPaypalBraintree.config.classes.paypalButton(), arguments);
+  },
+
+  createApplePayButton: function() {
+    return SolidusPaypalBraintree._factory(SolidusPaypalBraintree.config.classes.applepayButton(), arguments);
+  },
+
+  _factory: function(klass, args) {
+    var normalizedArgs = Array.prototype.slice.call(args);
+    return new (Function.prototype.bind.apply(klass, [null].concat(normalizedArgs)));
+  }
+};

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

@@ -0,0 +1,12 @@
+// 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_paypal_braintree/constants
+//= require solidus_paypal_braintree/promise
+//= require solidus_paypal_braintree/client
+//= require solidus_paypal_braintree/hosted_form
+//= require solidus_paypal_braintree/paypal_button
+//= require solidus_paypal_braintree/apple_pay_button

data/app/assets/javascripts/solidus_paypal_braintree/hosted_form.js

@@ -0,0 +1,36 @@
+SolidusPaypalBraintree.HostedForm = function(paymentMethodId) {
+  this.paymentMethodId = paymentMethodId;
+  this.client = null;
+};
+
+SolidusPaypalBraintree.HostedForm.prototype.initialize = function() {
+  this.client = SolidusPaypalBraintree.createClient({paymentMethodId: this.paymentMethodId});
+  return this.client.initialize().
+    then(this._createHostedFields.bind(this));
+};
+
+SolidusPaypalBraintree.HostedForm.prototype._createHostedFields = function () {
+  if (!this.client) {
+    throw new Error("Client not initialized, please call initialize first!");
+  }
+
+  var opts = {
+    client: this.client.getBraintreeInstance(),
+
+    fields: {
+      number: {
+        selector: "#card_number" + this.paymentMethodId
+      },
+
+      cvv: {
+        selector: "#card_code" + this.paymentMethodId
+      },
+
+      expirationDate: {
+        selector: "#card_expiry" + this.paymentMethodId
+      }
+    }
+  };
+
+  return SolidusPaypalBraintree.PromiseShim.convertBraintreePromise(braintree.hostedFields.create, [opts]);
+};

data/app/assets/javascripts/solidus_paypal_braintree/paypal_button.js

@@ -0,0 +1,114 @@
+//= require solidus_paypal_braintree/constants
+/**
+ * Constructor for PayPal button object
+ * @constructor
+ * @param {object} element - The DOM element of your PayPal button
+ */
+SolidusPaypalBraintree.PaypalButton = function(element, paypalOptions) {
+  this._element = element;
+  this._paypalOptions = paypalOptions || {};
+  this._client = null;
+
+  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}
+ */
+SolidusPaypalBraintree.PaypalButton.prototype.initialize = function() {
+  this._client = new SolidusPaypalBraintree.createClient({useDataCollector: true, usePaypal: true});
+
+  return this._client.initialize().then(this.initializeCallback.bind(this));
+};
+
+SolidusPaypalBraintree.PaypalButton.prototype.initializeCallback = function() {
+  this._paymentMethodId = this._client.paymentMethodId;
+
+  this._element.removeAttribute('disabled');
+  this._element.addEventListener('click', function(event) {
+    this._client.getPaypalInstance().tokenize(this._paypalOptions, this._tokenizeCallback.bind(this));
+  }.bind(this), false);
+};
+
+/**
+ * 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
+ */
+SolidusPaypalBraintree.PaypalButton.prototype._tokenizeCallback = function(tokenizeErr, payload) {
+  if (tokenizeErr) {
+    SolidusPaypalBraintree.config.braintreeErrorHandle(tokenizeErr);
+    return;
+  }
+
+  var params = this._transactionParams(payload);
+
+  return Spree.ajax({
+    url: SolidusPaypalBraintree.config.paths.transactions,
+    type: 'POST',
+    dataType: 'json',
+    data: params,
+    success: function(response) {
+      window.location.href = response.redirectUrl;
+    },
+    error: function(xhr) {
+      console.error("Error submitting transaction")
+    },
+  });
+};
+
+/**
+ * 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
+ */
+SolidusPaypalBraintree.PaypalButton.prototype._transactionParams = function(payload) {
+  return {
+    "payment_method_id" : this._paymentMethodId,
+    "transaction" : {
+      "email" : payload.details.email,
+      "phone" : payload.details.phone,
+      "nonce" : payload.nonce,
+      "payment_type" : payload.type,
+      "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
+ */
+SolidusPaypalBraintree.PaypalButton.prototype._addressParams = function(payload) {
+  if (payload.details.shippingAddress.recipientName) {
+    var first_name = payload.details.shippingAddress.recipientName.split(" ")[0];
+    var last_name = payload.details.shippingAddress.recipientName.split(" ")[1];
+  }
+  if (first_name == null || last_name == null) {
+    var first_name = payload.details.firstName;
+    var last_name = payload.details.lastName;
+  }
+
+  return {
+    "first_name" : first_name,
+    "last_name" : last_name,
+    "address_line_1" : payload.details.shippingAddress.line1,
+    "address_line_2" : payload.details.shippingAddress.line2,
+    "city" : payload.details.shippingAddress.city,
+    "state_code" : payload.details.shippingAddress.state,
+    "zip" : payload.details.shippingAddress.postalCode,
+    "country_code" : payload.details.shippingAddress.countryCode
+  }
+};
+

data/app/assets/javascripts/solidus_paypal_braintree/promise.js

@@ -0,0 +1,20 @@
+SolidusPaypalBraintree.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_paypal_braintree.js

@@ -1,4 +1,7 @@
-//= require spree/braintree_hosted_form.js
+//= require solidus_paypal_braintree/constants
+//= require solidus_paypal_braintree/client
+//= require solidus_paypal_braintree/promise
+//= require solidus_paypal_braintree/hosted_form
 
 $(function() {
   var $paymentForm = $("#new_payment"),
@@ -18,6 +21,33 @@ $(function() {
     $("#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;
@@ -25,10 +55,10 @@ $(function() {
     }
 
     if (hostedFieldsInstance === null) {
-      braintreeForm = new BraintreeHostedForm($paymentForm, $container, id);
-      braintreeForm.initializeHostedFields().
+      braintreeForm = new SolidusPaypalBraintree.createHostedForm(id);
+      braintreeForm.initialize().
         then(setHostedFieldsInstance).
-        then(braintreeForm.addFormHook(onError)).
+        then(addFormHook(braintreeForm, onError)).
         fail(onError);
     }
   }

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

@@ -1,162 +1,11 @@
-/**
- * Constructor for PayPal button object
- * @constructor
- * @param {object} element - The DOM element of your PayPal button
- */
-function PaypalButton(element) {
-  this.element = element;
-}
-
-/**
- * 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}
- */
-PaypalButton.prototype.initialize = function(options) {
-  var self = this;
-
-  /* This sets the payment method id returned by fetchToken on the PaypalButton
-   * instance so that we can use it to build the transaction params later. */
-  SolidusPaypalBraintree.fetchToken(function(token, paymentMethodId) {
-    self.paymentMethodId = paymentMethodId;
-
-    SolidusPaypalBraintree.initializeWithDataCollector(token, function(client) {
-      self.createPaypalInstance(client, function(paypal) {
-
-        self.initializePaypalSession({
-          paypalInstance: paypal,
-          paypalButton: self.element,
-          paypalOptions: options
-        }, self.tokenizeCallback.bind(self));
-      });
-
-    });
-  });
-};
-
-PaypalButton.prototype.createPaypalInstance = function(braintreeClient, readyCallback) {
-  braintree.paypal.create({
-    client: braintreeClient
-  }, function (paypalErr, paypalInstance) {
-    if (paypalErr) {
-      console.error("Error creating PayPal:", paypalErr);
-      return;
-    }
-    readyCallback(paypalInstance);
-  });
-};
-
-/* Initializes and begins the Paypal session
- *
- * @param config Configuration settings for the session
- * @param config.paypalInstance {object} The Paypal instance returned by Braintree
- * @param config.paypalButton {object} The button DOM element
- * @param config.paypalOptions {object} Configuration options for Paypal
- * @param config.error {tokenizeErrorCallback} Callback function for tokenize errors
- * @param {tokenizeCallback} callback Callback function for tokenization
- */
-PaypalButton.prototype.initializePaypalSession = function(config, callback) {
-    config.paypalButton.removeAttribute('disabled');
-    config.paypalButton.addEventListener('click', function(event) {
-      config.paypalInstance.tokenize(config.paypalOptions, callback);
-    }, false);
-  },
-
-/**
- * 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
- */
-PaypalButton.prototype.tokenizeCallback = function(tokenizeErr, payload) {
-  if (tokenizeErr) {
-    console.error('Error tokenizing:', tokenizeErr);
-  } else {
-    var params = this.transactionParams(payload);
-
-    Spree.ajax({
-      url: Spree.pathFor("solidus_paypal_braintree/transactions"),
-      type: 'POST',
-      dataType: 'json',
-      data: params,
-      success: function(response) {
-        window.location.href = response.redirectUrl;
-      },
-      error: function(xhr) {
-        console.error("Error submitting transaction")
-      },
-    });
-  }
-};
-
-/**
- * Assigns a new callback function for when tokenization completes
- *
- * @callback callback - The callback function to assign
- */
-PaypalButton.prototype.setTokenizeCallback = function(callback) {
-  this.tokenizeCallback = callback;
-};
-
-/**
- * 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
- */
-PaypalButton.prototype.transactionParams = function(payload) {
-  return {
-    "payment_method_id" : this.paymentMethodId,
-    "transaction" : {
-      "email" : payload.details.email,
-      "phone" : payload.details.phone,
-      "nonce" : payload.nonce,
-      "payment_type" : payload.type,
-      "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
- */
-PaypalButton.prototype.addressParams = function(payload) {
-  if (payload.details.shippingAddress.recipientName) {
-    var first_name = payload.details.shippingAddress.recipientName.split(" ")[0];
-    var last_name = payload.details.shippingAddress.recipientName.split(" ")[1];
-  }
-  if (first_name == null || last_name == null) {
-    var first_name = payload.details.firstName;
-    var last_name = payload.details.lastName;
-  }
-
-  return {
-    "first_name" : first_name,
-    "last_name" : last_name,
-    "address_line_1" : payload.details.shippingAddress.line1,
-    "address_line_2" : payload.details.shippingAddress.line2,
-    "city" : payload.details.shippingAddress.city,
-    "state_code" : payload.details.shippingAddress.state,
-    "zip" : payload.details.shippingAddress.postalCode,
-    "country_code" : payload.details.shippingAddress.countryCode
-  }
-};
+//= require solidus_paypal_braintree/paypal_button
 
 $(document).ready(function() {
   if (document.getElementById("empty-cart")) {
     $.when(
-      $.getScript("https://js.braintreegateway.com/web/3.9.0/js/client.min.js"),
-      $.getScript("https://js.braintreegateway.com/web/3.9.0/js/paypal.min.js"),
-      $.getScript("https://js.braintreegateway.com/web/3.9.0/js/data-collector.min.js"),
-      $.Deferred(function( deferred ){
-        $( deferred.resolve );
-      })
+      $.getScript("https://js.braintreegateway.com/web/3.14.0/js/client.min.js"),
+      $.getScript("https://js.braintreegateway.com/web/3.14.0/js/paypal.min.js"),
+      $.getScript("https://js.braintreegateway.com/web/3.14.0/js/data-collector.min.js")
     ).done(function() {
       $('<script/>').attr({
         'data-merchant' : "braintree",
@@ -169,11 +18,12 @@ $(document).ready(function() {
         'data-button_disabled' : "true"
       }).
       load(function() {
-        var button = new PaypalButton(document.querySelector("#paypal-button"));
-        button.initialize({
+        var paypalOptions = {
           flow: 'vault',
-          enableShippingAddress: true,
-        });
+          enableShippingAddress: true
+        }
+        var button = new SolidusPaypalBraintree.createPaypalButton(document.querySelector("#paypal-button"), paypalOptions);
+        return button.initialize();
       }).
       insertAfter("#content").
       attr('src', 'https://www.paypalobjects.com/api/button.js?')