Fix the Apple Pay button in the editor

modules/ppcp-applepay/resources/css/styles.scss

@@ -46,4 +46,10 @@
 			}
 		}
 	}
+
+	.ppcp-button-applepay {
+		apple-pay-button {
+			display: block;
+		}
+	}
 }

modules/ppcp-applepay/resources/js/ApplepayManagerBlockEditor.js

@@ -0,0 +1,36 @@
+import ApplepayButton from "./ApplepayButton";
+
+class ApplepayManagerBlockEditor {
+
+    constructor(buttonConfig, ppcpConfig) {
+        this.buttonConfig = buttonConfig;
+        this.ppcpConfig = ppcpConfig;
+        this.applePayConfig = null;
+    }
+
+    init() {
+        (async () => {
+            await this.config();
+        })();
+    }
+
+    async config() {
+        try {
+            this.applePayConfig = await paypal.Applepay().config();
+
+            const button = new ApplepayButton(
+                this.ppcpConfig.context,
+                null,
+                this.buttonConfig,
+                this.ppcpConfig,
+            );
+
+            button.init(this.applePayConfig);
+
+        } catch (error) {
+            console.error('Failed to initialize Apple Pay:', error);
+        }
+    }
+}
+
+export default ApplepayManagerBlockEditor;

modules/ppcp-applepay/resources/js/boot-block.js

@@ -2,9 +2,10 @@ import {useEffect, useState} from '@wordpress/element';
 import {registerExpressPaymentMethod} from '@woocommerce/blocks-registry';
 import {loadPaypalScript} from '../../../ppcp-button/resources/js/modules/Helper/ScriptLoading'
 import {cartHasSubscriptionProducts} from '../../../ppcp-blocks/resources/js/Helper/Subscription'
-import ApplepayManager from "./ApplepayManager";
 import {loadCustomScript} from "@paypal/paypal-js";
 import CheckoutHandler from "./Context/CheckoutHandler";
+import ApplepayManager from "./ApplepayManager";
+import ApplepayManagerBlockEditor from "./ApplepayManagerBlockEditor";
 
 const ppcpData = wc.wcSettings.getSetting('ppcp-gateway_data');
 const ppcpConfig = ppcpData.scriptData;
@@ -16,13 +17,14 @@ if (typeof window.PayPalCommerceGateway === 'undefined') {
     window.PayPalCommerceGateway = ppcpConfig;
 }
 
-const ApplePayComponent = () => {
+const ApplePayComponent = ( props ) => {
     const [bootstrapped, setBootstrapped] = useState(false);
     const [paypalLoaded, setPaypalLoaded] = useState(false);
     const [applePayLoaded, setApplePayLoaded] = useState(false);
 
     const bootstrap = function () {
-        const manager = new ApplepayManager(buttonConfig, ppcpConfig);
+        const ManagerClass = props.isEditing ? ApplepayManagerBlockEditor : ApplepayManager;
+        const manager = new ManagerClass(buttonConfig, ppcpConfig);
         manager.init();
     };
 
@@ -32,6 +34,8 @@ const ApplePayComponent = () => {
             setApplePayLoaded(true);
         });
 
+        ppcpConfig.url_params.components += ',applepay';
+
         // Load PayPal
         loadPaypalScript(ppcpConfig, () => {
             setPaypalLoaded(true);
@@ -46,7 +50,10 @@ const ApplePayComponent = () => {
     }, [paypalLoaded, applePayLoaded]);
 
     return (
-        <div id={buttonConfig.button.wrapper.replace('#', '')} className="ppcp-button-apm ppcp-button-applepay"></div>
+        <div
+            id={buttonConfig.button.wrapper.replace('#', '')}
+            className="ppcp-button-apm ppcp-button-applepay">
+        </div>
     );
 }
 

modules/ppcp-applepay/src/ApplepayModule.php

@@ -92,6 +92,7 @@ class ApplepayModule implements ModuleInterface {
 				}
 
 				$module->load_admin_assets( $c, $apple_payment_method );
+				$module->load_block_editor_assets( $c, $apple_payment_method );
 			},
 			1
 		);
