Add GooglePay module

modules.php

@@ -28,6 +28,12 @@ return function ( string $root_dir ): iterable {
 		( require "$modules_dir/ppcp-uninstall/module.php" )(),
 		( require "$modules_dir/ppcp-blocks/module.php" )(),
 	);
+	if ( apply_filters(
+		'inpsyde_feature_flags_woocommerce_paypal_payments_googlepay_enabled',
+		getenv( 'PCP_GOOGLEPAY_ENABLED' ) === '1'
+	) ) {
+		$modules[] = ( require "$modules_dir/ppcp-googlepay/module.php" )();
+	}
 
 	return $modules;
 };

modules/ppcp-button/extensions.php

@@ -7,4 +7,42 @@
 
 declare(strict_types=1);
 
-return array();
+use WooCommerce\PayPalCommerce\Onboarding\State;
+use WooCommerce\PayPalCommerce\Vendor\Psr\Container\ContainerInterface;
+
+return array(
+	'wcgateway.settings.fields' => static function ( ContainerInterface $container, array $fields ): array {
+		$fields['googlepay_heading'] = array(
+			'heading'      => __( 'Google Pay', 'woocommerce-paypal-payments' ),
+			'description'  =>
+				__(
+					'Customize the behaviour of the GooglePay button.',
+					'woocommerce-paypal-payments'
+				),
+			'type'         => 'ppcp-heading',
+			'screens'      => array( State::STATE_ONBOARDED ),
+			'requirements' => array(),
+			'gateway'      => 'paypal',
+		);
+		$fields['googlepay_button_enabled_product'] = array(
+			'title'        => __( 'Google Pay Button on Product Page', 'woocommerce-paypal-payments' ),
+			'type'         => 'checkbox',
+			'label'        => __( 'Enable Google Pay button on product page', 'woocommerce-paypal-payments' ),
+			'default'      => 'yes',
+			'screens'      => array( State::STATE_ONBOARDED ),
+			'gateway'      => 'paypal',
+			'requirements' => array(),
+		);
+		$fields['googlepay_button_enabled_cart']    = array(
+			'title'        => __( 'Google Pay Button on Cart Page', 'woocommerce-paypal-payments' ),
+			'type'         => 'checkbox',
+			'label'        => __( 'Enable Google Pay button on cart page', 'woocommerce-paypal-payments' ),
+			'default'      => 'yes',
+			'screens'      => array( State::STATE_ONBOARDED ),
+			'gateway'      => 'paypal',
+			'requirements' => array(),
+		);
+
+		return $fields;
+	},
+);

modules/ppcp-button/resources/js/modules/DataClientIdAttributeHandler.js

@@ -1,5 +1,4 @@
 import {loadScript} from "@paypal/paypal-js";
-import widgetBuilder from "./Renderer/WidgetBuilder";
 
 const storageKey = 'ppcp-data-client-id';
 

modules/ppcp-button/resources/js/modules/Helper/ScriptLoading.js

@@ -4,25 +4,60 @@ import widgetBuilder from "../Renderer/WidgetBuilder";
 import merge from "deepmerge";
 import {keysToCamelCase} from "./Utils";
 
+// This component may be used by multiple modules. This assures that options are shared between all instances.
+let options = window.ppcpWidgetBuilder = window.ppcpWidgetBuilder || {
+    isLoading: false,
+    onLoadedCallbacks: [],
+    loadingWaitTime: 5000 // 5 seconds
+};
+
 export const loadPaypalScript = (config, onLoaded) => {
+    // If PayPal is already loaded call the onLoaded callback and return.
     if (typeof paypal !== 'undefined') {
         onLoaded();
         return;
     }
 
+    // Add the onLoaded callback to the onLoadedCallbacks stack.
+    options.onLoadedCallbacks.push(onLoaded);
+
+    // Return if it's still loading.
+    if (options.isLoading) {
+        return;
+    }
+    options.isLoading = true;
+
+    // Arm a timeout so the module isn't locked on isLoading state on failure.
+    let loadingTimeout = setTimeout(() => {
+        console.error('Failed to load PayPal script.');
+        options.isLoading = false;
+        options.onLoadedCallbacks = [];
+    }, options.loadingWaitTime);
+
+    // Callback to be called once the PayPal script is loaded.
     const callback = (paypal) => {
         widgetBuilder.setPaypal(paypal);
-        onLoaded();
+
+        for (const onLoadedCallback of options.onLoadedCallbacks) {
+            onLoadedCallback();
+        }
+
+        options.isLoading = false;
+        options.onLoadedCallbacks = [];
+        clearTimeout(loadingTimeout);
     }
 
+    // Build the PayPal script options.
     let scriptOptions = keysToCamelCase(config.url_params);
     scriptOptions = merge(scriptOptions, config.script_attributes);
 
+    // Load PayPal script for special case with data-client-token
     if (config.data_client_id.set_attribute) {
         dataClientIdAttributeHandler(scriptOptions, config.data_client_id, callback);
         return;
     }
 
+    // Load PayPal script
     loadScript(scriptOptions).then(callback);
 }
 

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

