Add style settings for card button

modules/ppcp-button/src/Assets/SmartButton.php

@@ -1006,8 +1006,9 @@ document.querySelector("#payment").before(document.querySelector("#ppcp-messages
 					'id'      => CardButtonGateway::ID,
 					'wrapper' => '#ppc-button-' . CardButtonGateway::ID,
 					'style'   => array(
-						'shape' => $this->style_for_context( 'shape', $this->context() ),
+						'shape'  => $this->style_for_apm( 'shape', 'card' ),
-						// TODO: color black, white from the gateway settings.
+						'color'  => $this->style_for_apm( 'color', 'card', 'black' ),
+						'layout' => $this->style_for_apm( 'poweredby_tagline', 'card', false ) === $this->normalize_style_value( true ) ? 'vertical' : 'horizontal',
 					),
 				),
 			),
@@ -1371,6 +1372,21 @@ document.querySelector("#payment").before(document.querySelector("#ppcp-messages
 			?? $this->normalize_style_value( $defaults[ $style ] ?? '' );
 	}
 
+	/**
+	 * Determines the style for a given property in a given APM.
+	 *
+	 * @param string $style The name of the style property.
+	 * @param string $apm The APM name, such as 'card'.
+	 * @param ?mixed $default The default value.
+	 *
+	 * @return string
+	 */
+	private function style_for_apm( string $style, string $apm, $default = null ): string {
+		return $this->get_style_value( "${apm}_button_${style}" )
+			?? ( $default ? $this->normalize_style_value( $default ) : null )
+			?? $this->style_for_context( $style, 'checkout' );
+	}
+
 	/**
 	 * Returns the style property value or null.
 	 *

modules/ppcp-wc-gateway/extensions.php

@@ -66,6 +66,7 @@ return array(
 			'paypal-smart-button-fields.php',
 			'connection-tab-fields.php',
 			'pay-later-tab-fields.php',
+			'card-button-fields.php',
 		);
 
 		return array_merge(

modules/ppcp-wc-gateway/src/Assets/SettingsPageAssets.php

@@ -11,6 +11,8 @@ namespace WooCommerce\PayPalCommerce\WcGateway\Assets;
 
 use WooCommerce\PayPalCommerce\Onboarding\Environment;
 use WooCommerce\PayPalCommerce\Subscription\Helper\SubscriptionHelper;
+use WooCommerce\PayPalCommerce\WcGateway\Gateway\CardButtonGateway;
+use WooCommerce\PayPalCommerce\WcGateway\Gateway\PayPalGateway;
 
 /**
  * Class SettingsPageAssets
@@ -181,7 +183,7 @@ class SettingsPageAssets {
 		$section = wc_clean( wp_unslash( $_GET['section'] ?? '' ) );
 		// phpcs:enable WordPress.Security.NonceVerification.Recommended
 
-		return 'checkout' === $tab && 'ppcp-gateway' === $section;
+		return 'checkout' === $tab && in_array( $section, array( PayPalGateway::ID, CardButtonGateway::ID ), true );
 	}
 
 	/**

modules/ppcp-wc-gateway/src/Settings/Fields/card-button-fields.php

@@ -0,0 +1,109 @@
+<?php
+/**
+ * The services of the Gateway module.
+ *
+ * @package WooCommerce\PayPalCommerce\WcGateway
+ */
+
+declare(strict_types=1);
+
+namespace WooCommerce\PayPalCommerce\WcGateway\Settings;
+
+use WooCommerce\PayPalCommerce\Onboarding\State;
+use WooCommerce\PayPalCommerce\Vendor\Psr\Container\ContainerInterface;
+use WooCommerce\PayPalCommerce\WcGateway\Gateway\CardButtonGateway;
+
+return function ( ContainerInterface $container, array $fields ): array {
+
+	$current_page_id = $container->get( 'wcgateway.current-ppcp-settings-page-id' );
+
+	if ( $current_page_id !== CardButtonGateway::ID ) {
+		return $fields;
+	}
+
+	$new_fields = array(
+		'card_button_styling_heading'   => array(
+			'heading'      => __( 'Standard Card Button Styling', 'woocommerce-paypal-payments' ),
+			'description'  => sprintf(
+			// translators: %1$s and %2$s are the opening and closing of HTML <a> tag.
+				__(
+					'Customize the appearance of the Standard Card Button on the %1$sCheckout page%2$s.',
+					'woocommerce-paypal-payments'
+				),
+				'<a href="https://woocommerce.com/document/woocommerce-paypal-payments/#button-on-checkout" target="_blank">',
+				'</a>',
+				'</ br>'
+			),
+			'type'         => 'ppcp-heading',
+			'screens'      => array(
+				State::STATE_START,
+				State::STATE_ONBOARDED,
+			),
+			'requirements' => array(),
+			'gateway'      => CardButtonGateway::ID,
+		),
+		'card_button_poweredby_tagline' => array(
+			'title'        => __( 'Tagline', 'woocommerce-paypal-payments' ),
+			'type'         => 'checkbox',
+			'label'        => __( 'Enable "Powered by PayPal" tagline', 'woocommerce-paypal-payments' ),
+			'default'      => false,
+			'desc_tip'     => true,
+			'description'  => __(
+				'Add the "Powered by PayPal" line below the button.',
+				'woocommerce-paypal-payments'
+			),
+			'screens'      => array(
+				State::STATE_START,
+				State::STATE_ONBOARDED,
+			),
+			'requirements' => array(),
+			'gateway'      => CardButtonGateway::ID,
+		),
+		'card_button_color'             => array(
+			'title'        => __( 'Color', 'woocommerce-paypal-payments' ),
+			'type'         => 'select',
+			'class'        => array(),
+			'input_class'  => array( 'wc-enhanced-select' ),
+			'default'      => 'black',
+			'desc_tip'     => true,
+			'description'  => __(
+				'Controls the background color of the button. Change it to match your site design or aesthetic.',
+				'woocommerce-paypal-payments'
+			),
+			'options'      => array(
+				'black' => __( 'Black', 'woocommerce-paypal-payments' ),
+				'white' => __( 'White', 'woocommerce-paypal-payments' ),
+			),
+			'screens'      => array(
+				State::STATE_START,
+				State::STATE_ONBOARDED,
+			),
+			'requirements' => array(),
+			'gateway'      => CardButtonGateway::ID,
+		),
+		'card_button_shape'             => array(
+			'title'        => __( 'Shape', 'woocommerce-paypal-payments' ),
+			'type'         => 'select',
+			'class'        => array(),
+			'input_class'  => array( 'wc-enhanced-select' ),
+			'default'      => 'rect',
+			'desc_tip'     => true,
+			'description'  => __(
+				'The pill-shaped button\'s unique and powerful shape signifies PayPal in people\'s minds. Use the rectangular button as an alternative when pill-shaped buttons might pose design challenges.',
+				'woocommerce-paypal-payments'
+			),
+			'options'      => array(
+				'pill' => __( 'Pill', 'woocommerce-paypal-payments' ),
+				'rect' => __( 'Rectangle', 'woocommerce-paypal-payments' ),
+			),
+			'screens'      => array(
+				State::STATE_START,
+				State::STATE_ONBOARDED,
+			),
+			'requirements' => array(),
+			'gateway'      => CardButtonGateway::ID,
+		),
+	);
+
+	return array_merge( $fields, $new_fields );
+};