solidus_paypal_braintree 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 56c8047e148da21f23e2c7764b03fbfa7091c9ca
-  data.tar.gz: 4fd0ea732eecabaa4781fdd5bba6e8ae16a22bb8
+  metadata.gz: 9b312aa57cfc45563e9144f43afd85c8f948de70
+  data.tar.gz: 21c6f9335713d620391a3b88dfd0a547bcc3c972
 SHA512:
-  metadata.gz: 4346d0ca96f967828853a548addef236066b9c87b738326da3b72b05570ac37a2e57787d1d7b517d90a33dd0bb7f79f2f45a9399ab996bc50ab027bef559bcc8
-  data.tar.gz: 844c939eb60eae893152b9cd3131307eb0e1edf79e6d097955bc325a77c7a5fc0368a4042f0f3d957a8ace3616843004bd2bb37ccff93e80cb966b8b99b57430
+  metadata.gz: 2ece71d9f4adef4898506c4394ff4325a6718f26f0cb3bb9df8cd06922797a024f0fb522e31855586d6adcffcd4168fd94b7618dc4dd533a79dde7d4507fac1b
+  data.tar.gz: 4dadbe474742f3250c38e4bd1be205601c3334d532a67a4b38011dd2be2c8d855e8b77840e83d4e694884874d9c8eb07dbd8e17cb1f83aeb4014467bf3269891

data/README.md

