Make the gem compatible with a js async loading

app/assets/javascripts/solidus_paypal_braintree/checkout.js

@@ -105,4 +105,16 @@ $(function() {
 
     $.when.apply($, fieldPromises).done(enableSubmit);
   }
+
+  var $paypalButton = $("#paypal-button");
+  if ($paypalButton.length > 0) {
+    var button = new SolidusPaypalBraintree.createPaypalButton($paypalButton[0], paypalOptions, (typeof options === 'undefined') ? {} : options);
+    button.initialize();
+  }
+
+  var $applePayButton = $('#apple-pay-button');
+  if ($applePayButton.length > 0) {
+    var button = new SolidusPaypalBraintree.createApplePayButton($applePayButton[0], applePayOptions);
+    button.initialize();
+  }
 });

app/assets/javascripts/solidus_paypal_braintree/constants.js

@@ -68,14 +68,3 @@ SolidusPaypalBraintree = {
     return new (Function.prototype.bind.apply(klass, [null].concat(normalizedArgs)));
   }
 };
-
-BraintreeError = {
-  DEFAULT: "Something bad happened!",
-
-  getErrorFromSlug: function(slug) {
-    error = BraintreeError.DEFAULT
-    if (slug in BraintreeError)
-      error = BraintreeError[slug]
-    return error
-  }
-}

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

@@ -3,7 +3,6 @@
 <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 %>",
@@ -22,6 +21,4 @@
       countryCode: '<%= address.country.iso %>'
     }
   };
-  var button = new SolidusPaypalBraintree.createApplePayButton(applePayButtonElement, applePayOptions);
-  button.initialize();
 </script>

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

@@ -1,13 +1,22 @@
 <script type="text/javascript">
-  BraintreeError.DEFAULT = "<%= I18n.t('solidus_paypal_braintree.errors.default_error')%>"
-  BraintreeError.PAYPAL_POPUP_CLOSED = "<%= I18n.t('solidus_paypal_braintree.errors.paypal_popup_closed') %>"
-  BraintreeError.HOSTED_FIELDS_FIELDS_EMPTY = "<%= I18n.t('solidus_paypal_braintree.errors.empty_fields')%>"
-  BraintreeError.HOSTED_FIELDS_FIELDS_INVALID = "<%= I18n.t('solidus_paypal_braintree.errors.invalid_fields')%>"
-  BraintreeError.HOSTED_FIELDS_FAILED_TOKENIZATION = "<%= I18n.t('solidus_paypal_braintree.errors.invalid_card')%>"
-  BraintreeError.HOSTED_FIELDS_TOKENIZATION_NETWORK_ERROR = "<%= I18n.t('solidus_paypal_braintree.errors.network_error')%>"
-  BraintreeError.HOSTED_FIELDS_FIELD_DUPLICATE_IFRAME = "<%= I18n.t('solidus_paypal_braintree.errors.duplicate_iframe')%>"
-  BraintreeError.HOSTED_FIELDS_TOKENIZATION_FAIL_ON_DUPLICATE = "<%= I18n.t('solidus_paypal_braintree.errors.fail_on_duplicate')%>"
-  BraintreeError.HOSTED_FIELDS_TOKENIZATION_CVV_VERIFICATION_FAILED = "<%= I18n.t('solidus_paypal_braintree.errors.cvv_verification_failed')%>"
-  BraintreeError.THREEDS_AUTHENTICATION_FAILED = "<%= t('solidus_paypal_braintree.errors.threeds.authentication_failed') %>";
-  BraintreeError.THREEDS_CARDINAL_SDK_ERROR = "<%= t('solidus_paypal_braintree.errors.threeds.authentication_failed') %>";
+  BraintreeError = {
+    DEFAULT: "<%= I18n.t('solidus_paypal_braintree.errors.default_error')%>",
+    PAYPAL_POPUP_CLOSED: "<%= I18n.t('solidus_paypal_braintree.errors.paypal_popup_closed') %>",
+    HOSTED_FIELDS_FIELDS_EMPTY: "<%= I18n.t('solidus_paypal_braintree.errors.empty_fields')%>",
+    HOSTED_FIELDS_FIELDS_INVALID: "<%= I18n.t('solidus_paypal_braintree.errors.invalid_fields')%>",
+    HOSTED_FIELDS_FAILED_TOKENIZATION: "<%= I18n.t('solidus_paypal_braintree.errors.invalid_card')%>",
+    HOSTED_FIELDS_TOKENIZATION_NETWORK_ERROR: "<%= I18n.t('solidus_paypal_braintree.errors.network_error')%>",
+    HOSTED_FIELDS_FIELD_DUPLICATE_IFRAME: "<%= I18n.t('solidus_paypal_braintree.errors.duplicate_iframe')%>",
+    HOSTED_FIELDS_TOKENIZATION_FAIL_ON_DUPLICATE: "<%= I18n.t('solidus_paypal_braintree.errors.fail_on_duplicate')%>",
+    HOSTED_FIELDS_TOKENIZATION_CVV_VERIFICATION_FAILED: "<%= I18n.t('solidus_paypal_braintree.errors.cvv_verification_failed')%>",
+    THREEDS_AUTHENTICATION_FAILED: "<%= I18n.t('solidus_paypal_braintree.errors.threeds.authentication_failed') %>",
+    THREEDS_CARDINAL_SDK_ERROR: "<%= I18n.t('solidus_paypal_braintree.errors.threeds.authentication_failed') %>",
+
+    getErrorFromSlug: function(slug) {
+      error = BraintreeError.DEFAULT
+      if (slug in BraintreeError)
+        error = BraintreeError[slug]
+      return error
+    }
+  }
 </script>

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