@@ -177,6 +178,13 @@ class ApplepayModule implements ModuleInterface {
 				}
 			}
 		);
+		add_action(
+			'enqueue_block_editor_assets',
+			function () use ( $c, $button ) {
+				$button->enqueue_admin_styles();
+			}
+		);
+
 		add_action(
 			'woocommerce_blocks_payment_method_type_registration',
 			function( PaymentMethodRegistry $payment_method_registry ) use ( $c ): void {
@@ -207,6 +215,7 @@ class ApplepayModule implements ModuleInterface {
 				 * @psalm-suppress UndefinedInterfaceMethod
 				 */
 				$button->enqueue_admin();
+				$button->enqueue_admin_styles();
 			}
 		);
 
@@ -222,6 +231,21 @@ class ApplepayModule implements ModuleInterface {
 		);
 	}
 
+	public function load_block_editor_assets( ContainerInterface $c, ApplePayButton $button ): void {
+		// Enqueue backend scripts.
+		add_action(
+			'enqueue_block_editor_assets',
+			static function () use ( $c, $button ) {
+				/**
+				 * Should add this to the ButtonInterface.
+				 *
+				 * @psalm-suppress UndefinedInterfaceMethod
+				 */
+				$button->enqueue_admin_styles();
+			}
+		);
+	}
+
 	/**
 	 * Renders the Apple Pay buttons in the enabled places.
 	 *

modules/ppcp-applepay/src/Assets/ApplePayButton.php

@@ -1044,17 +1044,9 @@ class ApplePayButton implements ButtonInterface {
 	}
 
 	/**
-	 * Enqueues scripts/styles for admin.
+	 * Enqueues scripts for admin.
 	 */
 	public function enqueue_admin(): void {
-		wp_register_style(
-			'wc-ppcp-applepay-admin',
-			untrailingslashit( $this->module_url ) . '/assets/css/styles.css',
-			array(),
-			$this->version
-		);
-		wp_enqueue_style( 'wc-ppcp-applepay-admin' );
-
 		wp_register_script(
 			'wc-ppcp-applepay-admin',
 			untrailingslashit( $this->module_url ) . '/assets/js/boot-admin.js',
@@ -1071,6 +1063,19 @@ class ApplePayButton implements ButtonInterface {
 		);
 	}
 
+	/**
+	 * Enqueues styles for admin.
+	 */
+	public function enqueue_admin_styles(): void {
+		wp_register_style(
+			'wc-ppcp-applepay-admin',
+			untrailingslashit( $this->module_url ) . '/assets/css/styles.css',
+			array(),
+			$this->version
+		);
+		wp_enqueue_style( 'wc-ppcp-applepay-admin' );
+	}
+
 	/**
 	 * Returns the script data.
 	 *

modules/ppcp-applepay/src/Assets/BlocksPaymentMethod.php

@@ -103,12 +103,18 @@ class BlocksPaymentMethod extends AbstractPaymentMethodType {
 	public function get_payment_method_data() {
 		$paypal_data = $this->paypal_payment_method->get_payment_method_data();
 
+		if ( is_admin() ) {
+			$script_data = $this->button->script_data_for_admin();
+		} else {
+			$script_data = $this->button->script_data();
+		}
+
 		return array(
 			'id'          => $this->name,
 			'title'       => $paypal_data['title'], // TODO : see if we should use another.
 			'description' => $paypal_data['description'], // TODO : see if we should use another.
 			'enabled'     => $paypal_data['enabled'], // This button is enabled when PayPal buttons are.
-			'scriptData'  => $this->button->script_data(),
+			'scriptData'  => $script_data,
 		);
 	}
 }