@@ -1168,7 +1168,15 @@ class SmartButton implements SmartButtonInterface {
 		if ( $this->dcc_is_enabled() ) {
 			$components[] = 'hosted-fields';
 		}
-		return $components;
+		/**
+		 * Filter to add further components from the extensions.
+		 *
+		 * @internal Matches filter name in GooglePay extension.
+		 * @since TODO
+		 *
+		 * @param array $components The array of components already registered.
+		 */
+		return apply_filters( 'woocommerce_paypal_payments_sdk_components_hook', $components );
 	}
 
 	/**

modules/ppcp-googlepay/.babelrc

@@ -0,0 +1,14 @@
+{
+	"presets": [
+		[
+			"@babel/preset-env",
+			{
+				"useBuiltIns": "usage",
+				"corejs": "3.25.0"
+			}
+		],
+		[
+			"@babel/preset-react"
+		]
+	]
+}

modules/ppcp-googlepay/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+assets/js
+assets/css

modules/ppcp-googlepay/composer.json

@@ -0,0 +1,17 @@
+{
+    "name": "woocommerce/ppcp-googlepay",
+    "type": "dhii-mod",
+    "description": "Googlepay module for PPCP",
+    "license": "GPL-2.0",
+    "require": {
+        "php": "^7.2 | ^8.0",
+        "dhii/module-interface": "^0.3.0-alpha1"
+    },
+    "autoload": {
+        "psr-4": {
+            "WooCommerce\\PayPalCommerce\\Googlepay\\": "src"
+        }
+    },
+    "minimum-stability": "dev",
+    "prefer-stable": true
+}

modules/ppcp-googlepay/extensions.php

@@ -0,0 +1,18 @@
+<?php
+/**
+ * The Googlepay module extensions.
+ *
+ * @package WooCommerce\PayPalCommerce\Googlepay
+ */
+
+declare(strict_types=1);
+
+namespace WooCommerce\PayPalCommerce\Googlepay;
+
+use WooCommerce\PayPalCommerce\Onboarding\State;
+use WooCommerce\PayPalCommerce\Vendor\Psr\Container\ContainerInterface;
+
+
+return array(
+	// TODO.
+);

modules/ppcp-googlepay/module.php

@@ -0,0 +1,16 @@
+<?php
+/**
+ * The Googlepay module.
+ *
+ * @package WooCommerce\PayPalCommerce\Googlepay
+ */
+
+declare(strict_types=1);
+
+namespace WooCommerce\PayPalCommerce\Googlepay;
+
+use WooCommerce\PayPalCommerce\Vendor\Dhii\Modular\Module\ModuleInterface;
+
+return static function (): ModuleInterface {
+	return new GooglepayModule();
+};

modules/ppcp-googlepay/package.json

@@ -0,0 +1,33 @@
+{
+    "name": "ppcp-googlepay",
+    "version": "1.0.0",
+    "license": "GPL-3.0-or-later",
+    "browserslist": [
+        "> 0.5%",
+        "Safari >= 8",
+        "Chrome >= 41",
+        "Firefox >= 43",
+        "Edge >= 14"
+    ],
+    "dependencies": {
+        "core-js": "^3.25.0"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.19",
+        "@babel/preset-env": "^7.19",
+        "@babel/preset-react": "^7.18.6",
+        "@woocommerce/dependency-extraction-webpack-plugin": "^2.2.0",
+        "babel-loader": "^8.2",
+        "cross-env": "^7.0.3",
+        "file-loader": "^6.2.0",
+        "sass": "^1.42.1",
+        "sass-loader": "^12.1.0",
+        "webpack": "^5.76",
+        "webpack-cli": "^4.10"
+    },
+    "scripts": {
+        "build": "cross-env BABEL_ENV=default NODE_ENV=production webpack",
+        "watch": "cross-env BABEL_ENV=default NODE_ENV=production webpack --watch",
+        "dev": "cross-env BABEL_ENV=default webpack --watch"
+    }
+}

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