@@ -1,22 +1,22 @@
 <% content_for :head do %>
-  <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>
+  <script src="https://js.braintreegateway.com/web/3.67.0/js/client.min.js" async></script>
+  <script src="https://js.braintreegateway.com/web/3.67.0/js/data-collector.min.js" async></script>
 
   <% if current_store.braintree_configuration.paypal? %>
-    <script src="https://js.braintreegateway.com/web/3.67.0/js/paypal-checkout.min.js"></script>
+    <script src="https://js.braintreegateway.com/web/3.67.0/js/paypal-checkout.min.js" async></script>
   <% end %>
 
   <% if current_store.braintree_configuration.credit_card? %>
-    <script src="https://js.braintreegateway.com/web/3.67.0/js/hosted-fields.min.js"></script>
+    <script src="https://js.braintreegateway.com/web/3.67.0/js/hosted-fields.min.js" async></script>
 
     <% if current_store.braintree_configuration.three_d_secure? %>
-      <script src="https://js.braintreegateway.com/web/3.67.0/js/three-d-secure.min.js"></script>
+      <script src="https://js.braintreegateway.com/web/3.67.0/js/three-d-secure.min.js" async></script>
     <% end %>
   <% end %>
 
   <% if current_store.braintree_configuration.apple_pay? %>
-    <script src="https://js.braintreegateway.com/web/3.67.0/js/apple-pay.min.js"></script>
+    <script src="https://js.braintreegateway.com/web/3.67.0/js/apple-pay.min.js" async></script>
   <% end %>
 
-  <%= javascript_include_tag "solidus_paypal_braintree/checkout" %>
+  <%= javascript_include_tag "solidus_paypal_braintree/checkout", async: true %>
 <% end %>

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

@@ -3,6 +3,8 @@
 <div id="paypal-button"></div>
 <div data-pp-message data-pp-placement="payment" data-pp-amount="<%= current_order.total %>"></div>
 
+<%= render "spree/shared/braintree_errors" %>
+
 <script>
   var paypalOptions = {
     flow: '<%= SolidusPaypalBraintree::Gateway.first.preferred_paypal_flow %>',
@@ -25,12 +27,4 @@
   var options = {
     restart_checkout: true
   }
-
-  var button = new SolidusPaypalBraintree.createPaypalButton(
-    document.querySelector("#paypal-button"),
-    paypalOptions,
-    options
-  )
-
-  button.initialize();
 </script>

lib/views/frontend/spree/shared/_paypal_checkout_button.html.erb

@@ -24,7 +24,4 @@
       messaging: '<%= paypal_button_preference(:paypal_button_messaging, store: current_store) %>'
     }
   }
-
-  var button = new SolidusPaypalBraintree.createPaypalButton(document.querySelector("#paypal-button"), paypalOptions);
-  button.initialize();
 </script>