solidus_paypal_braintree 0.2.0 → 1.1.0

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

@@ -4,15 +4,32 @@
  * @constructor
  * @param {object} element - The DOM element of your PayPal button
  */
-SolidusPaypalBraintree.PaypalButton = function(element, paypalOptions) {
+SolidusPaypalBraintree.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
@@ -23,7 +40,10 @@ SolidusPaypalBraintree.PaypalButton = function(element, paypalOptions) {
  * 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});
+  this._client = new SolidusPaypalBraintree.createClient({
+      useDataCollector: this._paypalOptions.useDataCollector,
+      usePaypal: true
+  });
 
   return this._client.initialize().then(this.initializeCallback.bind(this));
 };
@@ -31,10 +51,38 @@ SolidusPaypalBraintree.PaypalButton.prototype.initialize = function() {
 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);
+  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) => { SolidusPaypalBraintree.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);
+  })
 };
 
 /**
@@ -60,7 +108,22 @@ SolidusPaypalBraintree.PaypalButton.prototype._tokenizeCallback = function(token
       window.location.href = response.redirectUrl;
     },
     error: function(xhr) {
-      console.error("Error submitting transaction")
+      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);
+      SolidusPaypalBraintree.showError(errorText);
     },
   });
 };
@@ -74,14 +137,16 @@ SolidusPaypalBraintree.PaypalButton.prototype._tokenizeCallback = function(token
 SolidusPaypalBraintree.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": SolidusPaypalBraintree.fundingSource,
       "address_attributes" : this._addressParams(payload)
     }
-  }
+  };
 };
 
 /**
@@ -91,24 +156,23 @@ SolidusPaypalBraintree.PaypalButton.prototype._transactionParams = function(payl
  * @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;
+  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 {
-    "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
-  }
+    "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_paypal_braintree/paypal_messaging.js

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

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

@@ -0,0 +1,86 @@
+//= require solidus_paypal_braintree/constants
+/**
+ * Constructor for Venmo button object
+ * @constructor
+ * @param {object} element - The DOM element of your Venmo button
+ */
+SolidusPaypalBraintree.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}
+ */
+SolidusPaypalBraintree.VenmoButton.prototype.initialize = function() {
+  this._client = new SolidusPaypalBraintree.createClient({
+    useVenmo: true,
+    newBrowserTabSupported: this._venmoOptions.newBrowserTabSupported,
+    flow: this._venmoOptions.flow
+  });
+
+  return this._client.initialize().then(this.initializeCallback.bind(this));
+};
+
+SolidusPaypalBraintree.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);
+};
+
+SolidusPaypalBraintree.VenmoButton.prototype.initializeVenmoSession = function() {
+  this.tokenize();
+};
+
+SolidusPaypalBraintree.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) {
+  SolidusPaypalBraintree.config.braintreeErrorHandle(error);
+}

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

@@ -68,8 +68,8 @@ $(function() {
   if (!$paymentForm.length || !$hostedFields.length) { return; }
 
   $.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")
+    $.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),

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

@@ -1,32 +1,34 @@
 //= require solidus_paypal_braintree/paypal_button
 
+// This is the PayPal button on the cart page
 $(document).ready(function() {
   if (document.getElementById("empty-cart")) {
     $.when(
-      $.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")
+      $.getScript("https://js.braintreegateway.com/3.84.0/js/client.min.js"),
+      $.getScript("https://js.braintreegateway.com/3.84.0/js/paypal-checkout.min.js"),
+      $.getScript("https://js.braintreegateway.com/3.84.0/js/data-collector.min.js")
     ).done(function() {
+      $("#content").append('<div id="paypal-button"/>');
       $('<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"
+        'data-version-4' : "true"
       }).
       load(function() {
         var paypalOptions = {
           flow: 'vault',
           enableShippingAddress: true
         }
-        var button = new SolidusPaypalBraintree.createPaypalButton(document.querySelector("#paypal-button"), paypalOptions);
+        var options = {
+          restart_checkout: true
+        }
+        var button = new SolidusPaypalBraintree.createPaypalButton(
+          document.querySelector("#paypal-button"),
+          paypalOptions,
+          options
+        );
         return button.initialize();
       }).
       insertAfter("#content").
-      attr('src', 'https://www.paypalobjects.com/api/button.js?')
+      attr('src', 'https://www.paypalobjects.com/api/checkout.js');
     });
   }
 });

data/app/assets/stylesheets/spree/frontend/solidus_paypal_braintree.css

@@ -37,3 +37,15 @@ the installer will append this file to the app vendored assets here: 'vendor/ass
 .apple-pay-button.visible {
   visibility: visible;
 }
+
+.venmo-button {
+  visibility: hidden;
+  border: none;
+  height: 48px;
+  background-color: transparent;
+  background-repeat: no-repeat;
+}
+
+.venmo-button.visible {
+  visibility: visible;
+}

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

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

