diff --git a/README.md b/README.md
index 9e4a96bb..2f617d43 100644
--- 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
index 4b86d26c..14f5c3ed 100644
--- 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
index 209e8078..5dbf7db5 100644
--- 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
index d5ae290b..cfd20fc6 100644
--- 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 %>
-
-
+
+
<% if current_store.braintree_configuration.paypal? %>
-
-
+
<% end %>
<% if current_store.braintree_configuration.credit_card? %>
-
+
<% if current_store.braintree_configuration.three_d_secure? %>
-
+
<% end %>
<% end %>
<% if current_store.braintree_configuration.apple_pay? %>
-
+
<% 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
index adfbed6a..5d6fccc2 100644
--- a/app/views/spree/shared/_paypal_cart_button.html.erb
+++ b/app/views/spree/shared/_paypal_cart_button.html.erb
@@ -5,15 +5,20 @@