diff --git a/modules/ppcp-applepay/resources/js/Preview/ApplePayPreviewButton.js b/modules/ppcp-applepay/resources/js/Preview/ApplePayPreviewButton.js
new file mode 100644
index 000000000..6e3f721da
--- /dev/null
+++ b/modules/ppcp-applepay/resources/js/Preview/ApplePayPreviewButton.js
@@ -0,0 +1,61 @@
+import ApplepayButton from '../ApplepayButton';
+import PreviewButton from '../../../../ppcp-button/resources/js/modules/Renderer/PreviewButton';
+
+/**
+ * A single Apple Pay preview button instance.
+ */
+export default class ApplePayPreviewButton extends PreviewButton {
+	constructor( args ) {
+		super( args );
+
+		this.selector = `${ args.selector }ApplePay`;
+		this.defaultAttributes = {
+			button: {
+				type: 'pay',
+				color: 'black',
+				lang: 'en',
+			},
+		};
+	}
+
+	createNewWrapper() {
+		const element = super.createNewWrapper();
+		element.addClass( 'ppcp-button-apm ppcp-button-applepay' );
+
+		return element;
+	}
+
+	createButton( buttonConfig ) {
+		const button = new ApplepayButton(
+			'preview',
+			null,
+			buttonConfig,
+			this.ppcpConfig
+		);
+
+		button.init( this.apiConfig );
+	}
+
+	/**
+	 * Merge form details into the config object for preview.
+	 * Mutates the previewConfig object; no return value.
+	 * @param buttonConfig
+	 * @param ppcpConfig
+	 */
+	dynamicPreviewConfig( buttonConfig, ppcpConfig ) {
+		// The Apple Pay button expects the "wrapper" to be an ID without `#` prefix!
+		buttonConfig.button.wrapper = buttonConfig.button.wrapper.replace(
+			/^#/,
+			''
+		);
+
+		// Merge the current form-values into the preview-button configuration.
+		if ( ppcpConfig.button ) {
+			buttonConfig.button.type = ppcpConfig.button.style.type;
+			buttonConfig.button.color = ppcpConfig.button.style.color;
+			buttonConfig.button.lang =
+				ppcpConfig.button.style?.lang ||
+				ppcpConfig.button.style.language;
+		}
+	}
+}
diff --git a/modules/ppcp-applepay/resources/js/Preview/ApplePayPreviewButtonManager.js b/modules/ppcp-applepay/resources/js/Preview/ApplePayPreviewButtonManager.js
new file mode 100644
index 000000000..43ecc37b8
--- /dev/null
+++ b/modules/ppcp-applepay/resources/js/Preview/ApplePayPreviewButtonManager.js
@@ -0,0 +1,49 @@
+import PreviewButtonManager from '../../../../ppcp-button/resources/js/modules/Renderer/PreviewButtonManager';
+import ApplePayPreviewButton from './ApplePayPreviewButton';
+
+/**
+ * Manages all Apple Pay preview buttons on this page.
+ */
+export default class ApplePayPreviewButtonManager extends PreviewButtonManager {
+	constructor() {
+		const args = {
+			methodName: 'ApplePay',
+			buttonConfig: window.wc_ppcp_applepay_admin,
+		};
+
+		super( args );
+	}
+
+	/**
+	 * Responsible for fetching and returning the PayPal configuration object for this payment
+	 * method.
+	 *
+	 * @param {{}} payPal - The PayPal SDK object provided by WidgetBuilder.
+	 * @return {Promise<{}>}
+	 */
+	async fetchConfig( payPal ) {
+		const apiMethod = payPal?.Applepay()?.config;
+
+		if ( ! apiMethod ) {
+			this.error(
+				'configuration object cannot be retrieved from PayPal'
+			);
+			return {};
+		}
+
+		return await apiMethod();
+	}
+
+	/**
+	 * This method is responsible for creating a new PreviewButton instance and returning it.
+	 *
+	 * @param {string} wrapperId - CSS ID of the wrapper element.
+	 * @return {ApplePayPreviewButton}
+	 */
+	createButtonInstance( wrapperId ) {
+		return new ApplePayPreviewButton( {
+			selector: wrapperId,
+			apiConfig: this.apiConfig,
+		} );
+	}
+}
diff --git a/modules/ppcp-applepay/resources/js/boot-admin.js b/modules/ppcp-applepay/resources/js/boot-admin.js
index 080d7c8aa..e92c03cdf 100644
--- a/modules/ppcp-applepay/resources/js/boot-admin.js
+++ b/modules/ppcp-applepay/resources/js/boot-admin.js
@@ -1,6 +1,4 @@
-import ApplepayButton from './ApplepayButton';
-import PreviewButton from '../../../ppcp-button/resources/js/modules/Renderer/PreviewButton';
-import PreviewButtonManager from '../../../ppcp-button/resources/js/modules/Renderer/PreviewButtonManager';
+import ApplePayPreviewButtonManager from './Preview/ApplePayPreviewButtonManager';
 
 /**
  * Accessor that creates and returns a single PreviewButtonManager instance.
@@ -14,111 +12,5 @@ const buttonManager = () => {
 	return ApplePayPreviewButtonManager.instance;
 };
 
-/**
- * Manages all Apple Pay preview buttons on this page.
- */
-class ApplePayPreviewButtonManager extends PreviewButtonManager {
-	constructor() {
-		const args = {
-			methodName: 'ApplePay',
-			buttonConfig: window.wc_ppcp_applepay_admin,
-		};
-
-		super( args );
-	}
-
-	/**
-	 * Responsible for fetching and returning the PayPal configuration object for this payment
-	 * method.
-	 *
-	 * @param {{}} payPal - The PayPal SDK object provided by WidgetBuilder.
-	 * @return {Promise<{}>}
-	 */
-	async fetchConfig( payPal ) {
-		const apiMethod = payPal?.Applepay()?.config;
-
-		if ( ! apiMethod ) {
-			this.error(
-				'configuration object cannot be retrieved from PayPal'
-			);
-			return {};
-		}
-
-		return await apiMethod();
-	}
-
-	/**
-	 * This method is responsible for creating a new PreviewButton instance and returning it.
-	 *
-	 * @param {string} wrapperId - CSS ID of the wrapper element.
-	 * @return {ApplePayPreviewButton}
-	 */
-	createButtonInstance( wrapperId ) {
-		return new ApplePayPreviewButton( {
-			selector: wrapperId,
-			apiConfig: this.apiConfig,
-		} );
-	}
-}
-
-/**
- * A single Apple Pay preview button instance.
- */
-class ApplePayPreviewButton extends PreviewButton {
-	constructor( args ) {
-		super( args );
-
-		this.selector = `${ args.selector }ApplePay`;
-		this.defaultAttributes = {
-			button: {
-				type: 'pay',
-				color: 'black',
-				lang: 'en',
-			},
-		};
-	}
-
-	createNewWrapper() {
-		const element = super.createNewWrapper();
-		element.addClass( 'ppcp-button-applepay' );
-
-		return element;
-	}
-
-	createButton( buttonConfig ) {
-		const button = new ApplepayButton(
-			'preview',
-			null,
-			buttonConfig,
-			this.ppcpConfig
-		);
-
-		button.init( this.apiConfig );
-	}
-
-	/**
-	 * Merge form details into the config object for preview.
-	 * Mutates the previewConfig object; no return value.
-	 * @param buttonConfig
-	 * @param ppcpConfig
-	 */
-	dynamicPreviewConfig( buttonConfig, ppcpConfig ) {
-		// The Apple Pay button expects the "wrapper" to be an ID without `#` prefix!
-		buttonConfig.button.wrapper = buttonConfig.button.wrapper.replace(
-			/^#/,
-			''
-		);
-
-		// Merge the current form-values into the preview-button configuration.
-		if ( ppcpConfig.button ) {
-			buttonConfig.button.type = ppcpConfig.button.style.type;
-			buttonConfig.button.color = ppcpConfig.button.style.color;
-			buttonConfig.button.lang =
-				ppcpConfig.button.style?.lang ||
-				ppcpConfig.button.style.language;
-		}
-	}
-}
-
 // Initialize the preview button manager.
 buttonManager();
