From 0ac4089bec83bfb58014cfe71835691767fdfd0c Mon Sep 17 00:00:00 2001 From: Pedro Silva Date: Thu, 31 Aug 2023 17:38:23 +0100 Subject: [PATCH] Add GooglePay validations --- .../ppcp-googlepay/resources/css/styles.scss | 6 +- .../resources/js/GooglepayButton.js | 36 +++++++++-- .../resources/js/GooglepayManager.js | 12 +--- .../ppcp-googlepay/resources/js/boot-block.js | 7 --- modules/ppcp-googlepay/services.php | 2 - modules/ppcp-googlepay/src/Assets/Button.php | 59 ++++++++++++++++--- 6 files changed, 85 insertions(+), 37 deletions(-) diff --git a/modules/ppcp-googlepay/resources/css/styles.scss b/modules/ppcp-googlepay/resources/css/styles.scss index db8e6b2b4..ef229bac5 100644 --- a/modules/ppcp-googlepay/resources/css/styles.scss +++ b/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; } } diff --git a/modules/ppcp-googlepay/resources/js/GooglepayButton.js b/modules/ppcp-googlepay/resources/js/GooglepayButton.js index 846616f9e..5bd9ff968 100644 --- a/modules/ppcp-googlepay/resources/js/GooglepayButton.js +++ b/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); diff --git a/modules/ppcp-googlepay/resources/js/GooglepayManager.js b/modules/ppcp-googlepay/resources/js/GooglepayManager.js index 9aee2c5b2..95aac2c2d 100644 --- a/modules/ppcp-googlepay/resources/js/GooglepayManager.js +++ b/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} - */ - async config() { - this.googlePayConfig = await paypal.Googlepay().config(); - return this.googlePayConfig; - } - } export default GooglepayManager; diff --git a/modules/ppcp-googlepay/resources/js/boot-block.js b/modules/ppcp-googlepay/resources/js/boot-block.js index 6fcbdb441..adafe7b9e 100644 --- a/modules/ppcp-googlepay/resources/js/boot-block.js +++ b/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); diff --git a/modules/ppcp-googlepay/services.php b/modules/ppcp-googlepay/services.php index 365c8ba56..b6b3a891f 100644 --- a/modules/ppcp-googlepay/services.php +++ b/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. diff --git a/modules/ppcp-googlepay/src/Assets/Button.php b/modules/ppcp-googlepay/src/Assets/Button.php index c46b9968c..db94c9844 100644 --- a/modules/ppcp-googlepay/src/Assets/Button.php +++ b/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'); + } + }