@@ -83,45 +83,58 @@ Spree::Store.all.each do |store|
 end
 ```
 
-3. If your site uses an unmodified `solidus_frontend`, it should now be ready to take credit card payments (if you've enabled that payment type). Paypal and ApplePay require some further configuration, discussed below.
-
-Apple Pay
----------
-
-### Setup
-Braintree has some [excellent documentation](https://developers.braintreepayments.com/guides/apple-pay/configuration/javascript/v3) on what you'll need to do to get Apple Pay up and running.
-
-In order to make everything a little simpler, this extension includes some client-side code to get you started. Specifically, it provides some wrappers to help with the initialization of an Apple Pay session. The following is a relatively bare-bones implementation:
-```javascript
-var applePayButton = document.getElementById('your-apple-pay-button');
-window.SolidusPaypalBraintree.fetchToken(function(clientToken) {
-  window.SolidusPaypalBraintree.initialize(clientToken, function(braintreeClient) {
-    window.SolidusPaypalBraintree.setupApplePay(braintreeClient, "YOUR-MERCHANT-ID", funtion(applePayInstance) {
-      applePayButton.addEventListener('click', function() { beginApplePayCheckout(applePayInstance) });
-    }
-  }
-}
-
-beginApplePayCheckout = function(applePayInstance) {
-  window.SolidusPaypalBraintree.initializeApplePaySession({
-    applePayInstance: applePayInstance,
-    storeName: 'Your Store Name',
-    currentUserEmail: Spree.current_email,
-    paymentMethodId: Spree.braintreePaymentMethodId,
-  }, (session) => {
-    // Add in your logic for onshippingcontactselected and onshippingmethodselected.
-  }
-};
+3. If your site uses an unmodified `solidus_frontend`, it should now be ready to take payments. See below for more information on configuring Paypal and ApplePay.
+
+4. Typical Solidus sites will have customized frontend code, and may require some additional work. Use `lib/views/frontend/spree/checkout/payment/_paypal_braintree.html.erb` and `app/assets/javascripts/solidus_paypal_braintree/checkout.js` as models.
+
+## Apple Pay
+### Developing with Apple Pay
+You'll need the following:
+- A device running iOS 10+.
+- An Apple Pay sandbox account. You can check out Apple's [documentation](https://developer.apple.com/support/apple-pay-sandbox/) for additional help in performing this step.
+- A site served via HTTPS. To set this up for development we recommend setting up a reverse proxy server. There are [lots of guides](https://www.google.ca/search?q=nginx+reverse+proxy+ssl+localhost) on how this can be achieved.
+- A Braintree sandbox account with Apple Pay enabled (`Settings>Processing`) and configured (`Settings>Processing>Options`) with your Apple Merchant ID and the HTTPS domain for your site.
+- A sandbox user logged in to your device, with a [test card](https://developer.apple.com/support/apple-pay-sandbox/) in its Wallet
+
+### Enabling Apple Pay for custom frontends
+The following is a relatively bare-bones implementation to enable Apple Pay on the frontend:
+
+```html
+<% if current_store.braintree_configuration.apple_pay? %>
+  <script src="https://js.braintreegateway.com/web/3.14.0/js/apple-pay.min.js"></script>
+
+  <button id="apple-pay-button" class="apple-pay-button"></button>
+
+  <script>
+    var applePayButtonElement = document.getElementById('apple-pay-button');
+    var applePayOptions = {
+      paymentMethodId: <%= id %>,
+      storeName: "<%= current_store.name %>",
+      orderEmail: "<%= current_order.email %>",
+      amount: "<%= current_order.total %>",
+      shippingContact: {
+        emailAddress: '<%= current_order.email %>',
+        familyName: '<%= address.firstname %>',
+        givenName: '<%= address.lastname %>',
+        phoneNumber: '<%= address.phone %>',
+        addressLines: ['<%= address.address1 %>','<%= address.address2 %>'],
+        locality: '<%= address.city %>',
+        administrativeArea: '<%= address.state.name %>',
+        postalCode: '<%= address.zipcode %>',
+        country: '<%= address.country.name %>',
+        countryCode: '<%= address.country.iso %>'
+      }
+    };
+    var button = new SolidusPaypalBraintree.createApplePayButton(applePayButtonElement, applePayOptions);
+    button.initialize();
+  </script>
+<% end %>
 ```
 
-For additional information checkout the [Apple's documentation](https://developer.apple.com/reference/applepayjs/) and [Braintree's documentation](https://developers.braintreepayments.com/guides/apple-pay/client-side/javascript/v3).
-
-### Development
-Developing with Apple Pay has a few gotchas. First and foremost, you'll need to ensure you have access to a device running iOS 10+. (I've heard there's also been progress on adding support to the Simulator.)
-
-Next, you'll need an Apple Pay sandbox account. You can check out Apple's [documentation](https://developer.apple.com/support/apple-pay-sandbox/) for additional help in performing this step.
+### Further information
+Braintree has some [excellent documentation](https://developers.braintreepayments.com/guides/apple-pay/configuration/javascript/v3) on what you'll need to do to get Apple Pay up and running.
 
-Finally, Apple Pay requires the site to be served via HTTPS. I recommend setting up a proxy server to help solve this. There are [lots of guides](https://www.google.ca/search?q=nginx+reverse+proxy+ssl+localhost) on how this can be achieved.
+For additional information check out [Apple's documentation](https://developer.apple.com/reference/applepayjs/) and [Braintree's documentation](https://developers.braintreepayments.com/guides/apple-pay/client-side/javascript/v3).
 
 PayPal
 ------

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

@@ -0,0 +1,179 @@
+//= require solidus_paypal_braintree/constants
+/**
+ * Constructor for Apple Pay button object
+ * @constructor
+ * @param {object} element - The DOM element of your Apple Pay button
+ */
+SolidusPaypalBraintree.ApplepayButton = function(element, applepayOptions) {
+  this._element = element;
+  this._applepayOptions = applepayOptions || {};
+  this._client = null;
+
+  if(!this._element) {
+    throw new Error("Element for the Apple Pay button must be present on the page");
+  }
+};
+
+/**
+ * Creates the Apple Pay session using the provided options and enables the button
+ *
+ * @param {object} options - The options passed to tokenize when constructing
+ *                           the Apple Pay instance
+ *
+ * See {@link https://braintree.github.io/braintree-web/3.9.0/Apple Pay.html#tokenize}
+ */
+SolidusPaypalBraintree.ApplepayButton.prototype.initialize = function() {
+  if (window.ApplePaySession && ApplePaySession.canMakePayments()) {
+    this._client = new SolidusPaypalBraintree.createClient(
+      {
+        useDataCollector: false,
+        useApplepay: true,
+        paymentMethodId: this._applepayOptions.paymentMethodId
+      }
+    );
+    return this._client.initialize().then(this.initializeCallback.bind(this));
+  }
+};
+
+SolidusPaypalBraintree.ApplepayButton.prototype.initializeCallback = function() {
+  this._paymentMethodId = this._client.paymentMethodId;
+  this._applePayInstance = this._client.getApplepayInstance();
+
+  this._element.removeAttribute('disabled');
+  this._element.classList.add("visible");
+  this._element.addEventListener('click', function(event) {
+    this.initializeApplePaySession();
+    event.preventDefault();
+  }.bind(this), false);
+};
+
+/**
+ * Initialize and begin the ApplePay session
+**/
+SolidusPaypalBraintree.ApplepayButton.prototype.initializeApplePaySession = function() {
+  var paymentRequest = this._applePayInstance.createPaymentRequest(this._paymentRequestHash());
+  var session = new ApplePaySession(SolidusPaypalBraintree.APPLE_PAY_API_VERSION, paymentRequest);
+  var applePayButton = this;
+
+  session.onvalidatemerchant = function (event) {
+    applePayButton.validateMerchant(session, paymentRequest);
+  };
+
+  session.onpaymentauthorized = function (event) {
+    applePayButton.tokenize(session, event.payment);
+  };
+
+  session.begin();
+};
+
+SolidusPaypalBraintree.ApplepayButton.prototype.validateMerchant = function(session, paymentRequest) {
+  this._applePayInstance.performValidation({
+    validationURL: event.validationURL,
+    displayName: paymentRequest.total.label,
+  }, function (validationErr, merchantSession) {
+    if (validationErr) {
+      console.error('Error validating Apple Pay:', validationErr);
+      session.abort();
+      return;
+    }
+    session.completeMerchantValidation(merchantSession);
+  });
+};
+
+SolidusPaypalBraintree.ApplepayButton.prototype.tokenize = function (session, payment) {
+  this._applePayInstance.tokenize(
+    {token: payment.token},
+    function (tokenizeErr, payload) {
+      if (tokenizeErr) {
+        console.error('Error tokenizing Apple Pay:', tokenizeErr);
+        session.completePayment(ApplePaySession.STATUS_FAILURE);
+      }
+      this._createTransaction(session, payment, payload);
+    }.bind(this)
+  );
+};
+
+SolidusPaypalBraintree.ApplepayButton.prototype._createTransaction = function (session, payment, payload) {
+  Spree.ajax({
+    data: this._transactionParams(payload, payment.shippingContact),
+    dataType: 'json',
+    type: 'POST',
+    url: SolidusPaypalBraintree.config.paths.transactions,
+    success: function(response) {
+      session.completePayment(ApplePaySession.STATUS_SUCCESS);
+      window.location.replace(response.redirectUrl);
+    },
+    error: function(xhr) {
+      if (xhr.status === 422) {
+        var errors = xhr.responseJSON.errors;
+
+        if (errors && errors.Address) {
+          session.completePayment(ApplePaySession.STATUS_INVALID_SHIPPING_POSTAL_ADDRESS);
+        } else {
+          session.completePayment(ApplePaySession.STATUS_FAILURE);
+        }
+      }
+    }
+  });
+};
+
+// countryCode
+// currencyCode
+// merchantCapabilities
+// supportedNetworks
+// ... are added by the Braintree gateway, but can be overridden
+// See https://developer.apple.com/documentation/applepayjs/applepaypaymentrequest
+SolidusPaypalBraintree.ApplepayButton.prototype._paymentRequestHash = function() {
+  return {
+    total: {
+      label: this._applepayOptions.storeName,
+      amount: this._applepayOptions.amount
+    },
+    shippingContact: this._applepayOptions.shippingContact,
+    requiredShippingContactFields: ['postalAddress', 'phone', 'email']
+  };
+};
+
+/**
+ * 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.ApplepayButton.prototype._transactionParams = function(payload, shippingContact) {
+  return {
+    payment_method_id: this._applepayOptions.paymentMethodId,
+    transaction: {
+      email: shippingContact.emailAddress,
+      nonce: payload.nonce,
+      payment_type: payload.type,
+      phone: shippingContact.phoneNumber,
+      address_attributes: this._addressParams(shippingContact)
+    }
+  };
+};
+
+/**
+ * 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.ApplepayButton.prototype._addressParams = function(shippingContact) {
+  var addressHash = {
+    country_name:   shippingContact.country,
+    country_code:   shippingContact.countryCode,
+    first_name:     shippingContact.givenName,
+    last_name:      shippingContact.familyName,
+    state_code:     shippingContact.administrativeArea,
+    city:           shippingContact.locality,
+    zip:            shippingContact.postalCode,
+    address_line_1: shippingContact.addressLines[0]
+  };
+
+  if(shippingContact.addressLines.length > 1) {
+    addressHash.address_line_2 = shippingContact.addressLines[1];
+  }
+
+  return addressHash;
+};

data/app/assets/javascripts/{spree/checkout/braintree.js → solidus_paypal_braintree/checkout.js}

@@ -1,11 +1,11 @@
-//= require spree/braintree_hosted_form
+//= require solidus_paypal_braintree/frontend
 
 $(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) {
-    SolidusPaypalBraintree.braintreeErrorHandle(err);
+    SolidusPaypalBraintree.config.braintreeErrorHandle(err);
     enableSubmit();
   }
 
@@ -29,32 +29,51 @@ $(function() {
     $submitButton.attr("disabled", true).removeClass("primary").addClass("disabled");
   }
 
+  function addFormHook(braintreeForm, hostedField) {
+    $paymentForm.on("submit",function(event) {
+      var $field = $(hostedField);
+
+      if ($field.is(":visible") && !$field.data("submitting")) {
+        var $nonce = $("#payment_method_nonce", $field);
+
+        if ($nonce.length > 0 && $nonce.val() === "") {
+          event.preventDefault();
+          disableSubmit();
+
+          braintreeForm.tokenize(function(error, payload) {
+            if (error) {
+              braintreeError(error);
+            } else {
+              $nonce.val(payload.nonce);
+              $paymentForm.submit();
+            }
+          });
+        }
+      }
+    });
+  }
+
   var $paymentForm = $("#checkout_form_payment");
   var $hostedFields = $("[data-braintree-hosted-fields]");
   var $submitButton = $("input[type='submit']", $paymentForm);
-  var $checkoutForm = $("#checkout_form_payment");
 
   // If we're not using hosted fields, the form doesn't need to wait.
   if ($hostedFields.length > 0) {
     disableSubmit();
-  }
-
-  $checkoutForm.submit(disableSubmit);
 
-  $.when(
-    $.getScript("https://js.braintreegateway.com/web/3.9.0/js/client.min.js"),
-    $.getScript("https://js.braintreegateway.com/web/3.9.0/js/hosted-fields.min.js")
-  ).done(function() {
-    var fieldPromises = $hostedFields.map(function() {
+    var fieldPromises = $hostedFields.map(function(index, field) {
       var $this = $(this);
       var id = $this.data("id");
 
-      var braintreeForm = new BraintreeHostedForm($paymentForm, $this, id);
-      return braintreeForm.initializeHostedFields().
-        then(braintreeForm.addFormHook(braintreeError)).
-        fail(braintreeError);
+      var braintreeForm = new SolidusPaypalBraintree.createHostedForm(id);
+
+      var formInitializationSuccess = function(formObject) {
+        addFormHook(formObject, field);
+      }
+
+      return braintreeForm.initialize().then(formInitializationSuccess, braintreeError);
     });
 
     $.when.apply($, fieldPromises).done(enableSubmit);
-  });
+  }
 });

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

@@ -0,0 +1,186 @@
+/**
+ * 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.
+ *
+**/
+SolidusPaypalBraintree.Client = function(config) {
+  this.paymentMethodId = config.paymentMethodId;
+  this.readyCallback = config.readyCallback;
+  this.useDataCollector = config.useDataCollector;
+  this.usePaypal = config.usePaypal;
+  this.useApplepay = config.useApplepay;
+
+  this._braintreeInstance = null;
+  this._dataCollectorInstance = null;
+  this._paypalInstance = 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
+**/
+SolidusPaypalBraintree.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));
+  }
+
+  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
+**/
+SolidusPaypalBraintree.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
+**/
+SolidusPaypalBraintree.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
+**/
+SolidusPaypalBraintree.Client.prototype.getApplepayInstance = function() {
+  return this._applepayInstance;
+};
+
+/**
+ * Returns the braintree dataCollector instance
+ * @returns {external:"braintree.DataCollector"} The braintree dataCollector that was initialized by this class
+**/
+SolidusPaypalBraintree.Client.prototype.getDataCollectorInstance = function() {
+  return this._dataCollectorInstance;
+};
+
+
+SolidusPaypalBraintree.Client.prototype._fetchToken = function() {
+  var payload = {
+    dataType: 'json',
+    type: 'POST',
+    url: SolidusPaypalBraintree.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);
+};
+
+SolidusPaypalBraintree.Client.prototype._createBraintreeInstance = function(tokenResponse) {
+  this.paymentMethodId = tokenResponse.payment_method_id;
+
+  return SolidusPaypalBraintree.PromiseShim.convertBraintreePromise(braintree.client.create, [{
+    authorization: tokenResponse.client_token
+  }]).then(function (clientInstance) {
+    this._braintreeInstance = clientInstance;
+    return clientInstance;
+  }.bind(this));
+};
+
+SolidusPaypalBraintree.Client.prototype._invokeReadyCallback = function() {
+  if(this.readyCallback) {
+    this.readyCallback(this._braintreeInstance);
+  }
+
+  return this;
+};
+
+SolidusPaypalBraintree.Client.prototype._createDataCollector = function() {
+  return SolidusPaypalBraintree.PromiseShim.convertBraintreePromise(braintree.dataCollector.create, [{
+    client: this._braintreeInstance,
+    paypal: !!this.usePaypal
+  }]).then(function (dataCollectorInstance) {
+    this._dataCollectorInstance = dataCollectorInstance;
+    return dataCollectorInstance;
+  }.bind(this));
+};
+
+SolidusPaypalBraintree.Client.prototype._createPaypal = function() {
+  return SolidusPaypalBraintree.PromiseShim.convertBraintreePromise(braintree.paypal.create, [{
+    client: this._braintreeInstance
+  }]).then(function (paypalInstance) {
+    this._paypalInstance = paypalInstance;
+    return paypalInstance;
+  }.bind(this));
+};
+
+SolidusPaypalBraintree.Client.prototype._createApplepay = function() {
+  return SolidusPaypalBraintree.PromiseShim.convertBraintreePromise(braintree.applePay.create, [{
+    client: this._braintreeInstance
+  }]).then(function (applePayInstance) {
+    this._applepayInstance = applePayInstance;
+    return applePayInstance;
+  }.bind(this));
+};