Fix invalid value error for paymentMethodMessaging in product details page

changelog/fix-6819-payment-method-messaging-invalid-value

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Improved product details script with enhanced price calculation, and fallbacks for potential undefined values.

client/product-details/index.js

@@ -7,51 +7,95 @@
 import { initializeBnplSiteMessaging } from './bnpl-site-messaging';
 
 jQuery( function ( $ ) {
+	/**
+	 * Check for the existence of the `wcpayStripeSiteMessaging` variable on the window object.
+	 * This variable holds the configuration for Stripe site messaging and contains the following keys:
+	 *  - productId: The ID of the product.
+	 *  - productVariations: Variations of the product.
+	 *  - country: The country of the customer. Defaults to the store's country.
+	 *  - publishableKey: The key used for Stripe's API calls.
+	 *  - paymentMethods: Enabled BNPL payment methods.
+	 *
+	 * If this variable is not set, the script will exit early to prevent further execution.
+	 */
+	if ( ! window.wcpayStripeSiteMessaging ) {
+		return;
+	}
+
+	const { productVariations, productId } = window.wcpayStripeSiteMessaging;
 	const bnplPaymentMessageElement = initializeBnplSiteMessaging();
-	const { productVariations } = window.wcpayStripeSiteMessaging;
-	let { productId } = window.wcpayStripeSiteMessaging;
+
+	// Utility function to safely parse integers and handle NaN
+	const safeParseInt = ( value ) => {
+		const result = parseInt( value, 10 );
+		return isNaN( result ) ? 0 : result;
+	};
+
+	const updateBnplPaymentMessage = ( amount, currency ) => {
+		if ( amount > 0 && currency ) {
+			bnplPaymentMessageElement.update( { amount, currency } );
+		}
+	};
+
+	const quantityInput = $( '.quantity input[type=number]' );
 
 	const resetBnplPaymentMessage = () => {
-		const quantity = $( '.quantity input[type=number]' ).val();
-		productId = 'base_product';
-		bnplPaymentMessageElement.update( {
-			amount:
-				parseInt( productVariations.base_product.amount, 10 ) *
-				quantity,
-			currency: productVariations.base_product.currency,
-		} );
+		if ( ! quantityInput.length || ! productVariations.base_product )
+			return;
+
+		const quantity = safeParseInt( quantityInput.val() );
+		const baseProductAmount = safeParseInt(
+			productVariations.base_product.amount
+		);
+
+		const amount = baseProductAmount * quantity;
+		const currency = productVariations.base_product.currency;
+
+		updateBnplPaymentMessage( amount, currency );
 	};
 
-	$( '.quantity input[type=number]' ).on( 'change', function ( event ) {
-		const newQuantity = event.target.value;
-		const price = productVariations[ productId ].amount;
-		bnplPaymentMessageElement.update( {
-			amount: parseInt( price, 10 ) * newQuantity,
-			currency: productVariations[ productId ].currency,
-		} );
+	// Update BNPL message based on the quantity change
+	quantityInput.on( 'change', ( event ) => {
+		const newQuantity = safeParseInt( event.target.value );
+		const price = safeParseInt( productVariations[ productId ].amount );
+
+		const amount = price * newQuantity;
+		const currency = productVariations[ productId ]?.currency;
+
+		updateBnplPaymentMessage( amount, currency );
 	} );
 
 	// Handle BNPL messaging for variable products.
 	if ( Object.keys( productVariations ).length > 1 ) {
-		$( '.single_variation_wrap' ).on( 'show_variation', function (
-			event,
-			variation
-		) {
-			const quantity = $( '.quantity input[type=number]' ).val();
-			const variationPrice =
-				productVariations[ variation.variation_id ].amount;
-			productId = variation.variation_id;
-			bnplPaymentMessageElement.update( {
-				amount: parseInt( variationPrice, 10 ) * quantity,
-				currency: productVariations[ variation.variation_id ].currency,
-			} );
-		} );
+		// Update BNPL message based on product variation
+		$( '.single_variation_wrap' ).on(
+			'show_variation',
+			( event, variation ) => {
+				if (
+					! quantityInput.length ||
+					! productVariations[ variation.variation_id ]
+				)
+					return;
+
+				const quantity = safeParseInt( quantityInput.val() );
+				const variationPrice = safeParseInt(
+					productVariations[ variation.variation_id ].amount
+				);
+
+				const amount = variationPrice * quantity;
+				const currency =
+					productVariations[ variation.variation_id ]?.currency;
+
+				updateBnplPaymentMessage( amount, currency );
+			}
+		);
 
-		// If variation is changed back to default, reset BNPL messaging.
-		$( '.variations' ).on( 'change', function ( event ) {
+		// Reset BNPL message if variation is changed back to default
+		$( '.variations' ).on( 'change', ( event ) => {
 			if ( event.target.value === '' ) resetBnplPaymentMessage();
 		} );
 
+		// Reset BNPL message on variations reset
 		$( '.reset_variations' ).on( 'click', resetBnplPaymentMessage );
 	}
 } );