@automattic/newspack-blocks 4.26.5 → 4.26.6-alpha.1

package/src/modal-checkout/checkout-button-trigger.js

@@ -0,0 +1,190 @@
+/**
+ * Resolve the form submitted by a modal checkout `checkout_button` URL trigger.
+ */
+
+/**
+ * Parse a form's `data-checkout` attribute without throwing.
+ * Picker forms do not carry `data-checkout`.
+ *
+ * @param {HTMLElement|null} form The form element.
+ *
+ * @return {Object|null} The parsed checkout data, or null.
+ */
+export function readCheckoutData( form ) {
+	const raw = form && form.dataset ? form.dataset.checkout : null;
+	if ( ! raw ) {
+		return null;
+	}
+	try {
+		return JSON.parse( raw );
+	} catch ( e ) {
+		return null;
+	}
+}
+
+/**
+ * Find a checkout button form matching the requested product.
+ *
+ * Variation requests are never served by a button locked to a different
+ * variation.
+ *
+ * @param {Document|HTMLElement} root        The DOM root to search.
+ * @param {string}               productId   The requested product ID.
+ * @param {string|null}          variationId Optional. The requested variation ID.
+ *
+ * @return {HTMLFormElement|null} The matching form, or null.
+ */
+export function findCheckoutButtonForm( root, productId, variationId = null ) {
+	const buttons = root.querySelectorAll( '.wp-block-newspack-blocks-checkout-button' );
+	const hasVariation = variationId !== null && variationId !== undefined && String( variationId ) !== '';
+	let match = null;
+	buttons.forEach( button => {
+		if ( match ) {
+			return;
+		}
+		const form = button.querySelector( 'form' );
+		const data = readCheckoutData( form );
+		if ( ! data ) {
+			return;
+		}
+		if ( String( data.product_id ) !== String( productId ) ) {
+			return;
+		}
+		if ( hasVariation && String( data.variation_id ) !== String( variationId ) ) {
+			return;
+		}
+		match = form;
+	} );
+	return match;
+}
+
+/**
+ * Select the requested variation in a product picker.
+ * Picker forms use the selected radio value instead of `data-checkout`.
+ *
+ * Side effect: when a matching radio is found it is checked (mutating the DOM)
+ * before the form is returned, so the form submits the requested variation.
+ *
+ * @param {Document|HTMLElement} root                              The DOM root to search.
+ * @param {string}               productId                         The parent product ID of the picker.
+ * @param {string}               variationId                       The requested variation ID.
+ * @param {Object}               options                           Options.
+ * @param {string}               options.variationModalClassPrefix Class of the picker container.
+ * @param {string}               options.iframeName                The checkout iframe name (form target).
+ *
+ * @return {HTMLFormElement|null} The picker form, or null.
+ */
+export function selectPickerForm( root, productId, variationId, options = {} ) {
+	const { variationModalClassPrefix, iframeName } = options;
+	const modals = root.querySelectorAll( `.${ variationModalClassPrefix }` );
+	const modal = [ ...modals ].find( el => String( el.dataset.productId ) === String( productId ) );
+	if ( ! modal ) {
+		return null;
+	}
+	const forms = modal.querySelectorAll( 'form' );
+	const form = iframeName ? [ ...forms ].find( el => el.getAttribute( 'target' ) === iframeName ) : forms[ 0 ];
+	if ( ! form ) {
+		return null;
+	}
+	const radios = form.querySelectorAll( 'input[type="radio"][name="product_id"]' );
+	const radio = [ ...radios ].find( input => String( input.value ) === String( variationId ) );
+	if ( ! radio ) {
+		return null;
+	}
+	radio.checked = true;
+	return form;
+}
+
+/**
+ * Hidden fields copied from a source checkout button to a picker submission.
+ *
+ * @type {string[]}
+ */
+export const PICKER_CONTEXT_FIELDS = [
+	'after_success_behavior',
+	'after_success_url',
+	'after_success_button_label',
+	'gate_post_id',
+	'newspack_popup_id',
+	'prompt_title',
+];
+
+/**
+ * Copy context fields. Target values are preserved, empty source values are
+ * skipped, and null forms are ignored.
+ *
+ * @param {HTMLFormElement|null} sourceForm Checkout button form to read from.
+ * @param {HTMLFormElement|null} targetForm Picker form to copy into.
+ * @param {string[]}             fields     Field names to copy.
+ *
+ * @return {void}
+ */
+export function copyContextFields( sourceForm, targetForm, fields = PICKER_CONTEXT_FIELDS ) {
+	if ( ! sourceForm || ! targetForm ) {
+		return;
+	}
+	const doc = targetForm.ownerDocument;
+	const sourceData = new FormData( sourceForm );
+	fields.forEach( name => {
+		if ( targetForm.querySelector( `input[name="${ name }"]` ) ) {
+			return;
+		}
+		const values = sourceData.getAll( name ).filter( value => typeof value === 'string' && value );
+		if ( ! values.length ) {
+			return;
+		}
+		const input = doc.createElement( 'input' );
+		input.type = 'hidden';
+		input.name = name;
+		input.value = values[ values.length - 1 ];
+		targetForm.prepend( input );
+	} );
+}
+
+/**
+ * Resolve which form a `checkout_button` URL trigger should submit.
+ *
+ * Strict order: exact button, picker, then explicit product-only fallback.
+ * Returning null prevents silent substitution.
+ *
+ * @param {Document|HTMLElement} root        The DOM root to search.
+ * @param {string}               productId   The requested product ID.
+ * @param {string|null}          variationId Optional. The requested variation ID.
+ * @param {Object}               options     Options (see selectPickerForm) plus
+ *                                           `allowProductOnlyFallback` (default false).
+ *
+ * @return {HTMLFormElement|null} The form to submit, or null.
+ */
+export function resolveCheckoutButtonForm( root, productId, variationId, options = {} ) {
+	const { allowProductOnlyFallback = false } = options;
+	const hasVariation = variationId !== null && variationId !== undefined && String( variationId ) !== '';
+
+	if ( ! hasVariation ) {
+		// No variation requested. If several buttons on the page share this
+		// parent product, the first in DOM order is used (along with its
+		// context); the URL gives no signal to prefer one over another.
+		return findCheckoutButtonForm( root, productId, null );
+	}
+
+	const exact = findCheckoutButtonForm( root, productId, variationId );
+	if ( exact ) {
+		return exact;
+	}
+
+	const picker = selectPickerForm( root, productId, variationId, options );
+	if ( picker ) {
+		// The source button may be locked to another variation. Use it only
+		// for block context, then submit the picker. The picker is only reached
+		// because no button matches the requested variation, so when several
+		// buttons share this parent product there is no single correct one to
+		// prefer: the first in DOM order supplies the context.
+		copyContextFields( findCheckoutButtonForm( root, productId, null ), picker );
+		return picker;
+	}
+
+	if ( allowProductOnlyFallback ) {
+		return findCheckoutButtonForm( root, productId, null );
+	}
+
+	return null;
+}

