🥅 Catch several JS/API related preview issues

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

@@ -34,6 +34,7 @@ class PreviewButtonManager {
         this.isEnabled = true;
         this.buttons = {};
         this.apiConfig = null;
+        this.apiError = '';
 
         this.#onInit = new Promise(resolve => {
             this.#onInitResolver = resolve;
@@ -79,6 +80,33 @@ class PreviewButtonManager {
         throw new Error('The "createButtonInstance" method must be implemented by the derived class');
     }
 
+    /**
+     * In case the button SDK could not be loaded from PayPal, we display this dummy button
+     * instead of keeping the preview box empty.
+     *
+     * This dummy is only visible on the admin side, and not rendered on the front-end.
+     *
+     * @todo Consider refactoring this into a new class that extends the PreviewButton class.
+     * @param wrapperId
+     * @return {any}
+     */
+    createDummy(wrapperId) {
+        const elButton = document.createElement('div');
+        elButton.classList.add('ppcp-button-apm', 'ppcp-button-dummy');
+        elButton.innerHTML = `<span>${this.apiError ?? 'Not Available'}</span>`;
+
+        document.querySelector(wrapperId).appendChild(elButton);
+
+        const instDummy = {
+            setDynamic: () => instDummy,
+            setPpcpConfig: () => instDummy,
+            render: () => {},
+            remove: () => {},
+        };
+
+        return instDummy;
+    }
+
     registerEventListeners() {
         jQuery(document).one('DOMContentLoaded', this.bootstrap);
 
@@ -116,7 +144,7 @@ class PreviewButtonManager {
         const MAX_WAIT_TIME = 10000; // Fail, if PayPal SDK is unavailable after 10 seconds.
         const RESOLVE_INTERVAL = 200;
 
-        if (!this.buttonConfig || !widgetBuilder) {
+        if (!this.buttonConfig?.sdk_url || !widgetBuilder) {
             this.error('Button could not be configured.');
             return;
         }
@@ -164,7 +192,13 @@ class PreviewButtonManager {
          (a) the SDK custom-script
          (b) the `widgetBuilder.paypal` object
          */
-        this.apiConfig = await this.fetchConfig(widgetBuilder.paypal);
+        try {
+            this.apiConfig = await this.fetchConfig(widgetBuilder.paypal);
+        } catch (error) {
+            this.apiConfig = null;
+        }
+
+        // Avoid errors when there was a problem with loading the SDK.
         await this.#onInitResolver();
 
         this.#onInit = null;
@@ -246,7 +280,14 @@ class PreviewButtonManager {
     _addButton(id, ppcpConfig) {
         const createButton = () => {
             if (!this.buttons[id]) {
-                this.buttons[id] = this.createButtonInstance(id).setButtonConfig(this.buttonConfig);
+                let newInst;
+                if (this.apiConfig && 'object' === typeof this.apiConfig) {
+                    newInst = this.createButtonInstance(id).setButtonConfig(this.buttonConfig);
+                } else {
+                    newInst = this.createDummy(id);
+                }
+
+                this.buttons[id] = newInst;
             }
 
             this._configureButton(id, ppcpConfig);

modules/ppcp-googlepay/resources/js/boot-admin.js

@@ -42,7 +42,14 @@ class GooglePayPreviewButtonManager extends PreviewButtonManager {
             return {};
         }
 
-        return await apiMethod();
+        try {
+            return await apiMethod();
+        } catch (error) {
+            if (error.message.includes('Not Eligible')) {
+                this.apiError = 'Not Eligible';
+            }
+            return null;
+        }
     }
 
     /**

modules/ppcp-wc-gateway/resources/css/common.scss

@@ -28,6 +28,13 @@ $background-ident-color: #fbfbfb;
 
 .ppcp-button-apm {
 	@include apm-button.button;
+
+	&.ppcp-button-dummy {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: #0001;
+	}
 }
 
 .ppcp-status-text {

modules/ppcp-wc-gateway/resources/css/gateway-settings.scss

@@ -1,7 +1,8 @@
 .ppcp-settings-field-preview {
 	position: relative;
 
-	td {
+	> td {
+		position: relative;
 		padding-left: 0;
 		padding-right: 0;
 	}