solidus_paypal_braintree 0.1.0 → 0.2.0

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

@@ -1,188 +1 @@
-//= 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;
-  }
-}
+//= require solidus_paypal_braintree/frontend

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

@@ -14,3 +14,26 @@ the installer will append this file to the app vendored assets here: 'vendor/ass
 .paypal-button-widget .paypal-button:hover {
   background: transparent;
 }
+
+.apple-pay-button {
+  -webkit-appearance: -apple-pay-button;
+  -apple-pay-button-type: buy;
+  visibility: hidden;
+  display: inline-block;
+  min-height: 30px;
+  border: 1px solid black;
+  background-image: -webkit-named-image(apple-pay-logo-black);
+  background-size: 100% calc(60% + 2px);
+  background-repeat: no-repeat;
+  background-color: white;
+  background-position: 50% 50%;
+  border-radius: 5px;
+  padding: 0;
+  margin: 5px auto;
+  transition: background-color .15s;
+  width: auto;
+}
+
+.apple-pay-button.visible {
+  visibility: visible;
+}

data/lib/generators/solidus_paypal_braintree/install/install_generator.rb

@@ -4,7 +4,7 @@ module SolidusPaypalBraintree
       class_option :auto_run_migrations, type: :boolean, default: false
 
       def add_javascripts
-        append_file 'vendor/assets/javascripts/spree/frontend/all.js', "//= require spree/frontend/solidus_paypal_braintree\n"
+        append_file 'vendor/assets/javascripts/spree/frontend/all.js', "//= require solidus_paypal_braintree/frontend\n"
         append_file 'vendor/assets/javascripts/spree/frontend/all.js', "//= require spree/frontend/paypal_button\n"
         append_file 'vendor/assets/javascripts/spree/backend/all.js', "//= require spree/backend/solidus_paypal_braintree\n"
       end

data/lib/solidus_paypal_braintree/engine.rb

@@ -31,9 +31,10 @@ module SolidusPaypalBraintree
 
     if frontend_available?
       config.assets.precompile += [
-        'spree/frontend/solidus_paypal_braintree.js',
+        'solidus_paypal_braintree/checkout.js',
+        'solidus_paypal_braintree/frontend.js',
         'spree/frontend/paypal_button.js',
-        'spree/checkout/braintree.js'
+        'spree/frontend/apple_pay_button.js'
       ]
       paths["app/controllers"] << "lib/controllers/frontend"
       paths["app/views"] << "lib/views/frontend"

data/lib/solidus_paypal_braintree/version.rb

@@ -1,3 +1,3 @@
 module SolidusPaypalBraintree
-  VERSION = '0.1.0'
+  VERSION = '0.2.0'
 end

data/lib/views/frontend/spree/checkout/payment/_paypal_braintree.html.erb

@@ -2,7 +2,22 @@
 <% id = payment_method.id %>
 
 <% content_for :head do %>
-  <%= javascript_include_tag "spree/checkout/braintree" %>
+  <script src="https://js.braintreegateway.com/web/3.14.0/js/client.min.js"></script>
+  <script src="https://js.braintreegateway.com/web/3.14.0/js/data-collector.min.js"></script>
+
+  <% if current_store.braintree_configuration.paypal? %>
+    <script src="https://js.braintreegateway.com/web/3.14.0/js/paypal.min.js"></script>
+  <% end %>
+
+  <% if current_store.braintree_configuration.credit_card? %>
+    <script src="https://js.braintreegateway.com/web/3.14.0/js/hosted-fields.min.js"></script>
+  <% end %>
+
+  <% if current_store.braintree_configuration.apple_pay? %>
+    <script src="https://js.braintreegateway.com/web/3.14.0/js/apple-pay.min.js"></script>
+  <% end %>
+
+  <%= javascript_include_tag "solidus_paypal_braintree/checkout" %>
 <% end %>
 
 <% if current_store.braintree_configuration.paypal? %>
@@ -29,19 +44,15 @@
       recipientName: '<%= "#{address.firstname} #{address.lastname}" %>'
     }
 
-    $.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")
-    ).done(function() {
-      var button = new PaypalButton(document.querySelector("#paypal-button"));
-      button.initialize({
-        flow: 'vault',
-        enableShippingAddress: true,
-        shippingAddressOverride: address,
-        shippingAddressEditable: false
-      });
-    });
+    var paypalOptions = {
+      flow: 'vault',
+      enableShippingAddress: true,
+      shippingAddressOverride: address,
+      shippingAddressEditable: false
+    }
+
+    var button = new SolidusPaypalBraintree.createPaypalButton(document.querySelector("#paypal-button"), paypalOptions);
+    button.initialize();
   </script>
 <% end %>
 
