diff --git a/modules/ppcp-googlepay/resources/js/GooglepayPreviewButton.js b/modules/ppcp-googlepay/resources/js/GooglepayPreviewButton.js
new file mode 100644
index 000000000..514b67163
--- /dev/null
+++ b/modules/ppcp-googlepay/resources/js/GooglepayPreviewButton.js
@@ -0,0 +1,68 @@
+import PreviewButton from '../../../ppcp-button/resources/js/modules/Renderer/PreviewButton';
+import ContextHandlerFactory from './Context/ContextHandlerFactory';
+import GooglepayButton from './GooglepayButton';
+
+/**
+ * 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-googlepay' );
+
+		return element;
+	}
+
+	createButton( buttonConfig ) {
+		const contextHandler = ContextHandlerFactory.create(
+			'preview',
+			buttonConfig,
+			this.ppcpConfig,
+			null
+		);
+
+		/* Intentionally using `new` keyword, instead of the `.createButton()` factory,
+		 * as the factory is designed to only create a single button per context, while a single
+		 * page can contain multiple instances of a preview button.
+		 */
+		const button = new GooglepayButton(
+			'preview',
+			null,
+			buttonConfig,
+			this.ppcpConfig,
+			contextHandler
+		);
+
+		button.configure( this.apiConfig, null );
+		button.init();
+	}
+
+	/**
+	 * Merge form details into the config object for preview.
+	 * Mutates the previewConfig object; no return value.
+	 *
+	 * @param {Object} buttonConfig
+	 * @param {Object} 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/boot-admin.js b/modules/ppcp-googlepay/resources/js/boot-admin.js
index 7634ac5bb..7b5342078 100644
--- a/modules/ppcp-googlepay/resources/js/boot-admin.js
+++ b/modules/ppcp-googlepay/resources/js/boot-admin.js
@@ -1,7 +1,5 @@
-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 ContextHandlerFactory from './Context/ContextHandlerFactory';
+import GooglePayPreviewButton from './GooglepayPreviewButton';
 
 /**
  * Accessor that creates and returns a single PreviewButtonManager instance.
@@ -33,7 +31,7 @@ class GooglePayPreviewButtonManager extends PreviewButtonManager {
 	 * method.
 	 *
 	 * @param {{}} payPal - The PayPal SDK object provided by WidgetBuilder.
-	 * @return {Promise<{}>}
+	 * @return {Promise<{}>} Promise that resolves when API configuration is available.
 	 */
 	async fetchConfig( payPal ) {
 		const apiMethod = payPal?.Googlepay()?.config;
@@ -59,7 +57,7 @@ class GooglePayPreviewButtonManager extends PreviewButtonManager {
 	 * This method is responsible for creating a new PreviewButton instance and returning it.
 	 *
 	 * @param {string} wrapperId - CSS ID of the wrapper element.
-	 * @return {GooglePayPreviewButton}
+	 * @return {GooglePayPreviewButton} The new preview button instance.
 	 */
 	createButtonInstance( wrapperId ) {
 		return new GooglePayPreviewButton( {
@@ -69,65 +67,5 @@ class GooglePayPreviewButtonManager extends PreviewButtonManager {
 	}
 }
 
-/**
- * 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 contextHandler = ContextHandlerFactory.create(
-			'preview',
-			buttonConfig,
-			this.ppcpConfig,
-			null
-		);
-
-		const button = GooglepayButton.createButton(
-			'preview',
-			null,
-			buttonConfig,
-			this.ppcpConfig,
-			contextHandler
-		);
-
-		button.configure( this.apiConfig, null );
-		button.init();
-	}
-
-	/**
-	 * 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();