package/src/modal-checkout/checkout-button-trigger.test.js

@@ -0,0 +1,266 @@
+/**
+ * Tests for the checkout-button URL trigger resolution helpers.
+ */
+
+import { readCheckoutData, findCheckoutButtonForm, selectPickerForm, resolveCheckoutButtonForm, copyContextFields } from './checkout-button-trigger';
+
+const VARIATION_MODAL_CLASS_PREFIX = 'newspack-blocks__modal-variation';
+const IFRAME_NAME = 'newspack_modal_checkout_iframe';
+
+const PICKER_OPTIONS = {
+	variationModalClassPrefix: VARIATION_MODAL_CLASS_PREFIX,
+	iframeName: IFRAME_NAME,
+};
+
+/**
+ * Build a checkout button block markup string.
+ *
+ * @param {Object|null} checkoutData Object to JSON-encode into data-checkout, or null to omit it.
+ * @param {string}      label        Button label.
+ * @return {string} HTML.
+ */
+const checkoutButton = ( checkoutData, label = 'Buy' ) => {
+	const attr = checkoutData ? ` data-checkout='${ JSON.stringify( checkoutData ) }'` : '';
+	return `<div class="wp-block-newspack-blocks-checkout-button"><form${ attr }><button type="submit">${ label }</button></form></div>`;
+};
+
+/**
+ * Build a variation picker modal, mirroring Subscriptions_Tiers::render_form output:
+ * a single form with `target` set, radio inputs named product_id, and no data-checkout.
+ *
+ * @param {string}   productId Parent product id for the picker container.
+ * @param {string[]} radioIds  Radio values (variation/child ids).
+ * @return {string} HTML.
+ */
+const variationPicker = ( productId, radioIds ) => {
+	const radios = radioIds.map( id => `<input type="radio" name="product_id" value="${ id }">` ).join( '' );
+	return `<div class="${ VARIATION_MODAL_CLASS_PREFIX }" data-product-id="${ productId }"><form target="${ IFRAME_NAME }">${ radios }<button type="submit">Purchase</button></form></div>`;
+};
+
+const render = html => {
+	document.body.innerHTML = html;
+	return document.body;
+};
+
+afterEach( () => {
+	document.body.innerHTML = '';
+} );
+
+describe( 'readCheckoutData', () => {
+	it( 'parses a valid data-checkout attribute', () => {
+		const root = render( checkoutButton( { product_id: '1406', variation_id: '1408' } ) );
+		const form = root.querySelector( 'form' );
+		expect( readCheckoutData( form ) ).toEqual( { product_id: '1406', variation_id: '1408' } );
+	} );
+
+	it( 'returns null without throwing when the attribute is missing', () => {
+		const root = render( variationPicker( '1434', [ '158' ] ) );
+		const form = root.querySelector( 'form' );
+		expect( () => readCheckoutData( form ) ).not.toThrow();
+		expect( readCheckoutData( form ) ).toBeNull();
+	} );
+
+	it( 'returns null without throwing on malformed JSON', () => {
+		const root = render( '<div class="wp-block-newspack-blocks-checkout-button"><form data-checkout="not json">x</form></div>' );
+		const form = root.querySelector( 'form' );
+		expect( () => readCheckoutData( form ) ).not.toThrow();
+		expect( readCheckoutData( form ) ).toBeNull();
+	} );
+
+	it( 'returns null for a null form', () => {
+		expect( readCheckoutData( null ) ).toBeNull();
+	} );
+} );
+
+describe( 'findCheckoutButtonForm', () => {
+	it( 'requires both product_id and variation_id to match when a variation is requested', () => {
+		const root = render( checkoutButton( { product_id: '1406', variation_id: '1408', is_variable: true } ) );
+		const form = root.querySelector( 'form' );
+		expect( findCheckoutButtonForm( root, '1406', '1408' ) ).toBe( form );
+	} );
+
+	it( 'does NOT match a locked button for a different requested variation', () => {
+		const root = render( checkoutButton( { product_id: '1406', variation_id: '1408', is_variable: true } ) );
+		// Request 1407 while only the 1408-locked button exists.
+		expect( findCheckoutButtonForm( root, '1406', '1407' ) ).toBeNull();
+	} );
+
+	it( 'matches by product_id only when no variation is requested', () => {
+		const root = render( checkoutButton( { product_id: '1406', variation_id: '1408', is_variable: true } ) );
+		const form = root.querySelector( 'form' );
+		expect( findCheckoutButtonForm( root, '1406', null ) ).toBe( form );
+	} );
+
+	it( 'does not match a grouped button (no variation_id) for a variation request', () => {
+		const root = render( checkoutButton( { product_id: '1434' }, 'Buy grouped' ) );
+		expect( findCheckoutButtonForm( root, '1434', '158' ) ).toBeNull();
+	} );
+
+	it( 'skips forms with missing or invalid data-checkout without throwing', () => {
+		const root = render( variationPicker( '1406', [ '1408' ] ) + checkoutButton( { product_id: '1406', variation_id: '1408' } ) );
+		expect( () => findCheckoutButtonForm( root, '1406', '1408' ) ).not.toThrow();
+		expect( findCheckoutButtonForm( root, '1406', '1408' ) ).not.toBeNull();
+	} );
+} );
+
+describe( 'selectPickerForm', () => {
+	it( 'checks the radio matching the variation and returns the picker form', () => {
+		const root = render( variationPicker( '1406', [ '1407', '1408', '1409' ] ) );
+		const form = selectPickerForm( root, '1406', '1407', PICKER_OPTIONS );
+		expect( form ).toBe( root.querySelector( `.${ VARIATION_MODAL_CLASS_PREFIX } form` ) );
+		expect( root.querySelector( 'input[value="1407"]' ).checked ).toBe( true );
+		expect( root.querySelector( 'input[value="1408"]' ).checked ).toBe( false );
+	} );
+
+	it( 'returns null when no picker exists for the product', () => {
+		const root = render( variationPicker( '1434', [ '158' ] ) );
+		expect( selectPickerForm( root, '1406', '1407', PICKER_OPTIONS ) ).toBeNull();
+	} );
+
+	it( 'returns null when no radio matches the variation', () => {
+		const root = render( variationPicker( '1406', [ '1407', '1409' ] ) );
+		expect( selectPickerForm( root, '1406', '1408', PICKER_OPTIONS ) ).toBeNull();
+	} );
+
+	it( 'only selects radio inputs inside the checkout iframe form', () => {
+		const root = render(
+			`<div class="${ VARIATION_MODAL_CLASS_PREFIX }" data-product-id="1406">` +
+				'<form target="other_iframe"><input type="radio" name="product_id" value="1407"></form>' +
+				`<form target="${ IFRAME_NAME }">` +
+				'<input type="hidden" name="product_id" value="1407">' +
+				'<input type="radio" name="product_id" value="1408">' +
+				'</form>' +
+				'</div>'
+		);
+		const checkoutForm = root.querySelector( `form[target="${ IFRAME_NAME }"]` );
+
+		expect( selectPickerForm( root, '1406', '1407', PICKER_OPTIONS ) ).toBeNull();
+		expect( selectPickerForm( root, '1406', '1408', PICKER_OPTIONS ) ).toBe( checkoutForm );
+		expect( checkoutForm.querySelector( 'input[type="radio"][value="1408"]' ).checked ).toBe( true );
+	} );
+} );
+
+describe( 'resolveCheckoutButtonForm', () => {
+	it( 'returns the picker form for a non-locked variation rather than the locked checkout button', () => {
+		const root = render(
+			checkoutButton( { product_id: '1406', variation_id: '1408', is_variable: true }, 'Subscribe' ) +
+				variationPicker( '1406', [ '1407', '1408', '1409' ] )
+		);
+		const pickerForm = root.querySelector( `.${ VARIATION_MODAL_CLASS_PREFIX } form` );
+		const result = resolveCheckoutButtonForm( root, '1406', '1407', PICKER_OPTIONS );
+		expect( result ).toBe( pickerForm );
+		expect( root.querySelector( 'input[value="1407"]' ).checked ).toBe( true );
+	} );
+
+	it( 'returns the exact checkout button form when the requested variation is the locked one', () => {
+		const root = render(
+			checkoutButton( { product_id: '1406', variation_id: '1408', is_variable: true }, 'Subscribe' ) +
+				variationPicker( '1406', [ '1407', '1408', '1409' ] )
+		);
+		const buttonForm = root.querySelector( '.wp-block-newspack-blocks-checkout-button form' );
+		expect( resolveCheckoutButtonForm( root, '1406', '1408', PICKER_OPTIONS ) ).toBe( buttonForm );
+	} );
+
+	it( 'drives the grouped picker without throwing on its data-checkout-less form', () => {
+		const root = render( checkoutButton( { product_id: '1434' }, 'Buy grouped' ) + variationPicker( '1434', [ '158' ] ) );
+		const pickerForm = root.querySelector( `.${ VARIATION_MODAL_CLASS_PREFIX } form` );
+		let result;
+		expect( () => {
+			result = resolveCheckoutButtonForm( root, '1434', '158', PICKER_OPTIONS );
+		} ).not.toThrow();
+		expect( result ).toBe( pickerForm );
+		expect( root.querySelector( 'input[value="158"]' ).checked ).toBe( true );
+	} );
+
+	it( 'returns null for an invalid variation when product-only fallback is off (default)', () => {
+		const root = render( checkoutButton( { product_id: '158' }, 'Checkout' ) );
+		expect( resolveCheckoutButtonForm( root, '158', '160', PICKER_OPTIONS ) ).toBeNull();
+	} );
+
+	it( 'treats a variation_id equal to product_id as a strict variation request', () => {
+		const root = render( checkoutButton( { product_id: '158' }, 'Checkout' ) );
+		expect( resolveCheckoutButtonForm( root, '158', '158', PICKER_OPTIONS ) ).toBeNull();
+	} );
+
+	it( 'returns the product-only button for an invalid variation only when fallback is explicitly enabled', () => {
+		const root = render( checkoutButton( { product_id: '158' }, 'Checkout' ) );
+		const buttonForm = root.querySelector( 'form' );
+		expect( resolveCheckoutButtonForm( root, '158', '160', { ...PICKER_OPTIONS, allowProductOnlyFallback: true } ) ).toBe( buttonForm );
+	} );
+
+	it( 'matches a checkout button by product_id when no variation is requested', () => {
+		const root = render( checkoutButton( { product_id: '1406', variation_id: '1408', is_variable: true } ) );
+		const buttonForm = root.querySelector( 'form' );
+		expect( resolveCheckoutButtonForm( root, '1406', null, PICKER_OPTIONS ) ).toBe( buttonForm );
+	} );
+
+	it( 'returns null without throwing when nothing matches', () => {
+		const root = render( checkoutButton( { product_id: '999' } ) );
+		let result;
+		expect( () => {
+			result = resolveCheckoutButtonForm( root, '1406', '1407', PICKER_OPTIONS );
+		} ).not.toThrow();
+		expect( result ).toBeNull();
+	} );
+
+	it( 'copies block context from the source button into the picker form without submitting the locked button', () => {
+		const button = `<div class="wp-block-newspack-blocks-checkout-button"><form data-checkout='${ JSON.stringify( {
+			product_id: '1406',
+			variation_id: '1408',
+			is_variable: true,
+		} ) }'><input type="hidden" name="after_success_button_label" value="Thanks!"><input type="hidden" name="after_success_url" value="/welcome/"><button type="submit">Subscribe</button></form></div>`;
+		const root = render( button + variationPicker( '1406', [ '1407', '1408', '1409' ] ) );
+		const pickerForm = root.querySelector( `.${ VARIATION_MODAL_CLASS_PREFIX } form` );
+		const buttonForm = root.querySelector( '.wp-block-newspack-blocks-checkout-button form' );
+
+		const result = resolveCheckoutButtonForm( root, '1406', '1407', PICKER_OPTIONS );
+
+		expect( result ).toBe( pickerForm );
+		expect( result ).not.toBe( buttonForm );
+		expect( pickerForm.querySelector( 'input[name="after_success_button_label"]' ).value ).toBe( 'Thanks!' );
+		expect( pickerForm.querySelector( 'input[name="after_success_url"]' ).value ).toBe( '/welcome/' );
+	} );
+} );
+
+describe( 'copyContextFields', () => {
+	it( 'copies present source fields, skips missing ones, and does not overwrite existing target fields', () => {
+		const root = render(
+			`<form id="src"><input type="hidden" name="after_success_url" value="/welcome/"><input type="hidden" name="prompt_title" value="Join"></form>` +
+				`<form id="dst"><input type="hidden" name="prompt_title" value="Existing"></form>`
+		);
+		const source = root.querySelector( '#src' );
+		const target = root.querySelector( '#dst' );
+
+		copyContextFields( source, target );
+
+		// Copied from source.
+		expect( target.querySelector( 'input[name="after_success_url"]' ).value ).toBe( '/welcome/' );
+		// Not overwritten.
+		expect( target.querySelector( 'input[name="prompt_title"]' ).value ).toBe( 'Existing' );
+		// Missing on source -> not added.
+		expect( target.querySelector( 'input[name="gate_post_id"]' ) ).toBeNull();
+	} );
+
+	it( 'copies the last source value when a context field is duplicated', () => {
+		const root = render(
+			'<form id="src">' +
+				'<input type="hidden" name="after_success_url" value="/first/">' +
+				'<input type="hidden" name="after_success_url" value="/last/">' +
+				'</form>' +
+				'<form id="dst"></form>'
+		);
+		const source = root.querySelector( '#src' );
+		const target = root.querySelector( '#dst' );
+
+		copyContextFields( source, target );
+
+		expect( target.querySelector( 'input[name="after_success_url"]' ).value ).toBe( '/last/' );
+	} );
+
+	it( 'does not throw when source or target is null', () => {
+		const root = render( '<form id="dst"></form>' );
+		const target = root.querySelector( '#dst' );
+		expect( () => copyContextFields( null, target ) ).not.toThrow();
+		expect( () => copyContextFields( target, null ) ).not.toThrow();
+	} );
+} );