@@ -0,0 +1,256 @@
+import {loadPaypalScript} from "../../../ppcp-button/resources/js/modules/Helper/ScriptLoading";
+
+(function ({
+   buttonConfig,
+   ppcpConfig,
+   jQuery
+}) {
+
+    const bootstrap = function () {
+
+        let allowedPaymentMethods = null;
+        let merchantInfo = null;
+        let googlePayConfig = null;
+
+        let isReadyToPayRequest = null;
+        let baseCardPaymentMethod = null;
+
+        /* Configure your site's support for payment methods supported by the Google Pay */
+        function getGoogleIsReadyToPayRequest(allowedPaymentMethods, baseRequest) {
+            console.log('allowedPaymentMethods', allowedPaymentMethods);
+
+            return Object.assign({}, baseRequest, {
+                allowedPaymentMethods: allowedPaymentMethods,
+            });
+        }
+
+        /* Fetch Default Config from PayPal via PayPal SDK */
+        async function getGooglePayConfig() {
+            console.log('getGooglePayConfig');
+
+            console.log('allowedPaymentMethods', allowedPaymentMethods);
+            console.log('merchantInfo', merchantInfo);
+
+            if (allowedPaymentMethods == null || merchantInfo == null) {
+                googlePayConfig = await paypal.Googlepay().config();
+
+                console.log('const googlePayConfig', googlePayConfig);
+
+                allowedPaymentMethods = googlePayConfig.allowedPaymentMethods;
+                merchantInfo = googlePayConfig.merchantInfo;
+            }
+            return {
+                allowedPaymentMethods,
+                merchantInfo,
+            };
+        }
+
+        /**
+         * Initialize Google PaymentsClient after Google-hosted JavaScript has loaded
+         * Display a Google Pay payment button after confirmation of the viewer's ability to pay.
+         */
+        function onGooglePayLoaded() {
+            console.log('onGooglePayLoaded');
+
+            const paymentsClient = getGooglePaymentsClient();
+            paymentsClient.isReadyToPay(isReadyToPayRequest)
+                .then(function(response) {
+                    if (response.result) {
+                        addGooglePayButton();
+                    }
+                })
+                .catch(function(err) {
+                    console.error(err);
+                });
+        }
+
+        /**
+         * Add a Google Pay purchase button
+         */
+        function addGooglePayButton() {
+            console.log('addGooglePayButton');
+
+            const paymentsClient = getGooglePaymentsClient();
+            const button =
+                paymentsClient.createButton({
+                    onClick: onGooglePaymentButtonClicked /* To be defined later */,
+                    allowedPaymentMethods: [baseCardPaymentMethod]
+                });
+            jQuery(buttonConfig.button.wrapper).append(button);
+        }
+
+        /* Note: the `googlePayConfig` object in this request is the response from `paypal.Googlepay().config()` */
+        async function getGooglePaymentDataRequest() {
+            let baseRequest = {
+                apiVersion: 2,
+                apiVersionMinor: 0
+            }
+
+            const googlePayConfig = await paypal.Googlepay().config();
+            const paymentDataRequest = Object.assign({}, baseRequest);
+            paymentDataRequest.allowedPaymentMethods = googlePayConfig.allowedPaymentMethods;
+            paymentDataRequest.transactionInfo = getGoogleTransactionInfo();
+            paymentDataRequest.merchantInfo = googlePayConfig.merchantInfo;
+            paymentDataRequest.callbackIntents = ["PAYMENT_AUTHORIZATION"];
+            return paymentDataRequest;
+        }
+
+        function getGoogleTransactionInfo(){
+            return {
+                countryCode: 'US',
+                currencyCode: 'USD',
+                totalPriceStatus: 'FINAL',
+                totalPrice: '2.01' // Your amount
+            }
+        }
+
+        /**
+         * Show Google Pay payment sheet when Google Pay payment button is clicked
+         */
+        async function onGooglePaymentButtonClicked() {
+            console.log('onGooglePaymentButtonClicked');
+
+            const paymentDataRequest = await getGooglePaymentDataRequest();
+            const paymentsClient = getGooglePaymentsClient();
+            paymentsClient.loadPaymentData(paymentDataRequest);
+        }
+
+        function onPaymentAuthorized(paymentData) {
+            console.log('onPaymentAuthorized', paymentData);
+
+            return new Promise(function (resolve, reject) {
+                processPayment(paymentData)
+                    .then(function (data) {
+                        resolve({ transactionState: "SUCCESS" });
+                    })
+                    .catch(function (errDetails) {
+                        resolve({ transactionState: "ERROR" });
+                    });
+            });
+        }
+
+        function onPaymentDataChanged() {
+            console.log('onPaymentDataChanged');
+        }
+
+        async function processPayment(paymentData) {
+            return new Promise(async function (resolve, reject) {
+                try {
+                    // Create the order on your server
+                    const {id} = await fetch(`/orders`, {
+                        method: "POST",
+                        body: ''
+                        // You can use the "body" parameter to pass optional, additional order information, such as:
+                        // amount, and amount breakdown elements like tax, shipping, and handling
+                        // item data, such as sku, name, unit_amount, and quantity
+                        // shipping information, like name, address, and address type
+                    });
+
+                    console.log('paypal.Googlepay().confirmOrder : paymentData', paymentData);
+                    const confirmOrderResponse = await paypal.Googlepay().confirmOrder({
+                        orderId: id,
+                        paymentMethodData: paymentData.paymentMethodData
+                    });
+                    console.log('paypal.Googlepay().confirmOrder : confirmOrderResponse', confirmOrderResponse);
+
+                    /** Capture the Order on your Server */
+                    if(confirmOrderResponse.status === "APPROVED"){
+                        const response = await fetch(`/capture/${id}`,
+                            {
+                                method: 'POST',
+                            }).then(res => res.json());
+                        if(response.capture.status === "COMPLETED")
+                            resolve({transactionState: 'SUCCESS'});
+                        else
+                            resolve({
+                                transactionState: 'ERROR',
+                                error: {
+                                    intent: 'PAYMENT_AUTHORIZATION',
+                                    message: 'TRANSACTION FAILED',
+                                }
+                            })
+                    } else {
+                        resolve({
+                            transactionState: 'ERROR',
+                            error: {
+                                intent: 'PAYMENT_AUTHORIZATION',
+                                message: 'TRANSACTION FAILED',
+                            }
+                        })
+                    }
+                } catch(err) {
+                    resolve({
+                        transactionState: 'ERROR',
+                        error: {
+                            intent: 'PAYMENT_AUTHORIZATION',
+                            message: err.message,
+                        }
+                    })
+                }
+            });
+        }
+
+        // Custom
+        function getGooglePaymentsClient() {
+            if (window.googlePayClient) {
+                return window.googlePayClient;
+            }
+
+            window.googlePayClient = new google.payments.api.PaymentsClient({
+                environment: 'TEST', // Use 'PRODUCTION' for real transactions
+                // add merchant info maybe
+                paymentDataCallbacks: {
+                    //onPaymentDataChanged: onPaymentDataChanged,
+                    onPaymentAuthorized: onPaymentAuthorized,
+                }
+            });
+
+            return window.googlePayClient;
+        }
+
+        //------------------------
+
+        setTimeout(async function () {
+            let cfg = await getGooglePayConfig();
+            console.log('googlePayConfig', googlePayConfig);
+
+            allowedPaymentMethods = cfg.allowedPaymentMethods;
+
+            isReadyToPayRequest = getGoogleIsReadyToPayRequest(allowedPaymentMethods, googlePayConfig);
+            console.log('googleIsReadyToPayRequest', isReadyToPayRequest);
+
+            baseCardPaymentMethod = allowedPaymentMethods[0];
+
+            onGooglePayLoaded();
+
+        }, 2000);
+
+
+
+    };
+
+    document.addEventListener(
+        'DOMContentLoaded',
+        () => {
+            if (
+                (typeof (buttonConfig) === 'undefined') ||
+                (typeof (ppcpConfig) === 'undefined')
+            ) {
+                console.error('PayPal button could not be configured.');
+                return;
+            }
+
+            let bootstrapped = false;
+
+            loadPaypalScript(ppcpConfig, () => {
+                bootstrapped = true;
+                bootstrap();
+            });
+        },
+    );
+
+})({
+    buttonConfig: window.wc_ppcp_googlepay,
+    ppcpConfig: window.PayPalCommerceGateway,
+    jQuery: window.jQuery
+});

