Merge branch 'trunk' into PCP-1393-update-to-vault-v-3

modules/ppcp-button/resources/js/button.js

@@ -279,11 +279,12 @@ document.addEventListener(
         });
 
         let bootstrapped = false;
+        let failed = false;
 
         hideOrderButtonIfPpcpGateway();
 
         jQuery(document.body).on('updated_checkout payment_method_selected', () => {
-            if (bootstrapped) {
+            if (bootstrapped || failed) {
                 return;
             }
 
@@ -294,6 +295,12 @@ document.addEventListener(
             bootstrapped = true;
 
             bootstrap();
+        }, () => {
+            failed = true;
+
+            setVisibleByClass(ORDER_BUTTON_SELECTOR, true, 'ppcp-hidden');
+            buttonsSpinner.unblock();
+            cardsSpinner.unblock();
         });
     },
 );

modules/ppcp-button/resources/js/modules/DataClientIdAttributeHandler.js

@@ -26,7 +26,7 @@ const storeToken = (token) => {
     sessionStorage.setItem(storageKey, JSON.stringify(token));
 }
 
-const dataClientIdAttributeHandler = (scriptOptions, config, callback) => {
+const dataClientIdAttributeHandler = (scriptOptions, config, callback, errorCallback = null) => {
     fetch(config.endpoint, {
         method: 'POST',
         headers: {
@@ -51,6 +51,10 @@ const dataClientIdAttributeHandler = (scriptOptions, config, callback) => {
             if (typeof callback === 'function') {
                 callback(paypal);
             }
+        }).catch(err => {
+            if (typeof errorCallback === 'function') {
+                errorCallback(err);
+            }
         });
     });
 }

modules/ppcp-button/resources/js/modules/Helper/ScriptLoading.js

@@ -7,10 +7,11 @@ import {keysToCamelCase} from "./Utils";
 // This component may be used by multiple modules. This assures that options are shared between all instances.
 let options = window.ppcpWidgetBuilder = window.ppcpWidgetBuilder || {
     isLoading: false,
-    onLoadedCallbacks: []
+    onLoadedCallbacks: [],
+    onErrorCallbacks: [],
 };
 
-export const loadPaypalScript = (config, onLoaded) => {
+export const loadPaypalScript = (config, onLoaded, onError = null) => {
     // If PayPal is already loaded call the onLoaded callback and return.
     if (typeof paypal !== 'undefined') {
         onLoaded();
@@ -19,6 +20,9 @@ export const loadPaypalScript = (config, onLoaded) => {
 
     // Add the onLoaded callback to the onLoadedCallbacks stack.
     options.onLoadedCallbacks.push(onLoaded);
+    if (onError) {
+        options.onErrorCallbacks.push(onError);
+    }
 
     // Return if it's still loading.
     if (options.isLoading) {
@@ -26,6 +30,12 @@ export const loadPaypalScript = (config, onLoaded) => {
     }
     options.isLoading = true;
 
+    const resetState = () => {
+        options.isLoading = false;
+        options.onLoadedCallbacks = [];
+        options.onErrorCallbacks = [];
+    }
+
     // Callback to be called once the PayPal script is loaded.
     const callback = (paypal) => {
         widgetBuilder.setPaypal(paypal);
@@ -34,8 +44,14 @@ export const loadPaypalScript = (config, onLoaded) => {
             onLoadedCallback();
         }
 
-        options.isLoading = false;
-        options.onLoadedCallbacks = [];
+        resetState();
+    }
+    const errorCallback = (err) => {
+        for (const onErrorCallback of options.onErrorCallbacks) {
+            onErrorCallback(err);
+        }
+
+        resetState();
     }
 
     // Build the PayPal script options.
@@ -44,7 +60,7 @@ export const loadPaypalScript = (config, onLoaded) => {
 
     // Load PayPal script for special case with data-client-token
     if (config.data_client_id.set_attribute) {
-        dataClientIdAttributeHandler(scriptOptions, config.data_client_id, callback);
+        dataClientIdAttributeHandler(scriptOptions, config.data_client_id, callback, errorCallback);
         return;
     }
 
@@ -54,8 +70,16 @@ export const loadPaypalScript = (config, onLoaded) => {
         scriptOptions['data-user-id-token'] = userIdToken;
     }
 
-    // Load PayPal script.
-    loadScript(scriptOptions).then(callback);
+    // Load PayPal script
+    loadScript(scriptOptions)
+        .then(callback)
+        .catch(errorCallback);
+}
+
+export const loadPaypalScriptPromise = (config) => {
+    return new Promise((resolve, reject) => {
+        loadPaypalScript(config, resolve, reject)
+    });
 }
 
 export const loadPaypalJsScript = (options, buttons, container) => {

modules/ppcp-button/resources/js/modules/Helper/Style.js

@@ -0,0 +1,20 @@
+export const normalizeStyleForFundingSource = (style, fundingSource) => {
+    const commonProps = {};
+    ['shape', 'height'].forEach(prop => {
+        if (style[prop]) {
+            commonProps[prop] = style[prop];
+        }
+    });
+
+    switch (fundingSource) {
+        case 'paypal':
+            return style;
+        case 'paylater':
+            return {
+                color: style.color,
+                ...commonProps
+            };
+        default:
+            return commonProps;
+    }
+}

modules/ppcp-button/resources/js/modules/Renderer/Renderer.js

@@ -2,6 +2,7 @@ import merge from "deepmerge";
 import {loadScript} from "@paypal/paypal-js";
 import {keysToCamelCase} from "../Helper/Utils";
 import widgetBuilder from "./WidgetBuilder";
+import {normalizeStyleForFundingSource} from "../Helper/Style";
 
 class Renderer {
     constructor(creditCardRenderer, defaultSettings, onSmartButtonClick, onSmartButtonsInit) {
@@ -36,16 +37,7 @@ class Renderer {
         } else {
             // render each button separately
             for (const fundingSource of paypal.getFundingSources().filter(s => !(s in enabledSeparateGateways))) {
-                let style = settings.button.style;
-                if (fundingSource !== 'paypal') {
-                    style = {
-                        shape: style.shape,
-                        color: style.color,
-                    };
-                    if (fundingSource !== 'paylater') {
-                        delete style.color;
-                    }
-                }
+                const style = normalizeStyleForFundingSource(settings.button.style, fundingSource);
 
                 this.renderButtons(
                     settings.button.wrapper,