solidus_paypal_braintree 0.1.0

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

@@ -0,0 +1,182 @@
+/**
+ * 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
+  }
+};
+
+$(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 );
+      })
+    ).done(function() {
+      $('<script/>').attr({
+        'data-merchant' : "braintree",
+        'data-id' : "paypal-button",
+        'data-button' : "checkout",
+        'data-color' : "blue",
+        'data-size' : "medium",
+        'data-shape' : "pill",
+        'data-button_type' : "button",
+        'data-button_disabled' : "true"
+      }).
+      load(function() {
+        var button = new PaypalButton(document.querySelector("#paypal-button"));
+        button.initialize({
+          flow: 'vault',
+          enableShippingAddress: true,
+        });
+      }).
+      insertAfter("#content").
+      attr('src', 'https://www.paypalobjects.com/api/button.js?')
+    });
+  }
+});

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

@@ -0,0 +1,188 @@
+//= require spree/braintree_hosted_form
+
+window.SolidusPaypalBraintree = {
+  APPLE_PAY_API_VERSION: 1,
+
+  // 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);
+  },
+
+  fetchToken: function(tokenCallback) {
+    Spree.ajax({
+      dataType: 'json',
+      type: 'POST',
+      url: Spree.pathFor('solidus_paypal_braintree/client_token'),
+      success: function(response) {
+        tokenCallback(response.client_token, response.payment_method_id);
+      },
+      error: function(xhr) {
+        console.error("Error fetching braintree token");
+      }
+    });
+  },
+
+  initialize: function(authToken, clientReadyCallback) {
+    braintree.client.create({
+      authorization: authToken
+    }, function (clientErr, clientInstance) {
+      if (clientErr) {
+        console.error('Error creating client:', clientErr);
+        return;
+      }
+      clientReadyCallback(clientInstance);
+    });
+  },
+
+  initializeWithDataCollector: function(authToken, clientReadyCallback) {
+    braintree.client.create({
+      authorization: authToken
+    }, function (clientErr, clientInstance) {
+      braintree.dataCollector.create({
+        client: clientInstance,
+        paypal: true
+      }, function (err, dataCollectorInstance) {
+        if (err) {
+          console.error('Error creating data collector:', err);
+          return;
+        }
+      });
+      if (clientErr) {
+        console.error('Error creating client:', clientErr);
+        return;
+      }
+      clientReadyCallback(clientInstance);
+    });
+  },
+
+  setupApplePay: function(braintreeClient, merchantId, readyCallback) {
+    if(window.ApplePaySession && location.protocol == "https:") {
+      var promise = ApplePaySession.canMakePaymentsWithActiveCard(merchantId);
+      promise.then(function (canMakePayments) {
+        if (canMakePayments) {
+          braintree.applePay.create({
+            client: braintreeClient
+          }, function (applePayErr, applePayInstance) {
+            if (applePayErr) {
+              console.error("Error creating ApplePay:", applePayErr);
+              return;
+            }
+            readyCallback(applePayInstance);
+          });
+        }
+      });
+    };
+  },
+
+  /* Initializes and begins the ApplePay session
+   *
+   * @param config Configuration settings for the session
+   * @param config.applePayInstance {object} The instance returned from applePay.create
+   * @param config.storeName {String} The name of the store
+   * @param config.paymentRequest {object} The payment request to submit
+   * @param config.currentUserEmail {String|undefined} The active user's email
+   * @param config.paymentMethodId {Integer} The SolidusPaypalBraintree::Gateway id
+   */
+  initializeApplePaySession: function(config, sessionCallback) {
+
+    var requiredFields = ['postalAddress', 'phone'];
+
+    if (!config.currentUserEmail) {
+      requiredFields.push('email');
+    }
+
+    config.paymentRequest['requiredShippingContactFields'] = requiredFields
+    var paymentRequest = config.applePayInstance.createPaymentRequest(config.paymentRequest);
+
+    var session = new ApplePaySession(SolidusPaypalBraintree.APPLE_PAY_API_VERSION, paymentRequest);
+    session.onvalidatemerchant = function (event) {
+      config.applePayInstance.performValidation({
+        validationURL: event.validationURL,
+        displayName: config.storeName,
+      }, function (validationErr, merchantSession) {
+        if (validationErr) {
+          console.error('Error validating Apple Pay:', validationErr);
+          session.abort();
+          return;
+        };
+        session.completeMerchantValidation(merchantSession);
+      });
+    };
+
+    session.onpaymentauthorized = function (event) {
+      config.applePayInstance.tokenize({
+        token: event.payment.token
+      }, function (tokenizeErr, payload) {
+        if (tokenizeErr) {
+          console.error('Error tokenizing Apple Pay:', tokenizeErr);
+          session.completePayment(ApplePaySession.STATUS_FAILURE);
+        }
+
+        var contact = event.payment.shippingContact;
+
+        Spree.ajax({
+          data: SolidusPaypalBraintree.buildTransaction(payload, config, contact),
+          dataType: 'json',
+          type: 'POST',
+          url: Spree.pathFor('solidus_paypal_braintree/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);
+              }
+            }
+          }
+        });
+
+      });
+    };
+
+    sessionCallback(session);
+
+    session.begin();
+  },
+
+  buildTransaction: function(payload, config, shippingContact) {
+    return {
+      transaction: {
+        nonce: payload.nonce,
+        phone: shippingContact.phoneNumber,
+        email: config.currentUserEmail || shippingContact.emailAddress,
+        payment_type: payload.type,
+        address_attributes: SolidusPaypalBraintree.buildAddress(shippingContact)
+      },
+      payment_method_id: config.paymentMethodId
+    };
+  },
+
+  buildAddress: 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/stylesheets/spree/backend/solidus_paypal_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/assets/stylesheets/spree/frontend/solidus_paypal_braintree.css

@@ -0,0 +1,16 @@
+/*
+Placeholder manifest file.
+the installer will append this file to the app vendored assets here: 'vendor/assets/stylesheets/spree/frontend/all.css'
+*/
+
+.braintree-hosted-fields .input {
+  border: 1px solid #d9d9db;
+  border-radius: 3px;
+  color: #5498DA;
+  height: 30px;
+  padding: 5px 10px;
+}
+
+.paypal-button-widget .paypal-button:hover {
+  background: transparent;
+}

data/app/controllers/solidus_paypal_braintree/client_tokens_controller.rb

@@ -0,0 +1,21 @@
+module SolidusPaypalBraintree
+  class ClientTokensController < Spree::Api::BaseController
+    skip_before_action :authenticate_user
+
+    before_action :load_gateway
+
+    def create
+      render json: { client_token: @gateway.generate_token, payment_method_id: @gateway.id }
+    end
+
+    private
+
+    def load_gateway
+      if params[:payment_method_id]
+        @gateway = ::SolidusPaypalBraintree::Gateway.find_by!(id: params[:payment_method_id])
+      else
+        @gateway = ::SolidusPaypalBraintree::Gateway.find_by!(active: true)
+      end
+    end
+  end
+end

data/app/helpers/braintree_admin_helper.rb

@@ -0,0 +1,18 @@
+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 unless response_code.present?
+    return response_code unless merchant_id.present?
+
+    link_to(
+      response_code,
+      "https://#{environment}.braintreegateway.com/merchants/#{merchant_id}/transactions/#{response_code}",
+      title: 'Show payment on Braintree',
+      target: '_blank'
+    )
+  end
+end