modules/ppcp-googlepay/services.php

@@ -0,0 +1,50 @@
+<?php
+/**
+ * The Googlepay module services.
+ *
+ * @package WooCommerce\PayPalCommerce\Googlepay
+ */
+
+declare(strict_types=1);
+
+namespace WooCommerce\PayPalCommerce\Googlepay;
+
+use WooCommerce\PayPalCommerce\ApiClient\Helper\Cache;
+use WooCommerce\PayPalCommerce\Googlepay\Assets\ButtonInterface;
+use WooCommerce\PayPalCommerce\Googlepay\Assets\GooglepayButton;
+use WooCommerce\PayPalCommerce\Vendor\Psr\Container\ContainerInterface;
+use WooCommerce\PayPalCommerce\WcGateway\Settings\Settings;
+
+return array(
+	// TODO.
+
+	'googlepay.button'         => static function ( ContainerInterface $container ): ButtonInterface {
+		// TODO : check other statuses.
+
+		return new GooglepayButton(
+			$container->get( 'googlepay.url' ),
+			$container->get( 'googlepay.sdk_script_url' ),
+			$container->get( 'ppcp.asset-version' ),
+			$container->get( 'session.handler' ),
+			$container->get( 'wcgateway.settings' ),
+			$container->get( 'onboarding.environment' ),
+			$container->get( 'api.shop.currency' ),
+			$container->get( 'woocommerce.logger.woocommerce' )
+		);
+	},
+
+	'googlepay.url'            => static function ( ContainerInterface $container ): string {
+		$path = realpath( __FILE__ );
+		if ( false === $path ) {
+			return '';
+		}
+		return plugins_url(
+			'/modules/ppcp-googlepay/',
+			dirname( $path, 3 ) . '/woocommerce-paypal-payments.php'
+		);
+	},
+	'googlepay.sdk_script_url' => static function ( ContainerInterface $container ): string {
+		return 'https://pay.google.com/gp/p/js/pay.js';
+	},
+
+);

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

