Update to New PayPal SDK

This switches from the braintree SDK to the new PayPal SDK, which allows for displaying credit messaging/buttons. This update adds two new config options: * Layout, accepting either `horizontal` or `vertical`, changing the layout of the buttons * Messaging, a boolean, that controls whether the messaging component is loaded in. This update also removes the `size` config option, as it no longer does anything. PayPal uses the responsive size for everything now, and expects you to resize your elements locally to whatever size you want.
solidusio · Oct 19, 2020 · a12c068 · a12c068
1 parent 6686af6
commit a12c068
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 41 deletions.
diff --git a/README.md b/README.md
@@ -153,6 +153,12 @@ It will only be displayed if the `SolidusPaypalBraintree::Gateway` payment
 method is configured to display on the frontend and PayPal is enabled in the
 store's configuration.
 
+You can find button configuration options in 
+`/solidus_paypal_braintree/configurations/list` if you want to change the color,
+shape, layout, and a few other options. Keep in mind that the `paypal_button_tagline`
+does not work when the `paypal_button_layout` is set to `vertical`, and will be
+ignored in that case.
+
 The checkout view
 [initializes the PayPal button](/lib/views/frontend/spree/checkout/payment/_paypal_braintree.html.erb)
 using the
@@ -163,24 +169,16 @@ balance (see setup instructions).
 
 If you are creating your own checkout view or would like to customize the
 [options that get passed to tokenize](https://braintree.github.io/braintree-web/3.6.3/PayPal.html#tokenize)
-, you can initialize your own using the `PaypalButton` JS object:
+, you can initialize your own using the `CreatePaypalButton` JS object:
 
 ```javascript
-var button = new PaypalButton(document.querySelector("#your-button-id"));
-
-button.initialize({
+var paypalOptions = {
   // your configuration options here
-});
-```
+}
 
-After successful tokenization, a callback function is invoked that submits the
-transaction via AJAX and advances the order to confirm. It is possible to provide
-your own callback function to customize the behaviour after tokenize as follows:
-
-```javascript
-var button = new PaypalButton(document.querySelector("#your-button-id"));
+var button = new SolidusPaypalBraintree.createPaypalButton(document.querySelector("#your-button-id"), paypalOptions);
 
-button.setTokenizeCallback(your-callback);
+button.initialize();
 ```
 
 ### Express checkout from the cart

