diff --git a/modules/ppcp-wc-gateway/resources/js/gateway-settings.js b/modules/ppcp-wc-gateway/resources/js/gateway-settings.js
index 8d703164f..65b96e1d1 100644
--- a/modules/ppcp-wc-gateway/resources/js/gateway-settings.js
+++ b/modules/ppcp-wc-gateway/resources/js/gateway-settings.js
@@ -77,7 +77,8 @@ document.addEventListener(
 
         function createButtonPreview(settingsCallback) {
             const render = (settings) => {
-                const wrapper = document.querySelector(settings.button.wrapper);
+                const wrapperSelector = Object.values(settings.separate_buttons).length > 0 ? Object.values(settings.separate_buttons)[0].wrapper : settings.button.wrapper;
+                const wrapper = document.querySelector(wrapperSelector);
                 if (!wrapper) {
                     return;
                 }
@@ -171,7 +172,7 @@ document.addEventListener(
                 .catch((error) => console.error('failed to load the PayPal JS SDK script', error));
         }
 
-        function getButtonSettings(wrapperSelector, fields) {
+        function getButtonSettings(wrapperSelector, fields, apm = null) {
             const layoutElement = jQuery(fields['layout']);
             const layout = (layoutElement.length && layoutElement.is(':visible')) ? layoutElement.val() : 'vertical';
             const style = {
@@ -184,13 +185,24 @@ document.addEventListener(
             if ('height' in fields) {
                 style['height'] = parseInt(jQuery(fields['height']).val());
             }
-            return {
+            if ('poweredby_tagline' in fields) {
+                style['layout'] = jQuery(fields['poweredby_tagline']).is(':checked') ? 'vertical' : 'horizontal';
+            }
+            const settings = {
                 'button': {
                     'wrapper': wrapperSelector,
                     'style': style,
                 },
                 'separate_buttons': {},
             };
+            if (apm) {
+                settings.separate_buttons[apm] = {
+                    'wrapper': wrapperSelector,
+                    'style': style,
+                };
+                settings.button.wrapper = null;
+            }
+            return settings;
         }
 
         function createMessagesPreview(settingsCallback) {
@@ -333,6 +345,13 @@ document.addEventListener(
                 });
 
                 createButtonPreview(() => getButtonDefaultSettings('#ppcpPayLaterButtonPreview'));
+
+                const apmFieldPrefix = '#ppcp-card_button_';
+                createButtonPreview(() => getButtonSettings('#ppcpCardButtonPreview', {
+                    'color': apmFieldPrefix + 'color',
+                    'shape': apmFieldPrefix + 'shape',
+                    'poweredby_tagline': apmFieldPrefix + 'poweredby_tagline',
+                }, 'card'));
             });
         }
     }
diff --git a/modules/ppcp-wc-gateway/src/Settings/Fields/card-button-fields.php b/modules/ppcp-wc-gateway/src/Settings/Fields/card-button-fields.php
index 82ce4b341..d941f0de3 100644
--- a/modules/ppcp-wc-gateway/src/Settings/Fields/card-button-fields.php
+++ b/modules/ppcp-wc-gateway/src/Settings/Fields/card-button-fields.php
@@ -21,6 +21,14 @@ return function ( ContainerInterface $container, array $fields ): array {
 		return $fields;
 	}
 
+	$render_preview_element = function ( string $id ): string {
+		return '
+<div class="ppcp-preview ppcp-button-preview">
+	<h4>' . __( 'Standard Card Button Styling Preview', 'woocommerce-paypal-payments' ) . '</h4>
+	<div id="' . $id . '" class="ppcp-button-preview-inner"></div>
+</div>';
+	};
+
 	$new_fields = array(
 		'card_button_styling_heading'   => array(
 			'heading'      => __( 'Standard Card Button Styling', 'woocommerce-paypal-payments' ),
@@ -103,6 +111,15 @@ return function ( ContainerInterface $container, array $fields ): array {
 			'requirements' => array(),
 			'gateway'      => CardButtonGateway::ID,
 		),
+		'card_button_preview'           => array(
+			'type'         => 'ppcp-text',
+			'text'         => $render_preview_element( 'ppcpCardButtonPreview' ),
+			'screens'      => array(
+				State::STATE_ONBOARDED,
+			),
+			'requirements' => array(),
+			'gateway'      => CardButtonGateway::ID,
+		),
 	);
 
 	return array_merge( $fields, $new_fields );