@@ -0,0 +1,40 @@
+<?php
+/**
+ * The interface for the smart button asset renderer.
+ *
+ * @package WooCommerce\PayPalCommerce\Button\Assets
+ */
+
+declare(strict_types=1);
+
+namespace WooCommerce\PayPalCommerce\Googlepay\Assets;
+
+/**
+ * Interface SmartButtonInterface
+ */
+interface ButtonInterface {
+
+	/**
+	 * Renders the necessary HTML.
+	 *
+	 * @return bool
+	 */
+	public function render_buttons(): bool;
+
+	/**
+	 * Whether any of the scripts should be loaded.
+	 */
+	public function should_load_script(): bool;
+
+	/**
+	 * Enqueues scripts/styles.
+	 */
+	public function enqueue(): void;
+
+	/**
+	 * The configuration for the smart buttons.
+	 *
+	 * @return array
+	 */
+	public function script_data(): array;
+}

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

@@ -0,0 +1,234 @@
+<?php
+/**
+ * Registers and configures the necessary Javascript for the button, credit messaging and DCC fields.
+ *
+ * @package WooCommerce\PayPalCommerce\Button\Assets
+ */
+
+declare(strict_types=1);
+
+namespace WooCommerce\PayPalCommerce\Googlepay\Assets;
+
+use Psr\Log\LoggerInterface;
+use WooCommerce\PayPalCommerce\Onboarding\Environment;
+use WooCommerce\PayPalCommerce\Session\SessionHandler;
+use WooCommerce\PayPalCommerce\WcGateway\Settings\Settings;
+
+/**
+ * Class SmartButton
+ */
+class GooglepayButton implements ButtonInterface {
+
+	/**
+	 * The URL to the module.
+	 *
+	 * @var string
+	 */
+	private $module_url;
+
+	/**
+	 * The URL to the SDK.
+	 *
+	 * @var string
+	 */
+	private $sdk_url;
+
+	/**
+	 * The assets version.
+	 *
+	 * @var string
+	 */
+	private $version;
+
+	/**
+	 * The settings.
+	 *
+	 * @var Settings
+	 */
+	private $settings;
+
+	/**
+	 * The environment object.
+	 *
+	 * @var Environment
+	 */
+	private $environment;
+
+	/**
+	 * 3-letter currency code of the shop.
+	 *
+	 * @var string
+	 */
+	private $currency;
+
+	/**
+	 * The logger.
+	 *
+	 * @var LoggerInterface
+	 */
+	private $logger;
+
+	/**
+	 * Session handler.
+	 *
+	 * @var SessionHandler
+	 */
+	private $session_handler;
+
+	/**
+	 * SmartButton constructor.
+	 *
+	 * @param string          $module_url The URL to the module.
+	 * @param string          $sdk_url The URL to the SDK.
+	 * @param string          $version The assets version.
+	 * @param SessionHandler  $session_handler The Session handler.
+	 * @param Settings        $settings The Settings.
+	 * @param Environment     $environment The environment object.
+	 * @param string          $currency 3-letter currency code of the shop.
+	 * @param LoggerInterface $logger The logger.
+	 */
+	public function __construct(
+		string $module_url,
+		string $sdk_url,
+		string $version,
+		SessionHandler $session_handler,
+		Settings $settings,
+		Environment $environment,
+		string $currency,
+		LoggerInterface $logger
+	) {
+
+		$this->module_url      = $module_url;
+		$this->sdk_url         = $sdk_url;
+		$this->version         = $version;
+		$this->session_handler = $session_handler;
+		$this->settings        = $settings;
+		$this->environment     = $environment;
+		$this->currency        = $currency;
+		$this->logger          = $logger;
+	}
+
+	/**
+	 * Registers the necessary action hooks to render the HTML depending on the settings.
+	 *
+	 * @return bool
+	 */
+	public function render_buttons(): bool {
+		$button_enabled_product = $this->settings->has( 'googlepay_button_enabled_product' ) ? $this->settings->get( 'googlepay_button_enabled_product' ) : false;
+		$button_enabled_cart    = $this->settings->has( 'googlepay_button_enabled_cart' ) ? $this->settings->get( 'googlepay_button_enabled_cart' ) : false;
+
+		/**
+		 * Param types removed to avoid third-party issues.
+		 *
+		 * @psalm-suppress MissingClosureParamType
+		 */
+		add_filter(
+			'woocommerce_paypal_payments_sdk_components_hook',
+			function( $components ) {
+				$components[] = 'googlepay';
+				return $components;
+			}
+		);
+
+		if ( $button_enabled_product ) {
+			$render_placeholder = apply_filters( 'woocommerce_paypal_payments_googlepay_render_hook_product', 'woocommerce_single_product_summary' );
+			$render_placeholder = is_string( $render_placeholder ) ? $render_placeholder : 'woocommerce_single_product_summary';
+			add_action(
+				$render_placeholder,
+				function () {
+					$this->googlepay_button();
+				},
+				32
+			);
+		}
+
+		if ( $button_enabled_cart ) {
+			$render_placeholder = apply_filters( 'woocommerce_paypal_payments_googlepay_render_hook_cart', 'woocommerce_proceed_to_checkout' );
+			$render_placeholder = is_string( $render_placeholder ) ? $render_placeholder : 'woocommerce_proceed_to_checkout';
+			add_action(
+				$render_placeholder,
+				function () {
+					if ( ! is_cart() /* TODO : check other conditions */ ) {
+						return;
+					}
+
+					$this->googlepay_button();
+				},
+				21
+			);
+		}
+
+		return true;
+	}
+
+	/**
+	 * GooglePay button markup
+	 */
+	private function googlepay_button(): void {
+		?>
+		<div class="ppc-button-wrapper">
+			<div id="ppc-button-googlepay-container">
+				<?php wp_nonce_field( 'woocommerce-process_checkout', 'woocommerce-process-checkout-nonce' ); ?>
+			</div>
+		</div>
+		<?php
+	}
+
+	/**
+	 * Whether any of the scripts should be loaded.
+	 */
+	public function should_load_script(): bool {
+		return true;
+	}
+
+	/**
+	 * Enqueues scripts/styles.
+	 */
+	public function enqueue(): void {
+		wp_register_script(
+			'wc-ppcp-googlepay-sdk',
+			$this->sdk_url,
+			array(),
+			$this->version,
+			true
+		);
+		wp_enqueue_script( 'wc-ppcp-googlepay-sdk' );
+
+		wp_register_script(
+			'wc-ppcp-googlepay',
+			untrailingslashit( $this->module_url ) . '/assets/js/boot.js',
+			array( 'wc-ppcp-googlepay-sdk' ),
+			$this->version,
+			true
+		);
+		wp_enqueue_script( 'wc-ppcp-googlepay' );
+
+		wp_register_style(
+			'wc-ppcp-googlepay',
+			untrailingslashit( $this->module_url ) . '/assets/css/styles.css',
+			array(),
+			$this->version
+		);
+		wp_enqueue_style( 'wc-ppcp-googlepay' );
+
+		wp_localize_script(
+			'wc-ppcp-googlepay',
+			'wc_ppcp_googlepay',
+			$this->script_data()
+		);
+	}
+
+	/**
+	 * The configuration for the smart buttons.
+	 *
+	 * @return array
+	 */
+	public function script_data(): array {
+		return array(
+			'button' => array(
+				'wrapper' => '#ppc-button-googlepay-container',
+			),
+		);
+	}
+
+}