diff --git a/app/assets/javascripts/solidus_paypal_braintree/paypal_button.js b/app/assets/javascripts/solidus_paypal_braintree/paypal_button.js
@@ -40,19 +40,27 @@ SolidusPaypalBraintree.PaypalButton.prototype.initialize = function() {
 SolidusPaypalBraintree.PaypalButton.prototype.initializeCallback = function() {
   this._paymentMethodId = this._client.paymentMethodId;
 
-  var render_options = {
-    env: this._environment,
-    locale: this.locale,
-    style: this.style,
-    payment: function () {
-      return this._client.getPaypalInstance().createPayment(this._paypalOptions);
-    }.bind(this),
-    onAuthorize: function (data, actions) {
-      return this._client.getPaypalInstance().tokenizePayment(data, this._tokenizeCallback.bind(this));
-    }.bind(this)
-  };
-
-  paypal.Button.render(render_options, this._element);
+  this._client.getPaypalInstance().loadPayPalSDK({
+    currency: this._paypalOptions.currency,
+    commit: true,
+    vault: this._paypalOptions.flow == "vault",
+    components: this.style['messaging'] == "true" ? "buttons,messages" : "buttons",
+    intent: this._paypalOptions.flow == "vault" ? "tokenize" : "authorize"
+  }).then(() => {
+    var create_method = this._paypalOptions.flow == "vault" ? "createBillingAgreement" : "createOrder"
+
+    var render_config = {
+      style: this.style,
+      [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);
+  })
 };
 
 /**

diff --git a/app/models/solidus_paypal_braintree/configuration.rb b/app/models/solidus_paypal_braintree/configuration.rb
@@ -1,10 +1,11 @@
 class SolidusPaypalBraintree::Configuration < Spree::Base
   PAYPAL_BUTTON_PREFERENCES = {
     color: { availables: %w[gold blue silver white black], default: 'white' },
-    size: { availables: %w[small medium large responsive], default: 'small' },
     shape: { availables: %w[pill rect], default: 'rect' },
     label: { availables: %w[checkout credit pay buynow paypal installment], default: 'checkout' },
-    tagline: { availables: %w[true false], default: 'false' }
+    tagline: { availables: %w[true false], default: 'false' },
+    layout: { availables: %w[horizontal vertical], default: 'horizontal'},
+    messaging: {availables: %w[true false], default: 'true'}
   }
 
   belongs_to :store, class_name: 'Spree::Store'

diff --git a/app/views/spree/shared/_paypal_braintree_head_scripts.html.erb b/app/views/spree/shared/_paypal_braintree_head_scripts.html.erb
@@ -1,22 +1,21 @@
 <% content_for :head do %>
-  <script src="https://js.braintreegateway.com/web/3.52.0/js/client.min.js"></script>
-  <script src="https://js.braintreegateway.com/web/3.52.0/js/data-collector.min.js"></script>
+  <script src="https://js.braintreegateway.com/web/3.67.0/js/client.min.js"></script>
+  <script src="https://js.braintreegateway.com/web/3.67.0/js/data-collector.min.js"></script>
 
   <% if current_store.braintree_configuration.paypal? %>
-    <script src="https://js.braintreegateway.com/web/3.52.0/js/paypal-checkout.min.js"></script>
-    <script src="https://www.paypalobjects.com/api/checkout.js" data-version-4></script>
+    <script src="https://js.braintreegateway.com/web/3.67.0/js/paypal-checkout.min.js"></script>
   <% end %>
 
   <% if current_store.braintree_configuration.credit_card? %>
-    <script src="https://js.braintreegateway.com/web/3.52.0/js/hosted-fields.min.js"></script>
+    <script src="https://js.braintreegateway.com/web/3.67.0/js/hosted-fields.min.js"></script>
 
     <% if current_store.braintree_configuration.three_d_secure? %>
-      <script src="https://js.braintreegateway.com/web/3.52.0/js/three-d-secure.min.js"></script>
+      <script src="https://js.braintreegateway.com/web/3.67.0/js/three-d-secure.min.js"></script>
     <% end %>
   <% end %>
 
   <% if current_store.braintree_configuration.apple_pay? %>
-    <script src="https://js.braintreegateway.com/web/3.52.0/js/apple-pay.min.js"></script>
+    <script src="https://js.braintreegateway.com/web/3.67.0/js/apple-pay.min.js"></script>
   <% end %>
 
   <%= javascript_include_tag "solidus_paypal_braintree/checkout" %>

diff --git a/app/views/spree/shared/_paypal_cart_button.html.erb b/app/views/spree/shared/_paypal_cart_button.html.erb
@@ -5,15 +5,20 @@
 <script>
   var paypalOptions = {
     flow: '<%= SolidusPaypalBraintree::Gateway.first.preferred_paypal_flow %>',
+    amount: '<%= current_order.total %>',
+    currency: '<%= current_order.currency %>',
     enableShippingAddress: true,
     environment: '<%= Rails.env.production? ? "production" : "sandbox" %>',
     locale: '<%= paypal_button_preference(:paypal_button_locale, store: current_store) %>',
     style: {
       color: '<%= paypal_button_preference(:paypal_button_color, store: current_store) %>',
-      size: '<%= paypal_button_preference(:paypal_button_size, store: current_store) %>',
       shape: '<%= paypal_button_preference(:paypal_button_shape, store: current_store) %>',
       label: '<%= paypal_button_preference(:paypal_button_label, store: current_store) %>',
-      tagline: '<%= paypal_button_preference(:paypal_button_tagline, store: current_store) %>'
+      layout: '<%= paypal_button_preference(:paypal_button_layout, store: current_store) %>',
+      <% if paypal_button_preference(:paypal_button_layout, store: current_store) == "horizontal" %>
+        tagline: '<%= paypal_button_preference(:paypal_button_tagline, store: current_store) %>',
+      <% end %>
+      messaging: '<%= paypal_button_preference(:paypal_button_messaging, store: current_store) %>'
     }
   }
   var options = {

diff --git a/lib/controllers/backend/solidus_paypal_braintree/configurations_controller.rb b/lib/controllers/backend/solidus_paypal_braintree/configurations_controller.rb
@@ -32,10 +32,11 @@ def configurations_params
         :three_d_secure,
         :preferred_paypal_button_locale,
         :preferred_paypal_button_color,
-        :preferred_paypal_button_size,
         :preferred_paypal_button_shape,
         :preferred_paypal_button_label,
-        :preferred_paypal_button_tagline
+        :preferred_paypal_button_tagline,
+        :preferred_paypal_button_layout,
+        :preferred_paypal_button_messaging
       ])
     end
   end

diff --git a/lib/views/frontend/spree/shared/_paypal_checkout_button.html.erb b/lib/views/frontend/spree/shared/_paypal_checkout_button.html.erb
@@ -1,6 +1,7 @@
 <% address = current_order.ship_address %>
 
 <div id="paypal-button"></div>
+<div data-pp-message data-pp-placement="payment" data-pp-amount="<%= @order.total %>"></div>
 
 <script>
   var address = {
@@ -25,10 +26,13 @@
     locale: '<%= paypal_button_preference(:paypal_button_locale, store: current_store) %>',
     style: {
       color: '<%= paypal_button_preference(:paypal_button_color, store: current_store) %>',
-      size: '<%= paypal_button_preference(:paypal_button_size, store: current_store) %>',
       shape: '<%= paypal_button_preference(:paypal_button_shape, store: current_store) %>',
       label: '<%= paypal_button_preference(:paypal_button_label, store: current_store) %>',
-      tagline: '<%= paypal_button_preference(:paypal_button_tagline, store: current_store) %>'
+      layout: '<%= paypal_button_preference(:paypal_button_layout, store: current_store) %>',
+      <% if paypal_button_preference(:paypal_button_layout, store: current_store) == "horizontal" %>
+        tagline: '<%= paypal_button_preference(:paypal_button_tagline, store: current_store) %>',
+      <% end %>
+      messaging: '<%= paypal_button_preference(:paypal_button_messaging, store: current_store) %>'
     }
   }