package/src/modal-checkout/modal.js

@@ -24,6 +24,7 @@ import {
 	getCheckoutData,
 	getFormattedAmount,
 } from './utils';
+import { resolveCheckoutButtonForm, readCheckoutData } from './checkout-button-trigger';
 
 const CLASS_PREFIX = newspackBlocksModal.newspack_class_prefix;
 const IFRAME_NAME = 'newspack_modal_checkout_iframe';
@@ -376,9 +377,8 @@ domReady( () => {
 					} );
 
 					// Append the product data hidden inputs.
-					const variationData = singleVariationForm.dataset.checkout;
-					if ( variationData ) {
-						const data = JSON.parse( variationData );
+					const data = readCheckoutData( singleVariationForm );
+					if ( data ) {
 						Object.keys( data ).forEach( key => {
 							const existingInputs = singleVariationForm.querySelectorAll( 'input[name="' + key + '"]' );
 							if ( 0 === existingInputs.length ) {
@@ -799,41 +799,29 @@ domReady( () => {
 	};
 
 	/**
-	 * Handle checkout button form triggers.
+	 * Handle checkout button URL triggers.
 	 *
-	 * @param {number}      productId   The product ID.
-	 * @param {number|null} variationId Optional. The variation ID.
+	 * @param {string}      productId   The product ID.
+	 * @param {string|null} variationId Optional. The variation ID.
+	 *
+	 * @return {boolean} Whether a matching form was submitted.
 	 */
 	const triggerCheckoutButtonForm = ( productId, variationId = null ) => {
-		let form;
-		if ( variationId && variationId !== productId ) {
-			const variationModals = document.querySelectorAll( `.${ VARIATON_MODAL_CLASS_PREFIX }` );
-			const variationModal = [ ...variationModals ].find( modal => modal.dataset.productId === productId );
-			if ( variationModal ) {
-				const forms = variationModal.querySelectorAll( `form[target="${ IFRAME_NAME }"]` );
-				forms.forEach( variationForm => {
-					const productData = JSON.parse( variationForm.dataset.checkout );
-					if ( productData?.variation_id === Number( variationId ) ) {
-						form = variationForm;
-					}
-				} );
-			}
-		} else {
-			const checkoutButtons = document.querySelectorAll( '.wp-block-newspack-blocks-checkout-button' );
-			checkoutButtons.forEach( button => {
-				const checkoutButtonForm = button.querySelector( 'form' );
-				if ( ! checkoutButtonForm ) {
-					return;
-				}
-				const productData = JSON.parse( checkoutButtonForm.dataset.checkout );
-				if ( productData?.product_id === productId ) {
-					form = checkoutButtonForm;
-				}
-			} );
-		}
+		const form = resolveCheckoutButtonForm( document, productId, variationId, {
+			variationModalClassPrefix: VARIATON_MODAL_CLASS_PREFIX,
+			iframeName: IFRAME_NAME,
+		} );
 		if ( form ) {
 			triggerFormSubmit( form );
-		}
+			return true;
+		}
+		const message =
+			`Newspack modal checkout: no checkout form found for product_id "${ productId }"` +
+			( variationId ? ` and variation_id "${ variationId }"` : '' ) +
+			'. The checkout was not triggered.';
+		// eslint-disable-next-line no-console
+		console.warn( message );
+		return false;
 	};
 
 	/**
@@ -844,6 +832,10 @@ domReady( () => {
 		if ( ! urlParams.has( 'checkout' ) ) {
 			return;
 		}
+		// Default to stripping the params after handling. The checkout button
+		// trigger overrides this so a link that matches no form stays visible
+		// and diagnosable rather than being silently dropped.
+		let shouldStripParams = true;
 		const type = urlParams.get( 'type' );
 		if ( type === 'donate' ) {
 			const layout = urlParams.get( 'layout' );
@@ -857,7 +849,13 @@ domReady( () => {
 			const productId = urlParams.get( 'product_id' );
 			const variationId = urlParams.get( 'variation_id' );
 			if ( productId ) {
-				triggerCheckoutButtonForm( productId, variationId );
+				shouldStripParams = triggerCheckoutButtonForm( productId, variationId );
+			} else {
+				// A checkout_button trigger with no product_id cannot resolve a
+				// form; keep the params visible rather than dropping them silently.
+				shouldStripParams = false;
+				// eslint-disable-next-line no-console
+				console.warn( 'Newspack modal checkout: checkout_button trigger is missing product_id. The checkout was not triggered.' );
 			}
 		} else {
 			const url = window.newspackReaderActivation?.getPendingCheckout?.();
@@ -866,8 +864,11 @@ domReady( () => {
 				triggerFormSubmit( form );
 			}
 		}
-		// Remove the URL param to prevent re-triggering.
-		window.history.replaceState( null, null, window.location.pathname );
+		// Remove the URL params to prevent re-triggering, but only when the
+		// trigger succeeded.
+		if ( shouldStripParams ) {
+			window.history.replaceState( null, null, window.location.pathname );
+		}
 	};
 	handleModalCheckoutUrlParams();
 

package/src/modal-checkout/modal.scss

@@ -30,7 +30,7 @@
 			z-index: 1;
 			inset: 0;
 			opacity: 0;
-			background: rgba(np-colors.$neutral-1000, 0.5);
+			background: np-colors.$overlay-700;
 			transition: opacity 0.1s linear;
 		}
 

package/vendor/composer/installed.php

@@ -3,7 +3,7 @@
         'name' => 'automattic/newspack-blocks',
         'pretty_version' => 'dev-main',
         'version' => 'dev-main',
-        'reference' => 'ca1f2b8803452beb52cb6145bc5f23a20f99e699',
+        'reference' => '19f5a2811b00a19f3c950a6436ac64309d3749a5',
         'type' => 'wordpress-plugin',
         'install_path' => __DIR__ . '/../../',
         'aliases' => array(),
@@ -13,7 +13,7 @@
         'automattic/newspack-blocks' => array(
             'pretty_version' => 'dev-main',
             'version' => 'dev-main',
-            'reference' => 'ca1f2b8803452beb52cb6145bc5f23a20f99e699',
+            'reference' => '19f5a2811b00a19f3c950a6436ac64309d3749a5',
             'type' => 'wordpress-plugin',
             'install_path' => __DIR__ . '/../../',
             'aliases' => array(),