modules/ppcp-googlepay/src/GooglepayModule.php

@@ -0,0 +1,77 @@
+<?php
+/**
+ * The Googlepay module.
+ *
+ * @package WooCommerce\PayPalCommerce\Googlepay
+ */
+
+declare(strict_types=1);
+
+namespace WooCommerce\PayPalCommerce\Googlepay;
+
+use WooCommerce\PayPalCommerce\Button\Assets\SmartButtonInterface;
+use WooCommerce\PayPalCommerce\Googlepay\Assets\ButtonInterface;
+use WooCommerce\PayPalCommerce\Onboarding\Environment;
+use WooCommerce\PayPalCommerce\Vendor\Dhii\Container\ServiceProvider;
+use WooCommerce\PayPalCommerce\Vendor\Dhii\Modular\Module\ModuleInterface;
+use WooCommerce\PayPalCommerce\Vendor\Interop\Container\ServiceProviderInterface;
+use WooCommerce\PayPalCommerce\Vendor\Psr\Container\ContainerInterface;
+
+/**
+ * Class GooglepayModule
+ */
+class GooglepayModule implements ModuleInterface {
+	/**
+	 * {@inheritDoc}
+	 */
+	public function setup(): ServiceProviderInterface {
+		return new ServiceProvider(
+			require __DIR__ . '/../services.php',
+			require __DIR__ . '/../extensions.php'
+		);
+	}
+
+	/**
+	 * {@inheritDoc}
+	 */
+	public function run( ContainerInterface $c ): void {
+
+		add_action(
+			'wp',
+			static function () use ( $c ) {
+				if ( is_admin() ) {
+					return;
+				}
+				$button = $c->get( 'googlepay.button' );
+
+				/**
+				 * The Button.
+				 *
+				 * @var ButtonInterface $button
+				 */
+				$button->render_buttons();
+			}
+		);
+
+		add_action(
+			'wp_enqueue_scripts',
+			static function () use ( $c ) {
+				$button = $c->get( 'googlepay.button' );
+				assert( $button instanceof ButtonInterface );
+
+				if ( $button->should_load_script() ) {
+					$button->enqueue();
+				}
+			}
+		);
+
+	}
+
+	/**
+	 * Returns the key for the module.
+	 *
+	 * @return string|void
+	 */
+	public function getKey() {
+	}
+}