data/app/decorators/controllers/solidus_paypal_braintree/checkout_controller_decorator.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module SolidusPaypalBraintree
+  module CheckoutControllerDecorator
+    def self.prepended(base)
+      base.helper ::SolidusPaypalBraintree::BraintreeCheckoutHelper
+    end
+
+    ::Spree::CheckoutController.prepend(self) if SolidusSupport.frontend_available?
+  end
+end

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

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module SolidusPaypalBraintree
+  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 = ::SolidusPaypalBraintree::Gateway.find(params[:payment_method_id])
+      else
+        store_payment_methods_scope =
+          if current_store.payment_methods.empty?
+            ::SolidusPaypalBraintree::Gateway.all
+          else
+            ::SolidusPaypalBraintree::Gateway.where(id: current_store.payment_method_ids)
+          end
+        @gateway = ::SolidusPaypalBraintree::Gateway.where(active: true).merge(store_payment_methods_scope).first!
+      end
+    end
+
+    def generate_token
+      @gateway.generate_token
+    rescue ::SolidusPaypalBraintree::Gateway::TokenGenerationDisabledError => e
+      Rails.logger.error e
+      nil
+    end
+  end
+end

data/app/decorators/controllers/solidus_paypal_braintree/orders_controller_decorator.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module SolidusPaypalBraintree
+  module OrdersControllerDecorator
+    def self.prepended(base)
+      base.helper ::SolidusPaypalBraintree::BraintreeCheckoutHelper
+    end
+
+    ::Spree::OrdersController.prepend(self) if SolidusSupport.frontend_available?
+  end
+end

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

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module SolidusPaypalBraintree
+  module Spree
+    module StoreDecorator
+      def self.prepended(base)
+        base.has_one :braintree_configuration, class_name: "SolidusPaypalBraintree::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_paypal_braintree/spree/user_decorator.rb

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

data/app/helpers/solidus_paypal_braintree/braintree_admin_helper.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module SolidusPaypalBraintree
+  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/helpers/solidus_paypal_braintree/braintree_checkout_helper.rb

@@ -0,0 +1,60 @@
+# frozen_string_literal: true
+
+module SolidusPaypalBraintree
+  module BraintreeCheckoutHelper
+    def braintree_3ds_options_for(order)
+      ship_address = SolidusPaypalBraintree::Address.new(order.ship_address)
+      bill_address = SolidusPaypalBraintree::Address.new(order.bill_address)
+      {
+        nonce: nil, # populated after tokenization
+        bin: nil, # populated after tokenization
+        onLookupComplete: nil, # populated after tokenization
+        amount: order.total,
+        email: order.email,
+        billingAddress: {
+          givenName: bill_address.firstname,
+          surname: bill_address.lastname,
+          phoneNumber: bill_address.phone,
+          streetAddress: bill_address.address1,
+          extendedAddress: bill_address.address2,
+          locality: bill_address.city,
+          region: bill_address.state&.abbr,
+          postalCode: bill_address.zipcode,
+          countryCodeAlpha2: bill_address.country&.iso,
+        },
+        additionalInformation: {
+          shippingGivenName: ship_address.firstname,
+          shippingSurname: ship_address.lastname,
+          shippingPhone: ship_address.phone,
+          shippingAddress: {
+            streedAddress: ship_address.address1,
+            extendedAddress: ship_address.address2,
+            locality: ship_address.city,
+            region: ship_address.state&.abbr,
+            postalCode: ship_address.zipcode,
+            countryCodeAlpha2: ship_address.country&.iso,
+          }
+        }
+      }
+    end
+
+    def paypal_button_preference(key, store:)
+      store.braintree_configuration.preferences[key]
+    end
+
+    def venmo_button_style(store)
+      configuration = store.braintree_configuration
+      color = configuration.preferred_venmo_button_color
+      width = configuration.preferred_venmo_button_width
+
+      { width: width, color: color }
+    end
+
+    def venmo_button_asset_url(style, active: false)
+      prefix = 'solidus_paypal_braintree/venmo/venmo_'
+      active_string = active ? 'active_' : ''
+      path = "#{prefix}#{active_string}#{style[:color]}_button_#{style[:width]}x48.svg"
+      asset_path(path)
+    end
+  end
+end

data/app/models/application_record.rb

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

data/app/models/solidus_paypal_braintree/address.rb

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+module SolidusPaypalBraintree
+  class Address
+    delegate :address1,
+      :address2,
+      :city,
+      :country,
+      :phone,
+      :state,
+      :zipcode,
+      to: :spree_address
+
+    def self.split_name(name)
+      if defined?(Spree::Address::Name)
+        address_name = Spree::Address::Name.new(name)
+        [address_name.first_name, address_name.last_name]
+      else
+        name.strip.split(' ', 2)
+      end
+    end
+
+    def initialize(spree_address)
+      @spree_address = spree_address
+    end
+
+    def to_json(*_args)
+      address_hash = {
+        line1: address1,
+        line2: address2,
+        city: city,
+        postalCode: zipcode,
+        countryCode: country.iso,
+        phone: phone,
+        recipientName: "#{firstname} #{lastname}"
+      }
+
+      if ::Spree::Config.address_requires_state && country.states_required
+        address_hash[:state] = state.name
+      end
+      address_hash.to_json
+    end
+
+    def firstname
+      if SolidusSupport.combined_first_and_last_name_in_address?
+        self.class.split_name(spree_address.name).first
+      else
+        spree_address.firstname
+      end
+    end
+
+    def lastname
+      if SolidusSupport.combined_first_and_last_name_in_address?
+        self.class.split_name(spree_address.name).last
+      else
+        spree_address.lastname
+      end
+    end
+
+    private
+
+    attr_reader :spree_address
+  end
+end