Add a PayPal messaging component partial

README.md

@@ -165,7 +165,7 @@ using the
 [Vault flow](https://developers.braintreepayments.com/guides/paypal/overview/javascript/v3),
 which allows the source to be reused. If you want, you can use [Checkout with PayPal](https://developers.braintreepayments.com/guides/paypal/checkout-with-paypal/javascript/v3)
 instead, which doesn't allow you to reuse sources but allows your customers to pay with their PayPal
-balance (see setup instructions).
+balance and with PayPal financing options ([see setup instructions](#create-a-new-payment-method)).
 
 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)
@@ -188,6 +188,15 @@ A PayPal button can also be included on the cart view to enable express checkout
 render "spree/shared/paypal_cart_button"
 ```
 
+### PayPal Financing Messaging
+
+PayPal offers an [on-site messaging component](https://www.paypal.com/us/webapps/mpp/on-site-messaging) to notify the customer that there are financing options available. By default, this component is used in both the cart and checkout partials.
+
+You can also include this view partial to implement this messaging component anywhere - for instance, on the product page:
+```ruby
+render "spree/shared/paypal_messaging, options: {total: @product.price, placement: "product", currency: 'USD'}"
+```
+
 #### PayPal configuration
 
 If your store requires the [phone number into user addresses](https://github.com/solidusio/solidus/blob/859143f3f061de79cc1b385234599422b8ae8e21/core/app/models/spree/address.rb#L151-L153)

app/assets/javascripts/solidus_paypal_braintree/constants.js

@@ -26,6 +26,10 @@ SolidusPaypalBraintree = {
         return SolidusPaypalBraintree.PaypalButton;
       },
 
+      paypalMessaging: function() {
+        return SolidusPaypalBraintree.PaypalMessaging;
+      },
+
       applepayButton: function() {
         return SolidusPaypalBraintree.ApplepayButton;
       }
@@ -51,6 +55,10 @@ SolidusPaypalBraintree = {
     return SolidusPaypalBraintree._factory(SolidusPaypalBraintree.config.classes.paypalButton(), arguments);
   },
 
+  createPaypalMessaging: function() {
+    return SolidusPaypalBraintree._factory(SolidusPaypalBraintree.config.classes.paypalMessaging(), arguments);
+  },
+
   createApplePayButton: function() {
     return SolidusPaypalBraintree._factory(SolidusPaypalBraintree.config.classes.applepayButton(), arguments);
   },

app/assets/javascripts/solidus_paypal_braintree/frontend.js

@@ -9,4 +9,5 @@
 //= require solidus_paypal_braintree/client
 //= require solidus_paypal_braintree/hosted_form
 //= require solidus_paypal_braintree/paypal_button
+//= require solidus_paypal_braintree/paypal_messaging
 //= require solidus_paypal_braintree/apple_pay_button

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

app/views/spree/shared/_paypal_messaging.html.erb

@@ -0,0 +1,13 @@
+<%= render "spree/shared/paypal_braintree_head_scripts" %>
+
+<div data-pp-message data-pp-placement="<%= options[:placement] %>" data-pp-amount="<%= options[:total] %>"></div>
+
+<script>
+  var message = new SolidusPaypalBraintree.createPaypalMessaging(
+    {
+      currency: "<%= options[:currency] %>"
+    }
+  )
+
+  message.initialize();
+</script>