modules/ppcp-googlepay/webpack.config.js

@@ -0,0 +1,39 @@
+const path         = require('path');
+const isProduction = process.env.NODE_ENV === 'production';
+
+const DependencyExtractionWebpackPlugin = require( '@woocommerce/dependency-extraction-webpack-plugin' );
+
+module.exports = {
+    devtool: isProduction ? 'source-map' : 'eval-source-map',
+    mode: isProduction ? 'production' : 'development',
+    target: 'web',
+    plugins: [ new DependencyExtractionWebpackPlugin() ],
+    entry: {
+        'boot': path.resolve('./resources/js/boot.js'),
+        "styles": path.resolve('./resources/css/styles.scss')
+    },
+    output: {
+        path: path.resolve(__dirname, 'assets/'),
+        filename: 'js/[name].js',
+    },
+    module: {
+        rules: [{
+            test: /\.js?$/,
+            exclude: /node_modules/,
+            loader: 'babel-loader',
+        },
+            {
+                test: /\.scss$/,
+                exclude: /node_modules/,
+                use: [
+                    {
+                        loader: 'file-loader',
+                        options: {
+                            name: 'css/[name].css',
+                        }
+                    },
+                    {loader:'sass-loader'}
+                ]
+            }]
+    }
+};

modules/ppcp-onboarding/src/Render/OnboardingOptionsRenderer.php

