Add GooglePay validations

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

@@ -1,5 +1,5 @@
 .ppcp-button-googlepay {
-	margin-top: 5px;
+	margin: 5px 0;
 	overflow: hidden;
 	height: 45px;
 
@@ -15,7 +15,7 @@
 
 .woocommerce-checkout {
 	.ppcp-button-googlepay {
-		margin-top: 0;
+		margin: 0;
 		border-radius: 18px;
 		height: 38px;
 	}
@@ -23,6 +23,6 @@
 
 .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout {
 	.ppcp-button-googlepay {
-		margin-top: 0;
+		margin: 0;
 	}
 }

modules/ppcp-googlepay/resources/js/GooglepayButton.js

@@ -25,6 +25,10 @@ class GooglepayButton {
         }
         this.isInitialized = true;
 
+        if (!this.validateConfig()) {
+            return;
+        }
+
         this.googlePayConfig = config;
         this.allowedPaymentMethods = config.allowedPaymentMethods;
         this.baseCardPaymentMethod = this.allowedPaymentMethods[0];
@@ -44,6 +48,20 @@ class GooglepayButton {
             });
     }
 
+    validateConfig() {
+        if ( ['PRODUCTION', 'TEST'].indexOf(this.buttonConfig.environment) === -1) {
+            console.error('[GooglePayButton] Invalid environment.', this.buttonConfig.environment);
+            return false;
+        }
+
+        if ( !this.contextHandler ) {
+            console.error('[GooglePayButton] Invalid context handler.', this.contextHandler);
+            return false;
+        }
+
+        return true;
+    }
+
     buildReadyToPayRequest(allowedPaymentMethods, baseRequest) {
         return Object.assign({}, baseRequest, {
             allowedPaymentMethods: allowedPaymentMethods,
@@ -52,7 +70,7 @@ class GooglepayButton {
 
     initClient() {
         this.paymentsClient = new google.payments.api.PaymentsClient({
-            environment: 'TEST', // TODO: Use 'PRODUCTION' for real transactions
+            environment: this.buttonConfig.environment,
             // add merchant info maybe
             paymentDataCallbacks: {
                 //onPaymentDataChanged: onPaymentDataChanged,
@@ -72,18 +90,24 @@ class GooglepayButton {
                 ? this.buttonConfig.button.mini_cart_wrapper
                 : this.buttonConfig.button.wrapper;
 
-        const shape =
+        const ppcpStyle =
             (this.context === 'mini-cart')
-                ? this.ppcpConfig.button.mini_cart_style.shape
-                : this.ppcpConfig.button.style.shape;
+                ? this.ppcpConfig.button.mini_cart_style
+                : this.ppcpConfig.button.style;
 
-        jQuery(wrapper).addClass('ppcp-button-' + shape);
+        const buttonStyle =
+            (this.context === 'mini-cart')
+                ? this.buttonConfig.button.mini_cart_style
+                : this.buttonConfig.button.style;
+
+        jQuery(wrapper).addClass('ppcp-button-' + ppcpStyle.shape);
 
         const button =
             this.paymentsClient.createButton({
                 onClick: this.onButtonClick.bind(this),
                 allowedPaymentMethods: [baseCardPaymentMethod],
-                buttonType: 'pay',
+                buttonColor: buttonStyle.color || 'black',
+                buttonType: buttonStyle.type || 'pay',
                 buttonSizeMode: 'fill',
             });
         jQuery(wrapper).append(button);

modules/ppcp-googlepay/resources/js/GooglepayManager.js

@@ -29,7 +29,8 @@ class GooglepayManager {
 
     init() {
         (async () => {
-            await this.config();
+            // Gets GooglePay configuration of the PayPal merchant.
+            this.googlePayConfig = await paypal.Googlepay().config();
 
             for (const button of this.buttons) {
                 button.init(this.googlePayConfig);
@@ -37,15 +38,6 @@ class GooglepayManager {
         })();
     }
 
-    /**
-     * Gets GooglePay configuration of the PayPal merchant.
-     * @returns {Promise<null>}
-     */
-    async config() {
-        this.googlePayConfig = await paypal.Googlepay().config();
-        return this.googlePayConfig;
-    }
-
 }
 
 export default GooglepayManager;

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

@@ -14,14 +14,7 @@ if (typeof window.PayPalCommerceGateway === 'undefined') {
     window.PayPalCommerceGateway = ppcpConfig;
 }
 
-console.log('ppcpData', ppcpData);
-console.log('ppcpConfig', ppcpConfig);
-console.log('buttonData', buttonData);
-console.log('buttonConfig', buttonConfig);
-
 const GooglePayComponent = () => {
-    console.log('GooglePayComponent render');
-
     const [bootstrapped, setBootstrapped] = useState(false);
     const [paypalLoaded, setPaypalLoaded] = useState(false);
     const [googlePayLoaded, setGooglePayLoaded] = useState(false);

modules/ppcp-googlepay/services.php

@@ -16,8 +16,6 @@ use WooCommerce\PayPalCommerce\Googlepay\Assets\Button;
 use WooCommerce\PayPalCommerce\Vendor\Psr\Container\ContainerInterface;
 
 return array(
-	// TODO.
-
 	'googlepay.button'                => static function ( ContainerInterface $container ): ButtonInterface {
 		// TODO : check other statuses.
 

modules/ppcp-googlepay/src/Assets/Button.php

@@ -126,13 +126,15 @@ class Button implements ButtonInterface {
 	 * @return bool
 	 */
 	public function render_buttons(): bool {
-		$is_googlepay_button_enabled = $this->settings->has( 'googlepay_button_enabled' ) ? $this->settings->get( 'googlepay_button_enabled' ) : false;
+		if ( ! $this->isGooglePayButtonEnabled() ) {
+			return false;
+		}
 
-		$button_enabled_product  = $is_googlepay_button_enabled && $this->settings_status->is_smart_button_enabled_for_location( 'product' );
-		$button_enabled_cart     = $is_googlepay_button_enabled && $this->settings_status->is_smart_button_enabled_for_location( 'cart' );
-		$button_enabled_checkout = $is_googlepay_button_enabled;
-		$button_enabled_payorder = $is_googlepay_button_enabled;
-		$button_enabled_minicart = $is_googlepay_button_enabled && $this->settings_status->is_smart_button_enabled_for_location( 'mini-cart' );
+		$button_enabled_product  = $this->settings_status->is_smart_button_enabled_for_location( 'product' );
+		$button_enabled_cart     = $this->settings_status->is_smart_button_enabled_for_location( 'cart' );
+		$button_enabled_checkout = true;
+		$button_enabled_payorder = true;
+		$button_enabled_minicart = $this->settings_status->is_smart_button_enabled_for_location( 'mini-cart' );
 
 		/**
 		 * Param types removed to avoid third-party issues.
@@ -238,7 +240,7 @@ class Button implements ButtonInterface {
 	 * @return bool
 	 */
 	public function should_load_script(): bool {
-		return true; // TODO.
+		return $this->isGooglePayButtonEnabled();
 	}
 
 	/**
@@ -276,12 +278,51 @@ class Button implements ButtonInterface {
 	 */
 	public function script_data(): array {
 		return array(
-			'sdk_url' => $this->sdk_url,
-			'button'  => array(
+			'environment' => $this->environment->current_environment_is( Environment::SANDBOX ) ? 'TEST' : 'PRODUCTION',
+			'sdk_url'     => $this->sdk_url,
+			'button'      => array(
 				'wrapper'           => '#ppc-button-googlepay-container',
+				'style'             => $this->button_styles_for_context( 'cart' ), // For now use cart. Pass the context if necessary.
 				'mini_cart_wrapper' => '#ppc-button-googlepay-container-minicart',
+				'mini_cart_style'   => $this->button_styles_for_context( 'mini-cart' ),
 			),
 		);
 	}
 
+	/**
+	 * Determines the style for a given indicator in a given context.
+	 *
+	 * @param string $context The context.
+	 *
+	 * @return array
+	 */
+	private function button_styles_for_context( string $context ): array {
+		// Use the cart/checkout styles for blocks.
+		$context = str_replace( '-block', '', $context );
+
+		$values = array(
+			'color' => 'black',
+			'type'  => 'pay',
+		);
+
+		foreach ( $values as $style => $value ) {
+			if ( $this->settings->has( 'googlepay_button_' . $context . '_' . $style ) ) {
+				$values[ $style ] = $this->settings->get( 'googlepay_button_' . $context . '_' . $style );
+			} elseif ( $this->settings->has( 'googlepay_button_' . $style ) ) {
+				$values[ $style ] = $this->settings->get( 'googlepay_button_' . $style );
+			}
+		}
+
+		return $values;
+	}
+
+	/**
+	 * Returns if Google Pay button is enabled
+	 *
+	 * @return bool
+	 */
+	private function isGooglePayButtonEnabled(): bool {
+		return $this->settings->has('googlepay_button_enabled') && !!$this->settings->get('googlepay_button_enabled');
+	}
+
 }