Axo: Add PayPal Insights to the Block Checkout and fix the existing Classic Checkout integration

modules/ppcp-axo-block/resources/js/plugins/PayPalInsightsLoader.js

@@ -1,35 +1,259 @@
 import { registerPlugin } from '@wordpress/plugins';
+import { useEffect, useCallback, useState, useRef } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
-import { useEffect, useState } from '@wordpress/element';
+import { PAYMENT_STORE_KEY } from '@woocommerce/block-data';
 import PayPalInsights from '../../../../ppcp-axo/resources/js/Insights/PayPalInsights';
+import { STORE_NAME } from '../stores/axoStore';
+import usePayPalCommerceGateway from '../hooks/usePayPalCommerceGateway';
 
-const PayPalInsightsLoader = () => {
+const GATEWAY_HANDLE = 'ppcp-axo-gateway';
 
-	// Subscribe to checkout store data
-	const checkoutData = useSelect( ( select ) => {
-		return {
-			paymentMethod: select( 'wc/store/checkout' ).getPaymentMethod(),
-			orderTotal: select( 'wc/store/checkout' ).getOrderTotal(),
-			// Add other data points you need
-		};
+const useEventTracking = () => {
+	const [ triggeredEvents, setTriggeredEvents ] = useState( {
+		initialized: false,
+		jsLoaded: false,
+		beginCheckout: false,
+		emailSubmitted: false,
 	} );
 
-	// Watch for changes and trigger analytics events
+	const currentPaymentMethod = useRef( null );
+
+	const setEventTriggered = useCallback( ( eventName, value = true ) => {
+		setTriggeredEvents( ( prev ) => ( {
+			...prev,
+			[ eventName ]: value,
+		} ) );
+	}, [] );
+
+	const isEventTriggered = useCallback(
+		( eventName ) => triggeredEvents[ eventName ],
+		[ triggeredEvents ]
+	);
+
+	const setCurrentPaymentMethod = useCallback( ( methodName ) => {
+		currentPaymentMethod.current = methodName;
+	}, [] );
+
+	const getCurrentPaymentMethod = useCallback(
+		() => currentPaymentMethod.current,
+		[]
+	);
+
+	return {
+		setEventTriggered,
+		isEventTriggered,
+		setCurrentPaymentMethod,
+		getCurrentPaymentMethod,
+	};
+};
+
+const waitForPayPalInsight = () => {
+	return new Promise( ( resolve, reject ) => {
+		// If already loaded, resolve immediately
+		if ( window.paypalInsight ) {
+			resolve( window.paypalInsight );
+			return;
+		}
+
+		// Set a reasonable timeout
+		const timeoutId = setTimeout( () => {
+			observer.disconnect();
+			reject( new Error( 'PayPal Insights script load timeout' ) );
+		}, 10000 );
+
+		// Create MutationObserver to watch for script initialization
+		const observer = new MutationObserver( () => {
+			if ( window.paypalInsight ) {
+				observer.disconnect();
+				clearTimeout( timeoutId );
+				resolve( window.paypalInsight );
+			}
+		} );
+
+		// Start observing
+		observer.observe( document, {
+			childList: true,
+			subtree: true,
+		} );
+	} );
+};
+
+const usePayPalInsightsInit = ( axoConfig, ppcpConfig, eventTracking ) => {
+	const { setEventTriggered, isEventTriggered } = eventTracking;
+	const initialized = useRef( false );
+
 	useEffect( () => {
-		if ( isScriptLoaded && window.YourAnalyticsObject ) {
-			// Example tracking calls
-			window.YourAnalyticsObject.track( 'checkout_updated', {
-				payment_method: checkoutData.paymentMethod,
-				order_total: checkoutData.orderTotal,
+		if (
+			! axoConfig?.insights?.enabled ||
+			! axoConfig?.insights?.client_id ||
+			! axoConfig?.insights?.session_id ||
+			initialized.current ||
+			isEventTriggered( 'initialized' )
+		) {
+			return;
+		}
+
+		const initializePayPalInsights = async () => {
+			try {
+				await waitForPayPalInsight();
+
+				if ( initialized.current ) {
+					return;
+				}
+
+				// Track JS load first
+				PayPalInsights.trackJsLoad();
+				setEventTriggered( 'jsLoaded' );
+
+				PayPalInsights.config( axoConfig.insights.client_id, {
+					debug: axoConfig?.wp_debug === '1',
+				} );
+
+				PayPalInsights.setSessionId( axoConfig.insights.session_id );
+				initialized.current = true;
+				setEventTriggered( 'initialized' );
+
+				if (
+					isEventTriggered( 'jsLoaded' ) &&
+					! isEventTriggered( 'beginCheckout' )
+				) {
+					PayPalInsights.trackBeginCheckout( {
+						amount: axoConfig.insights.amount,
+						page_type: 'checkout',
+						user_data: {
+							country: 'US',
+							is_store_member: false,
+						},
+					} );
+					setEventTriggered( 'beginCheckout' );
+				}
+			} catch ( error ) {
+				console.error(
+					'PayPal Insights initialization failed:',
+					error
+				);
+			}
+		};
+
+		initializePayPalInsights();
+
+		return () => {
+			initialized.current = false;
+		};
+	}, [ axoConfig, ppcpConfig, setEventTriggered, isEventTriggered ] );
+};
+
+const usePaymentMethodTracking = ( axoConfig, eventTracking ) => {
+	const { setCurrentPaymentMethod } = eventTracking;
+	const lastPaymentMethod = useRef( null );
+	const isInitialMount = useRef( true );
+
+	const activePaymentMethod = useSelect( ( select ) => {
+		return select( PAYMENT_STORE_KEY )?.getActivePaymentMethod();
+	}, [] );
+
+	const handlePaymentMethodChange = useCallback(
+		async ( paymentMethod ) => {
+			// Skip if no payment method or same as last one
+			if (
+				! paymentMethod ||
+				paymentMethod === lastPaymentMethod.current
+			) {
+				return;
+			}
+
+			try {
+				await waitForPayPalInsight();
+
+				// Only track if it's not the initial mount, and we have a previous payment method
+				if ( ! isInitialMount.current && lastPaymentMethod.current ) {
+					PayPalInsights.trackSelectPaymentMethod( {
+						payment_method_selected:
+							axoConfig?.insights?.payment_method_selected_map[
+								paymentMethod
+							] || 'other',
+						page_type: 'checkout',
 					} );
 				}
-	}, [ isScriptLoaded, checkoutData ] );
 
-	return null; // This component doesn't render anything
+				lastPaymentMethod.current = paymentMethod;
+				setCurrentPaymentMethod( paymentMethod );
+			} catch ( error ) {
+				console.error( 'Failed to track payment method:', error );
+			}
+		},
+		[
+			axoConfig?.insights?.payment_method_selected_map,
+			setCurrentPaymentMethod,
+		]
+	);
+
+	useEffect( () => {
+		if ( activePaymentMethod ) {
+			if ( isInitialMount.current ) {
+				// Just set the initial payment method without tracking
+				lastPaymentMethod.current = activePaymentMethod;
+				setCurrentPaymentMethod( activePaymentMethod );
+				isInitialMount.current = false;
+			} else {
+				handlePaymentMethodChange( activePaymentMethod );
+			}
+		}
+	}, [
+		activePaymentMethod,
+		handlePaymentMethodChange,
+		setCurrentPaymentMethod,
+	] );
+
+	useEffect( () => {
+		return () => {
+			lastPaymentMethod.current = null;
+			isInitialMount.current = true;
+		};
+	}, [] );
+};
+
+const PayPalInsightsLoader = () => {
+	const eventTracking = useEventTracking();
+	const { setEventTriggered, isEventTriggered } = eventTracking;
+
+	const initialConfig =
+		window?.wc?.wcSettings?.getSetting( `${ GATEWAY_HANDLE }_data` ) || {};
+
+	const { ppcpConfig } = usePayPalCommerceGateway( initialConfig );
+	const axoConfig = window?.wc_ppcp_axo;
+
+	const { isEmailSubmitted } = useSelect( ( select ) => {
+		const storeSelect = select( STORE_NAME );
+		return {
+			isEmailSubmitted: storeSelect?.getIsEmailSubmitted?.() ?? false,
+		};
+	}, [] );
+
+	usePayPalInsightsInit( axoConfig, ppcpConfig, eventTracking );
+	usePaymentMethodTracking( axoConfig, eventTracking );
+
+	useEffect( () => {
+		const trackEmail = async () => {
+			if ( isEmailSubmitted && ! isEventTriggered( 'emailSubmitted' ) ) {
+				try {
+					await waitForPayPalInsight();
+					PayPalInsights.trackSubmitCheckoutEmail();
+					setEventTriggered( 'emailSubmitted' );
+				} catch ( error ) {
+					console.error( 'Failed to track email submission:', error );
+				}
+			}
+		};
+		trackEmail();
+	}, [ isEmailSubmitted, setEventTriggered, isEventTriggered ] );
+
+	return null;
 };
 
-// Register the plugin to run with the checkout block
 registerPlugin( 'wc-ppcp-paypal-insights', {
 	render: PayPalInsightsLoader,
 	scope: 'woocommerce-checkout',
 } );
+
+export default PayPalInsightsLoader;

modules/ppcp-axo-block/resources/js/stores/axoStore.js

@@ -1,4 +1,4 @@
-import { createReduxStore, register, dispatch } from '@wordpress/data';
+import { createReduxStore, register, dispatch, select } from '@wordpress/data';
 
 export const STORE_NAME = 'woocommerce-paypal-payments/axo-block';
 
@@ -100,6 +100,7 @@ const selectors = {
 };
 
 // Create and register the Redux store for the AXO block
+if ( ! select( STORE_NAME ) ) {
 	const store = createReduxStore( STORE_NAME, {
 		reducer,
 		actions,
@@ -107,6 +108,7 @@ const store = createReduxStore( STORE_NAME, {
 	} );
 
 	register( store );
+}
 
 // Action dispatchers
 

modules/ppcp-axo-block/services.php

@@ -37,6 +37,7 @@ return array(
 			$container->get( 'wcgateway.settings' ),
 			$container->get( 'wcgateway.configuration.dcc' ),
 			$container->get( 'onboarding.environment' ),
+			$container->get( 'axo.payment_method_selected_map' ),
 			$container->get( 'wcgateway.url' )
 		);
 	},

modules/ppcp-axo-block/src/AxoBlockModule.php

@@ -134,7 +134,7 @@ class AxoBlockModule implements ServiceModule, ExtendingModule, ExecutableModule
 			}
 		);
 
-		// Enqueue the PayPal Insights script
+		// Enqueue the PayPal Insights script.
 		add_action(
 			'wp_enqueue_scripts',
 			function () use ( $c ) {
@@ -183,7 +183,7 @@ class AxoBlockModule implements ServiceModule, ExtendingModule, ExecutableModule
 	 * @return void
 	 */
 	private function enqueue_paypal_insights_script( ContainerInterface $c ): void {
-		if ( ! has_block( 'woocommerce/checkout' ) ) {
+		if ( ! has_block( 'woocommerce/checkout' ) || WC()->cart->is_empty() ) {
 			return;
 		}
 
@@ -192,7 +192,7 @@ class AxoBlockModule implements ServiceModule, ExtendingModule, ExecutableModule
 
 		wp_register_script(
 			'wc-ppcp-paypal-insights',
-			untrailingslashit( $module_url ) . '/resources/js/plugins/PayPalInsights.js',
+			untrailingslashit( $module_url ) . '/assets/js/PayPalInsightsLoader.js',
 			array( 'wp-plugins', 'wp-data', 'wp-element', 'wc-blocks-registry' ),
 			$asset_version,
 			true

modules/ppcp-axo-block/src/AxoBlockPaymentMethod.php

@@ -72,6 +72,13 @@ class AxoBlockPaymentMethod extends AbstractPaymentMethodType {
 	 */
 	private $environment;
 
+	/**
+	 * Mapping of payment methods to the PayPal Insights 'payment_method_selected' types.
+	 *
+	 * @var array
+	 */
+	private array $payment_method_selected_map;
+
 	/**
 	 * The WcGateway module URL.
 	 *
@@ -90,6 +97,7 @@ class AxoBlockPaymentMethod extends AbstractPaymentMethodType {
 	 * @param Settings                      $settings             The settings.
 	 * @param DCCGatewayConfiguration       $dcc_configuration    The DCC gateway settings.
 	 * @param Environment                   $environment          The environment object.
+	 * @param array                         $payment_method_selected_map Mapping of payment methods to the PayPal Insights 'payment_method_selected' types.
 	 * @param string                        $wcgateway_module_url The WcGateway module URL.
 	 */
 	public function __construct(
@@ -100,6 +108,7 @@ class AxoBlockPaymentMethod extends AbstractPaymentMethodType {
 		Settings $settings,
 		DCCGatewayConfiguration $dcc_configuration,
 		Environment $environment,
+		array $payment_method_selected_map,
 		string $wcgateway_module_url
 	) {
 		$this->name                        = AxoGateway::ID;
@@ -110,6 +119,7 @@ class AxoBlockPaymentMethod extends AbstractPaymentMethodType {
 		$this->settings                    = $settings;
 		$this->dcc_configuration           = $dcc_configuration;
 		$this->environment                 = $environment;
+		$this->payment_method_selected_map = $payment_method_selected_map;
 		$this->wcgateway_module_url        = $wcgateway_module_url;
 
 	}
@@ -204,8 +214,9 @@ class AxoBlockPaymentMethod extends AbstractPaymentMethodType {
 					'currency_code' => get_woocommerce_currency(),
 					'value'         => ( WC()->cart && method_exists( WC()->cart, 'get_total' ) )
 						? WC()->cart->get_total( 'numeric' )
-						: null, // Set to null if WC()->cart is null or get_total doesn't exist.
+						: null,
 				),
+				'payment_method_selected_map' => $this->payment_method_selected_map,
 			),
 			'style_options'   => array(
 				'root'  => array(

modules/ppcp-axo-block/webpack.config.js

@@ -9,7 +9,10 @@ module.exports = {
 	target: 'web',
 	plugins: [ new DependencyExtractionWebpackPlugin() ],
 	entry: {
-		'index': path.resolve( './resources/js/index.js' ),
+		index: path.resolve( './resources/js/index.js' ),
+		PayPalInsightsLoader: path.resolve(
+			'./resources/js/plugins/PayPalInsightsLoader.js'
+		),
 		gateway: path.resolve( './resources/css/gateway.scss' ),
 	},
 	output: {

modules/ppcp-axo/resources/js/AxoManager.js

@@ -116,7 +116,7 @@ class AxoManager {
 			this.axoConfig?.insights?.session_id
 		) {
 			PayPalInsights.config( this.axoConfig?.insights?.client_id, {
-				debug: true,
+				debug: axoConfig?.wp_debug === '1',
 			} );
 			PayPalInsights.setSessionId( this.axoConfig?.insights?.session_id );
 			PayPalInsights.trackJsLoad();
@@ -159,19 +159,25 @@ class AxoManager {
 	}
 
 	registerEventHandlers() {
+		// Payment method change tracking with duplicate prevention
+		let lastSelectedPaymentMethod = document.querySelector(
+			'input[name=payment_method]:checked'
+		)?.value;
 		this.$( document ).on(
 			'change',
 			'input[name=payment_method]',
 			( ev ) => {
-				const map = {
-					'ppcp-axo-gateway': 'card',
-					'ppcp-gateway': 'paypal',
-				};
-
+				if ( lastSelectedPaymentMethod !== ev.target.value ) {
 					PayPalInsights.trackSelectPaymentMethod( {
-					payment_method_selected: map[ ev.target.value ] || 'other',
+						payment_method_selected:
+							this.axoConfig?.insights
+								?.payment_method_selected_map[
+								ev.target.value
+							] || 'other',
 						page_type: 'checkout',
 					} );
+					lastSelectedPaymentMethod = ev.target.value;
+				}
 			}
 		);
 
@@ -1155,16 +1161,6 @@ class AxoManager {
 
 		this.el.axoNonceInput.get().value = nonce;
 
-		PayPalInsights.trackEndCheckout( {
-			amount: this.axoConfig?.insights?.amount,
-			page_type: 'checkout',
-			payment_method_selected: 'card',
-			user_data: {
-				country: 'US',
-				is_store_member: false,
-			},
-		} );
-
 		if ( data ) {
 			// Ryan flow.
 			const form = document.querySelector( 'form.woocommerce-checkout' );

modules/ppcp-axo/resources/js/Insights/EndCheckoutTracker.js

@@ -0,0 +1,99 @@
+import PayPalInsights from '../../../../ppcp-axo/resources/js/Insights/PayPalInsights';
+
+class EndCheckoutTracker {
+	constructor() {
+		this.initialize();
+	}
+
+	async initialize() {
+		const axoConfig = window.wc_ppcp_axo_insights_data || {};
+
+		if (
+			axoConfig?.enabled === '1' &&
+			axoConfig?.client_id &&
+			axoConfig?.session_id &&
+			axoConfig?.orderTotal &&
+			axoConfig?.orderCurrency
+		) {
+			try {
+				await this.waitForPayPalInsight();
+
+				PayPalInsights.config( axoConfig?.client_id, {
+					debug: axoConfig?.wp_debug === '1',
+				} );
+				PayPalInsights.setSessionId( axoConfig.session_id );
+				PayPalInsights.trackJsLoad();
+
+				const trackingData = {
+					amount: {
+						currency_code: axoConfig?.orderCurrency,
+						value: axoConfig?.orderTotal,
+					},
+					page_type: 'checkout',
+					payment_method_selected:
+						axoConfig?.payment_method_selected_map[
+							axoConfig?.paymentMethod
+						] || 'other',
+					user_data: {
+						country: 'US',
+						is_store_member: false,
+					},
+					order_id: axoConfig?.orderId,
+					order_key: axoConfig?.orderKey,
+				};
+
+				PayPalInsights.trackEndCheckout( trackingData );
+			} catch ( error ) {
+				console.error(
+					'EndCheckoutTracker: Error during tracking:',
+					error
+				);
+				console.error( 'PayPalInsights object:', window.paypalInsight );
+			}
+		} else {
+			console.warn(
+				'EndCheckoutTracker: Missing required configuration',
+				{
+					enabled: axoConfig?.enabled,
+					hasClientId: !! axoConfig?.client_id,
+					hasSessionId: !! axoConfig?.session_id,
+					hasOrderTotal: !! axoConfig?.orderTotal,
+					hasOrderCurrency: !! axoConfig?.orderCurrency,
+				}
+			);
+		}
+	}
+
+	waitForPayPalInsight() {
+		return new Promise( ( resolve, reject ) => {
+			// If already loaded, resolve immediately
+			if ( window.paypalInsight ) {
+				resolve( window.paypalInsight );
+				return;
+			}
+
+			const timeoutId = setTimeout( () => {
+				observer.disconnect();
+				reject( new Error( 'PayPal Insights script load timeout' ) );
+			}, 10000 );
+
+			// Create MutationObserver to watch for script initialization
+			const observer = new MutationObserver( () => {
+				if ( window.paypalInsight ) {
+					observer.disconnect();
+					clearTimeout( timeoutId );
+					resolve( window.paypalInsight );
+				}
+			} );
+
+			observer.observe( document, {
+				childList: true,
+				subtree: true,
+			} );
+		} );
+	}
+}
+
+document.addEventListener( 'DOMContentLoaded', () => {
+	new EndCheckoutTracker();
+} );

modules/ppcp-axo/services.php

@@ -18,6 +18,7 @@ use WooCommerce\PayPalCommerce\WcGateway\Gateway\CreditCardGateway;
 use WooCommerce\PayPalCommerce\WcGateway\Gateway\PayPalGateway;
 use WooCommerce\PayPalCommerce\WcGateway\Settings\Settings;
 use WooCommerce\PayPalCommerce\WcGateway\Helper\DCCGatewayConfiguration;
+use WooCommerce\PayPalCommerce\ApiClient\Helper\CurrencyGetter;
 
 return array(
 
@@ -64,6 +65,7 @@ return array(
 			$container->get( 'session.handler' ),
 			$container->get( 'wcgateway.settings' ),
 			$container->get( 'onboarding.environment' ),
+			$container->get( 'axo.insights' ),
 			$container->get( 'wcgateway.settings.status' ),
 			$container->get( 'api.shop.currency.getter' ),
 			$container->get( 'woocommerce.logger.woocommerce' ),
@@ -89,6 +91,52 @@ return array(
 		);
 	},
 
+	// Data needed for the PayPal Insights.
+	'axo.insights'                           => static function ( ContainerInterface $container ): array {
+		$settings = $container->get( 'wcgateway.settings' );
+		assert( $settings instanceof Settings );
+
+		$currency = $container->get( 'api.shop.currency.getter' );
+		assert( $currency instanceof CurrencyGetter );
+
+		return array(
+			'enabled'                     => defined( 'WP_DEBUG' ) && WP_DEBUG,
+			'client_id'                   => ( $settings->has( 'client_id' ) ? $settings->get( 'client_id' ) : null ),
+			'session_id'                  => substr(
+				method_exists( WC()->session, 'get_customer_unique_id' ) ?
+					md5( WC()->session->get_customer_unique_id() ) :
+					'',
+				0,
+				16
+			),
+			'amount'                      => array(
+				'currency_code' => $currency->get(),
+			),
+			'payment_method_selected_map' => $container->get( 'axo.payment_method_selected_map' ),
+			'wp_debug'                    => defined( 'WP_DEBUG' ) && WP_DEBUG,
+		);
+	},
+
+	// The mapping of payment methods to the PayPal Insights 'payment_method_selected' types.
+	'axo.payment_method_selected_map'        => static function ( ContainerInterface $container ): array {
+		return array(
+			'ppcp-axo-gateway'         => 'card',
+			'ppcp-credit-card-gateway' => 'card',
+			'ppcp-gateway'             => 'paypal',
+			'ppcp-googlepay'           => 'google_pay',
+			'ppcp-applepay'            => 'apple_pay',
+			'ppcp-multibanco'          => 'other',
+			'ppcp-trustly'             => 'other',
+			'ppcp-p24'                 => 'other',
+			'ppcp-mybank'              => 'other',
+			'ppcp-ideal'               => 'other',
+			'ppcp-eps'                 => 'other',
+			'ppcp-blik'                => 'other',
+			'ppcp-bancontact'          => 'other',
+			'ppcp-card-button-gateway' => 'card',
+		);
+	},
+
 	/**
 	 * The matrix which countries and currency combinations can be used for AXO.
 	 */

modules/ppcp-axo/src/Assets/AxoManager.php

@@ -52,6 +52,13 @@ class AxoManager {
 	 */
 	private $environment;
 
+	/**
+	 * Data needed for the PayPal Insights.
+	 *
+	 * @var array
+	 */
+	private array $insights_data;
+
 	/**
 	 * The Settings status helper.
 	 *
@@ -95,6 +102,7 @@ class AxoManager {
 	 * @param SessionHandler  $session_handler The Session handler.
 	 * @param Settings        $settings The Settings.
 	 * @param Environment     $environment The environment object.
+	 * @param array           $insights_data Data needed for the PayPal Insights.
 	 * @param SettingsStatus  $settings_status The Settings status helper.
 	 * @param CurrencyGetter  $currency The getter of the 3-letter currency code of the shop.
 	 * @param LoggerInterface $logger The logger.
@@ -106,6 +114,7 @@ class AxoManager {
 		SessionHandler $session_handler,
 		Settings $settings,
 		Environment $environment,
+		array $insights_data,
 		SettingsStatus $settings_status,
 		CurrencyGetter $currency,
 		LoggerInterface $logger,
@@ -117,6 +126,7 @@ class AxoManager {
 		$this->session_handler      = $session_handler;
 		$this->settings             = $settings;
 		$this->environment          = $environment;
+		$this->insights_data        = $insights_data;
 		$this->settings_status      = $settings_status;
 		$this->currency             = $currency;
 		$this->logger               = $logger;
@@ -161,7 +171,7 @@ class AxoManager {
 	 *
 	 * @return array
 	 */
-	private function script_data() {
+	private function script_data(): array {
 		return array(
 			'environment'               => array(
 				'is_sandbox' => $this->environment->current_environment() === 'sandbox',
@@ -169,20 +179,10 @@ class AxoManager {
 			'widgets'                   => array(
 				'email' => 'render',
 			),
-			'insights'                  => array(
-				'enabled'    => defined( 'WP_DEBUG' ) && WP_DEBUG,
-				'client_id'  => ( $this->settings->has( 'client_id' ) ? $this->settings->get( 'client_id' ) : null ),
-				'session_id' =>
-					substr(
-						method_exists( WC()->session, 'get_customer_unique_id' ) ? md5( WC()->session->get_customer_unique_id() ) : '',
-						0,
-						16
-					),
-				'amount'     => array(
-					'currency_code' => $this->currency->get(),
-					'value'         => WC()->cart->get_total( 'numeric' ),
-				),
-			),
+			// The amount is not available when setting the insights data, so we need to merge it here.
+			'insights'                  => ( function( array $data ): array {
+				$data['amount']['value'] = WC()->cart->get_total( 'numeric' );
+				return $data; } )( $this->insights_data ),
 			'style_options'             => array(
 				'root'  => array(
 					'backgroundColor' => $this->settings->has( 'axo_style_root_bg_color' ) ? $this->settings->get( 'axo_style_root_bg_color' ) : '',

modules/ppcp-axo/src/AxoModule.php

@@ -318,6 +318,15 @@ class AxoModule implements ServiceModule, ExtendingModule, ExecutableModule {
 				$endpoint->handle_request();
 			}
 		);
+
+		// Enqueue the PayPal Insights script.
+		add_action(
+			'wp_enqueue_scripts',
+			function () use ( $c ) {
+				$this->enqueue_paypal_insights_script_on_order_received( $c );
+			}
+		);
+
 		return true;
 	}
 
@@ -429,8 +438,8 @@ class AxoModule implements ServiceModule, ExtendingModule, ExecutableModule {
 	 * @return bool
 	 */
 	private function is_excluded_endpoint(): bool {
-		// Exclude the Order Pay endpoint.
-		return is_wc_endpoint_url( 'order-pay' );
+		// Exclude the Order Pay and Order Received endpoints.
+		return is_wc_endpoint_url( 'order-pay' ) || is_wc_endpoint_url( 'order-received' );
 	}
 
 	/**
@@ -451,4 +460,57 @@ class AxoModule implements ServiceModule, ExtendingModule, ExecutableModule {
 			$axo_enabled ? 'enabled' : 'disabled'
 		);
 	}
+
+	/**
+	 * Enqueues PayPal Insights on the Order Received endpoint.
+	 *
+	 * @param ContainerInterface $c The service container.
+	 * @return void
+	 */
+	private function enqueue_paypal_insights_script_on_order_received( ContainerInterface $c ): void {
+		global $wp;
+
+		if ( ! isset( $wp->query_vars['order-received'] ) ) {
+			return;
+		}
+
+		$order_id = absint( $wp->query_vars['order-received'] );
+		if ( ! $order_id ) {
+			return;
+		}
+
+		$order = wc_get_order( $order_id );
+		if ( ! $order || ! $order instanceof \WC_Order ) {
+			return;
+		}
+
+		$module_url    = $c->get( 'axo.url' );
+		$asset_version = $c->get( 'ppcp.asset-version' );
+		$insights_data = $c->get( 'axo.insights' );
+
+		wp_register_script(
+			'wc-ppcp-paypal-insights-end-checkout',
+			untrailingslashit( $module_url ) . '/assets/js/TrackEndCheckout.js',
+			array( 'wp-plugins', 'wp-data', 'wp-element', 'wc-blocks-registry' ),
+			$asset_version,
+			true
+		);
+
+		wp_localize_script(
+			'wc-ppcp-paypal-insights-end-checkout',
+			'wc_ppcp_axo_insights_data',
+			array_merge(
+				$insights_data,
+				array(
+					'orderId'       => $order_id,
+					'orderTotal'    => (string) $order->get_total(),
+					'orderCurrency' => (string) $order->get_currency(),
+					'paymentMethod' => (string) $order->get_payment_method(),
+					'orderKey'      => (string) $order->get_order_key(),
+				)
+			)
+		);
+
+		wp_enqueue_script( 'wc-ppcp-paypal-insights-end-checkout' );
+	}
 }

modules/ppcp-axo/webpack.config.js

@@ -9,15 +9,19 @@ module.exports = {
 	target: 'web',
 	plugins: [ new DependencyExtractionWebpackPlugin() ],
 	entry: {
-        'boot': path.resolve('./resources/js/boot.js'),
-        'styles': path.resolve('./resources/css/styles.scss')
+		boot: path.resolve( './resources/js/boot.js' ),
+		styles: path.resolve( './resources/css/styles.scss' ),
+		TrackEndCheckout: path.resolve(
+			'./resources/js/Insights/TrackEndCheckout.js'
+		),
 	},
 	output: {
 		path: path.resolve( __dirname, 'assets/' ),
 		filename: 'js/[name].js',
 	},
 	module: {
-        rules: [{
+		rules: [
+			{
 				test: /\.js?$/,
 				exclude: /node_modules/,
 				loader: 'babel-loader',
@@ -30,10 +34,11 @@ module.exports = {
 						loader: 'file-loader',
 						options: {
 							name: 'css/[name].css',
-                        }
 						},
-                    {loader:'sass-loader'}
-                ]
-            }]
-    }
+					},
+					{ loader: 'sass-loader' },
+				],
+			},
+		],
+	},
 };