@@ -57,19 +57,24 @@ class OnboardingOptionsRenderer {
 	 */
 	public function render( bool $is_shop_supports_dcc ): string {
 		$checked = $is_shop_supports_dcc ? '' : 'checked';
-		return '
-<ul class="ppcp-onboarding-options">
-	<li>
-		<label><input type="checkbox" disabled checked> ' .
-			__( 'Enable PayPal Payments — includes PayPal, Venmo, Pay Later — with fraud protection', 'woocommerce-paypal-payments' ) . '
-		</label>
-	</li>
-	<li>
-		<label><input type="checkbox" id="ppcp-onboarding-accept-cards" ' . $checked . '> ' . __( 'Securely accept all major credit & debit cards on the strength of the PayPal network', 'woocommerce-paypal-payments' ) . '</label>
-	</li>
-	<li>' . $this->render_dcc( $is_shop_supports_dcc ) . '</li>' .
-			$this->render_pui_option()
-		. '</ul>';
+
+		$on_boarding_options = '
+			<li>
+				<label><input type="checkbox" disabled checked> ' .
+					__( 'Enable PayPal Payments — includes PayPal, Venmo, Pay Later — with fraud protection', 'woocommerce-paypal-payments' ) . '
+				</label>
+			</li>
+			<li>
+				<label><input type="checkbox" id="ppcp-onboarding-accept-cards" ' . $checked . '> ' . __( 'Securely accept all major credit & debit cards on the strength of the PayPal network', 'woocommerce-paypal-payments' ) . '</label>
+			</li>
+			<li>' .
+				$this->render_dcc( $is_shop_supports_dcc ) .
+			'</li>' .
+			$this->render_pui_option();
+
+		return ' <ul class="ppcp-onboarding-options">' .
+			apply_filters( 'ppcp_onboarding_options', $on_boarding_options ) .
+		'</ul>';
 	}
 
 	/**

package.json

@@ -9,6 +9,7 @@
     "postinstall": "run-s install:modules:* && run-s build:modules",
     "install:modules:ppcp-blocks": "cd modules/ppcp-blocks && yarn install",
     "install:modules:ppcp-button": "cd modules/ppcp-button && yarn install",
+    "install:modules:ppcp-googlepay": "cd modules/ppcp-googlepay && yarn install",
     "install:modules:ppcp-wc-gateway": "cd modules/ppcp-wc-gateway && yarn install",
     "install:modules:ppcp-webhooks": "cd modules/ppcp-webhooks && yarn install",
     "install:modules:ppcp-order-tracking": "cd modules/ppcp-order-tracking && yarn install",
@@ -18,6 +19,7 @@
     "install:modules:ppcp-uninstall": "cd modules/ppcp-uninstall && yarn install",
     "build:modules:ppcp-blocks": "cd modules/ppcp-blocks && yarn run build",
     "build:modules:ppcp-button": "cd modules/ppcp-button && yarn run build",
+    "build:modules:ppcp-googlepay": "cd modules/ppcp-googlepay && yarn run build",
     "build:modules:ppcp-wc-gateway": "cd modules/ppcp-wc-gateway && yarn run build",
     "build:modules:ppcp-webhooks": "cd modules/ppcp-webhooks && yarn run build",
     "build:modules:ppcp-order-tracking": "cd modules/ppcp-order-tracking && yarn run build",
@@ -28,6 +30,7 @@
     "build:modules": "run-p build:modules:*",
     "watch:modules:ppcp-blocks": "cd modules/ppcp-blocks && yarn run watch",
     "watch:modules:ppcp-button": "cd modules/ppcp-button && yarn run watch",
+    "watch:modules:ppcp-googlepay": "cd modules/ppcp-googlepay && yarn run watch",
     "watch:modules:ppcp-wc-gateway": "cd modules/ppcp-wc-gateway && yarn run watch",
     "watch:modules:ppcp-webhooks": "cd modules/ppcp-webhooks && yarn run watch",
     "watch:modules:ppcp-order-tracking": "cd modules/ppcp-order-tracking && yarn run watch",