@@ -50,3 +61,30 @@
     <%= render "spree/shared/braintree_hosted_fields", id: id %>
   </fieldset>
 <% end %>
+
+<% if current_store.braintree_configuration.apple_pay? %>
+  <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 %>

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: solidus_paypal_braintree
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.2.0
 platform: ruby
 authors:
 - Stembolt
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-07-17 00:00:00.000000000 Z
+date: 2017-07-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: solidus
@@ -277,9 +277,15 @@ files:
 - LICENSE
 - README.md
 - Rakefile
+- app/assets/javascripts/solidus_paypal_braintree/apple_pay_button.js
+- app/assets/javascripts/solidus_paypal_braintree/checkout.js
+- app/assets/javascripts/solidus_paypal_braintree/client.js
+- app/assets/javascripts/solidus_paypal_braintree/constants.js
+- app/assets/javascripts/solidus_paypal_braintree/frontend.js
+- app/assets/javascripts/solidus_paypal_braintree/hosted_form.js
+- app/assets/javascripts/solidus_paypal_braintree/paypal_button.js
+- app/assets/javascripts/solidus_paypal_braintree/promise.js
 - app/assets/javascripts/spree/backend/solidus_paypal_braintree.js
-- app/assets/javascripts/spree/braintree_hosted_form.js
-- app/assets/javascripts/spree/checkout/braintree.js
 - app/assets/javascripts/spree/frontend/paypal_button.js
 - app/assets/javascripts/spree/frontend/solidus_paypal_braintree.js
 - app/assets/stylesheets/spree/backend/solidus_paypal_braintree.scss
@@ -343,7 +349,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.6.12
+rubygems_version: 2.6.11
 signing_key: 
 specification_version: 4
 summary: Officially supported Paypal/Braintree extension

data/app/assets/javascripts/spree/braintree_hosted_form.js

@@ -1,98 +0,0 @@
-function BraintreeHostedForm($paymentForm, $hostedFields, paymentMethodId) {
-  this.paymentForm = $paymentForm;
-  this.hostedFields = $hostedFields;
-  this.paymentMethodId = paymentMethodId;
-}
-
-BraintreeHostedForm.prototype.initializeHostedFields = function() {
-  return this.getToken().
-    then(this.createClient.bind(this)).
-    then(this.createHostedFields());
-};
-
-BraintreeHostedForm.prototype.promisify = function (fn, args, self) {
-  var d = $.Deferred();
-
-  fn.apply(self || this, (args || []).concat(function (err, data) {
-    if (err) d.reject(err);
-    d.resolve(data);
-  }));
-
-  return d.promise();
-};
-
-BraintreeHostedForm.prototype.getToken = function () {
-  var opts = {
-    url: "/solidus_paypal_braintree/client_token",
-    method: "POST",
-    data: {
-      payment_method_id: this.paymentMethodId
-    },
-  };
-
-  function onSuccess(data) {
-    return data.client_token;
-  }
-
-  return Spree.ajax(opts).then(onSuccess);
-};
-
-BraintreeHostedForm.prototype.createClient = function (token) {
-  var opts = { authorization: token };
-  return this.promisify(braintree.client.create, [opts]);
-};
-
-BraintreeHostedForm.prototype.createHostedFields = function () {
-  var self = this;
-  var id = this.paymentMethodId;
-
-  return function(client) {
-    var opts = {
-      client: client,
-
-      fields: {
-        number: {
-          selector: "#card_number" + id
-        },
-
-        cvv: {
-          selector: "#card_code" + id
-        },
-
-        expirationDate: {
-          selector: "#card_expiry" + id
-        }
-      }
-    };
-
-    return self.promisify(braintree.hostedFields.create, [opts]);
-  };
-};
-
-BraintreeHostedForm.prototype.addFormHook = function (errorCallback) {
-  var self = this;
-  var shouldSubmit = false;
-
-  function submit(payload) {
-    shouldSubmit = true;
-
-    $("#payment_method_nonce", self.hostedFields).val(payload.nonce);
-    self.paymentForm.submit();
-  }
-
-  return function(hostedFields) {
-    self.paymentForm.on("submit", function(e) {
-      if (self.hostedFields.is(":visible") && !shouldSubmit) {
-        e.preventDefault();
-
-        hostedFields.tokenize(function(err, payload) {
-          if (err) {
-            errorCallback(err);
-          } else {
-            submit(payload);
-          }
-        });
-      }
-    });
-  };
-};