diff --git a/modules/ppcp-button/resources/js/modules/Renderer/PreviewButton.js b/modules/ppcp-button/resources/js/modules/Renderer/PreviewButton.js
index cec951927..ac189e89e 100644
--- a/modules/ppcp-button/resources/js/modules/Renderer/PreviewButton.js
+++ b/modules/ppcp-button/resources/js/modules/Renderer/PreviewButton.js
@@ -30,7 +30,7 @@ class PreviewButton {
 	 */
 	createNewWrapper() {
 		const previewId = this.selector.replace( '#', '' );
-		const previewClass = 'ppcp-button-apm';
+		const previewClass = 'ppcp-preview-button';
 
 		return jQuery( `<div id='${ previewId }' class='${ previewClass }'>` );
 	}
diff --git a/modules/ppcp-button/resources/js/modules/Renderer/PreviewButtonManager.js b/modules/ppcp-button/resources/js/modules/Renderer/PreviewButtonManager.js
index 42e715904..9cb9fa81f 100644
--- a/modules/ppcp-button/resources/js/modules/Renderer/PreviewButtonManager.js
+++ b/modules/ppcp-button/resources/js/modules/Renderer/PreviewButtonManager.js
@@ -95,7 +95,7 @@ class PreviewButtonManager {
 	 */
 	createDummy( wrapperId ) {
 		const elButton = document.createElement( 'div' );
-		elButton.classList.add( 'ppcp-button-apm', 'ppcp-button-dummy' );
+		elButton.classList.add( 'ppcp-preview-button', 'ppcp-button-dummy' );
 		elButton.innerHTML = `<span>${
 			this.apiError ?? 'Not Available'
 		}</span>`;
diff --git a/modules/ppcp-googlepay/resources/js/Preview/GooglePayPreviewButton.js b/modules/ppcp-googlepay/resources/js/Preview/GooglePayPreviewButton.js
new file mode 100644
index 000000000..7bd3ffa7f
--- /dev/null
+++ b/modules/ppcp-googlepay/resources/js/Preview/GooglePayPreviewButton.js
@@ -0,0 +1,53 @@
+import GooglepayButton from '../GooglepayButton';
+import PreviewButton from '../../../../ppcp-button/resources/js/modules/Renderer/PreviewButton';
+
+/**
+ * A single GooglePay preview button instance.
+ */
+export default class GooglePayPreviewButton extends PreviewButton {
+	constructor( args ) {
+		super( args );
+
+		this.selector = `${ args.selector }GooglePay`;
+		this.defaultAttributes = {
+			button: {
+				style: {
+					type: 'pay',
+					color: 'black',
+					language: 'en',
+				},
+			},
+		};
+	}
+
+	createNewWrapper() {
+		const element = super.createNewWrapper();
+		element.addClass( 'ppcp-button-apm ppcp-button-googlepay' );
+
+		return element;
+	}
+
+	createButton( buttonConfig ) {
+		const button = new GooglepayButton(
+			'preview',
+			null,
+			buttonConfig,
+			this.ppcpConfig
+		);
+
+		button.init( this.apiConfig );
+	}
+
+	/**
+	 * Merge form details into the config object for preview.
+	 * Mutates the previewConfig object; no return value.
+	 * @param buttonConfig
+	 * @param ppcpConfig
+	 */
+	dynamicPreviewConfig( buttonConfig, ppcpConfig ) {
+		// Merge the current form-values into the preview-button configuration.
+		if ( ppcpConfig.button && buttonConfig.button ) {
+			Object.assign( buttonConfig.button.style, ppcpConfig.button.style );
+		}
+	}
+}
diff --git a/modules/ppcp-googlepay/resources/js/Preview/GooglePayPreviewButtonManager.js b/modules/ppcp-googlepay/resources/js/Preview/GooglePayPreviewButtonManager.js
new file mode 100644
index 000000000..0aaef0396
--- /dev/null
+++ b/modules/ppcp-googlepay/resources/js/Preview/GooglePayPreviewButtonManager.js
@@ -0,0 +1,56 @@
+import PreviewButtonManager from '../../../../ppcp-button/resources/js/modules/Renderer/PreviewButtonManager';
+import GooglePayPreviewButton from './GooglePayPreviewButton';
+
+/**
+ * Manages all GooglePay preview buttons on this page.
+ */
+export default class GooglePayPreviewButtonManager extends PreviewButtonManager {
+	constructor() {
+		const args = {
+			methodName: 'GooglePay',
+			buttonConfig: window.wc_ppcp_googlepay_admin,
+		};
+
+		super( args );
+	}
+
+	/**
+	 * Responsible for fetching and returning the PayPal configuration object for this payment
+	 * method.
+	 *
+	 * @param {{}} payPal - The PayPal SDK object provided by WidgetBuilder.
+	 * @return {Promise<{}>}
+	 */
+	async fetchConfig( payPal ) {
+		const apiMethod = payPal?.Googlepay()?.config;
+
+		if ( ! apiMethod ) {
+			this.error(
+				'configuration object cannot be retrieved from PayPal'
+			);
+			return {};
+		}
+
+		try {
+			return await apiMethod();
+		} catch ( error ) {
+			if ( error.message.includes( 'Not Eligible' ) ) {
+				this.apiError = 'Not Eligible';
+			}
+			return null;
+		}
+	}
+
+	/**
+	 * This method is responsible for creating a new PreviewButton instance and returning it.
+	 *
+	 * @param {string} wrapperId - CSS ID of the wrapper element.
+	 * @return {GooglePayPreviewButton}
+	 */
+	createButtonInstance( wrapperId ) {
+		return new GooglePayPreviewButton( {
+			selector: wrapperId,
+			apiConfig: this.apiConfig,
+		} );
+	}
+}
diff --git a/modules/ppcp-googlepay/resources/js/boot-admin.js b/modules/ppcp-googlepay/resources/js/boot-admin.js
index 41cace0c0..953a6088e 100644
--- a/modules/ppcp-googlepay/resources/js/boot-admin.js
+++ b/modules/ppcp-googlepay/resources/js/boot-admin.js
@@ -1,6 +1,4 @@
-import GooglepayButton from './GooglepayButton';
-import PreviewButton from '../../../ppcp-button/resources/js/modules/Renderer/PreviewButton';
-import PreviewButtonManager from '../../../ppcp-button/resources/js/modules/Renderer/PreviewButtonManager';
+import GooglePayPreviewButtonManager from './Preview/GooglePayPreviewButtonManager';
 
 /**
  * Accessor that creates and returns a single PreviewButtonManager instance.
@@ -14,110 +12,5 @@ const buttonManager = () => {
 	return GooglePayPreviewButtonManager.instance;
 };
 
-/**
- * Manages all GooglePay preview buttons on this page.
- */
-class GooglePayPreviewButtonManager extends PreviewButtonManager {
-	constructor() {
-		const args = {
-			methodName: 'GooglePay',
-			buttonConfig: window.wc_ppcp_googlepay_admin,
-		};
-
-		super( args );
-	}
-
-	/**
-	 * Responsible for fetching and returning the PayPal configuration object for this payment
-	 * method.
-	 *
-	 * @param {{}} payPal - The PayPal SDK object provided by WidgetBuilder.
-	 * @return {Promise<{}>}
-	 */
-	async fetchConfig( payPal ) {
-		const apiMethod = payPal?.Googlepay()?.config;
-
-		if ( ! apiMethod ) {
-			this.error(
-				'configuration object cannot be retrieved from PayPal'
-			);
-			return {};
-		}
-
-		try {
-			return await apiMethod();
-		} catch ( error ) {
-			if ( error.message.includes( 'Not Eligible' ) ) {
-				this.apiError = 'Not Eligible';
-			}
-			return null;
-		}
-	}
-
-	/**
-	 * This method is responsible for creating a new PreviewButton instance and returning it.
-	 *
-	 * @param {string} wrapperId - CSS ID of the wrapper element.
-	 * @return {GooglePayPreviewButton}
-	 */
-	createButtonInstance( wrapperId ) {
-		return new GooglePayPreviewButton( {
-			selector: wrapperId,
-			apiConfig: this.apiConfig,
-		} );
-	}
-}
-
-/**
- * A single GooglePay preview button instance.
- */
-class GooglePayPreviewButton extends PreviewButton {
-	constructor( args ) {
-		super( args );
-
-		this.selector = `${ args.selector }GooglePay`;
-		this.defaultAttributes = {
-			button: {
-				style: {
-					type: 'pay',
-					color: 'black',
-					language: 'en',
-				},
-			},
-		};
-	}
-
-	createNewWrapper() {
-		const element = super.createNewWrapper();
-		element.addClass( 'ppcp-button-googlepay' );
-
-		return element;
-	}
-
-	createButton( buttonConfig ) {
-		const button = new GooglepayButton(
-			'preview',
-			null,
-			buttonConfig,
-			this.ppcpConfig
-		);
-
-		button.init( this.apiConfig );
-	}
-
-	/**
-	 * Merge form details into the config object for preview.
-	 * Mutates the previewConfig object; no return value.
-	 * @param buttonConfig
-	 * @param ppcpConfig
-	 */
-	dynamicPreviewConfig( buttonConfig, ppcpConfig ) {
-		// Merge the current form-values into the preview-button configuration.
-		if ( ppcpConfig.button && buttonConfig.button ) {
-			Object.assign( buttonConfig.button.style, ppcpConfig.button.style );
-		}
-	}
-}
-
 // Initialize the preview button manager.
 buttonManager();