Merge pull request #267 from seand7565/update_paypal

Update to New PayPal SDK

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

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);
+  })
 };
 
 /**

app/models/solidus_paypal_braintree/configuration.rb

@@ -4,10 +4,11 @@ module SolidusPaypalBraintree
   class 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' }
     }.freeze
 
     belongs_to :store, class_name: 'Spree::Store'

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" %>

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 = {

lib/controllers/backend/solidus_paypal_braintree/configurations_controller.rb

@@ -34,10 +34,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

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) %>'
     }
   }