fix: add supported gateways check

includes/class-modal-checkout.php

@@ -108,6 +108,21 @@ final class Modal_Checkout {
 		'metorik',
 	];
 
+	/**
+	 * Supported Payment Gateways
+	 *
+	 * @var string[]
+	 */
+	private static $supported_gateways = [
+		'bacs', // Direct bank transfer.
+		'cheque',
+		'cod', // Cash on delivery.
+		'ppcp-gateway', // PayPal Payments.
+		'stripe',
+		'stripe-link',
+		'woocommerce_payments',
+	];
+
 	/**
 	 * Initialize hooks.
 	 */
@@ -151,7 +166,6 @@ public static function init() {
 		add_action( 'init', [ __CLASS__, 'unhook_woocommerce_payments_update_billing_fields' ] );
 		add_action( 'wp_enqueue_scripts', [ __CLASS__, 'update_password_strength_message' ], 9999 );
 
-
 		/** Custom handling for registered users. */
 		add_filter( 'woocommerce_checkout_customer_id', [ __CLASS__, 'associate_existing_user' ] );
 		add_action( 'woocommerce_after_checkout_validation', [ __CLASS__, 'maybe_reset_checkout_registration_flag' ], 10, 2 );
@@ -224,6 +238,38 @@ public static function dequeue_woocommerce_styles( $enqueue_styles ) {
 		return $enqueue_styles;
 	}
 
+	/**
+	 * Get list of supported payment gateways for Modal Checkout.
+	 *
+	 * @return string[] Supported payment gateways.
+	 */
+	public static function get_supported_payment_gateways() {
+		/**
+		 * Filters the list of supported gateways in modal checkout.
+		 *
+		 * @param array $supported_gateways
+		 */
+		return apply_filters( 'newspack_blocks_modal_checkout_supported_gateways', self::$supported_gateways );
+	}
+
+	/**
+	 * Whether any available payment gateways are not suppored in modal checkout.
+	 *
+	 * @return boolean
+	 */
+	public static function has_unsupported_payment_gateway() {
+		$supported_gateways          = self::get_supported_payment_gateways();
+		$available_gateways          = \WC()->payment_gateways->get_available_payment_gateways();
+		$unsupported_payment_gateway = false;
+		foreach ( $available_gateways as $id => $gateway ) {
+			if ( ! in_array( $id, $supported_gateways, true ) ) {
+				$unsupported_payment_gateway = true;
+				break;
+			}
+		}
+		return $unsupported_payment_gateway;
+	}
+
 	/**
 	 * Process checkout request for modal.
 	 */
@@ -334,13 +380,18 @@ function ( $item ) {
 		if ( ! empty( $referer_categories ) ) {
 			$query_args['referer_categories'] = implode( ',', $referer_categories );
 		}
-		$query_args['modal_checkout'] = 1;
+
+		if ( ! self::has_unsupported_payment_gateway() ) {
+			$query_args['modal_checkout'] = 1;
+		}
 
 		// Pass through UTM and after_success params so they can be forwarded to the WooCommerce checkout flow.
 		foreach ( $params as $param => $value ) {
 			if ( 'utm' === substr( $param, 0, 3 ) || 'after_success' === substr( $param, 0, 13 ) ) {
-				$param                = sanitize_text_field( $param );
-				$query_args[ $param ] = sanitize_text_field( $value );
+				if ( ! empty( $value ) ) {
+					$param                = sanitize_text_field( $param );
+					$query_args[ $param ] = sanitize_text_field( $value );
+				}
 			}
 		}
 
@@ -933,11 +984,12 @@ public static function enqueue_modal( $product_id = null ) {
 			'newspack-blocks-modal',
 			'newspackBlocksModal',
 			[
-				'ajax_url'                   => admin_url( 'admin-ajax.php' ),
-				'checkout_registration_flag' => self::CHECKOUT_REGISTRATION_FLAG,
-				'newspack_class_prefix'      => self::get_class_prefix(),
-				'is_registration_required'   => self::is_registration_required(),
-				'labels'                     => [
+				'ajax_url'                        => admin_url( 'admin-ajax.php' ),
+				'checkout_registration_flag'      => self::CHECKOUT_REGISTRATION_FLAG,
+				'newspack_class_prefix'           => self::get_class_prefix(),
+				'is_registration_required'        => self::is_registration_required(),
+				'has_unsupported_payment_gateway' => self::has_unsupported_payment_gateway(),
+				'labels'                          => [
 					'auth_modal_title'     => self::get_modal_checkout_labels( 'auth_modal_title' ),
 					'checkout_modal_title' => self::get_modal_checkout_labels( 'checkout_modal_title' ),
 					'register_modal_title' => self::get_modal_checkout_labels( 'register_modal_title' ),
@@ -1052,7 +1104,7 @@ private static function render_hidden_inputs() {
 	 * @return string
 	 */
 	public static function woocommerce_get_return_url( $url, $order ) {
-		if ( ! self::is_modal_checkout() ) {
+		if ( ! self::is_modal_checkout() || self::has_unsupported_payment_gateway() ) {
 			return $url;
 		}
 

src/blocks/checkout-button/view.php

@@ -101,10 +101,12 @@ function render_callback( $attributes ) {
 	);
 
 	// Generate hidden fields for the form.
-	$hidden_fields  = '<input type="hidden" name="newspack_checkout" value="1" />';
-	$hidden_fields .= $after_success_behavior ? '<input type="hidden" name="after_success_behavior" value="' . esc_attr( $after_success_behavior ) . '" />' : '';
-	$hidden_fields .= $after_success_button_label ? '<input type="hidden" name="after_success_button_label" value="' . esc_attr( $after_success_button_label ) . '" />' : '';
-	$hidden_fields .= $after_success_url ? '<input type="hidden" name="after_success_url" value="' . esc_attr( $after_success_url ) . '" />' : '';
+	$hidden_fields = '<input type="hidden" name="newspack_checkout" value="1" />';
+	if ( ! Modal_Checkout::has_unsupported_payment_gateway() ) {
+		$hidden_fields .= $after_success_behavior ? '<input type="hidden" name="after_success_behavior" value="' . esc_attr( $after_success_behavior ) . '" />' : '';
+		$hidden_fields .= $after_success_button_label ? '<input type="hidden" name="after_success_button_label" value="' . esc_attr( $after_success_button_label ) . '" />' : '';
+		$hidden_fields .= $after_success_url ? '<input type="hidden" name="after_success_url" value="' . esc_attr( $after_success_url ) . '" />' : '';
+	}
 
 	// Generate the form.
 	if ( function_exists( 'wc_get_product' ) ) {

src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-base.php

@@ -203,13 +203,15 @@ protected static function render_hidden_form_inputs( $attributes ) {
 			<input type='hidden' name='frequency_ids' value='<?php echo esc_attr( wp_json_encode( $donate_child_ids ) ); ?>' />
 		<?php
 
-		foreach ( [ [ 'afterSuccessBehavior', 'after_success_behavior' ], [ 'afterSuccessButtonLabel', 'after_success_button_label' ], [ 'afterSuccessURL', 'after_success_url' ] ] as $attribute ) {
-			$attribute_name = $attribute[0];
-			$param_name     = $attribute[1];
-			$value          = isset( $attributes[ $attribute_name ] ) ? $attributes[ $attribute_name ] : '';
-			?>
-				<input type='hidden' name='<?php echo esc_attr( $param_name ); ?>' value='<?php echo esc_attr( $value ); ?>' />
-			<?php
+		if ( ! \Newspack_Blocks\Modal_Checkout::has_unsupported_payment_gateway() ) {
+			foreach ( [ [ 'afterSuccessBehavior', 'after_success_behavior' ], [ 'afterSuccessButtonLabel', 'after_success_button_label' ], [ 'afterSuccessURL', 'after_success_url' ] ] as $attribute ) {
+				$attribute_name = $attribute[0];
+				$param_name     = $attribute[1];
+				$value          = isset( $attributes[ $attribute_name ] ) ? $attributes[ $attribute_name ] : '';
+				?>
+					<input type='hidden' name='<?php echo esc_attr( $param_name ); ?>' value='<?php echo esc_attr( $value ); ?>' />
+				<?php
+			}
 		}
 		return ob_get_clean();
 	}

src/modal-checkout/modal.js

@@ -24,9 +24,27 @@ let analyticsData = {};
 // Track the checkout intent to avoid multiple analytics events.
 let inCheckoutIntent = false;
 
+// Close the modal.
+const closeModal = el => {
+	if ( el.overlayId && window.newspackReaderActivation?.overlays ) {
+		window.newspackReaderActivation?.overlays.remove( el.overlayId );
+	}
+	el.setAttribute( 'data-state', 'closed' );
+	document.body.style.overflow = 'auto';
+};
+
+// Cleanup if page is loaded via back button.
+window.onpageshow = event => {
+	if ( event.persisted ) {
+		// If the page is loaded from the back button, find and remove any loading-related classes and modals:
+		document.querySelectorAll( '.modal-processing' ).forEach( el => el.classList.remove( 'modal-processing' ) );
+		document.querySelectorAll( '.non-modal-checkout-loading' ).forEach( el => el.classList.remove( 'non-modal-checkout-loading' ) );
+		document.querySelectorAll( `.${ MODAL_CLASS_PREFIX }-container` ).forEach( el => closeModal( el ) );
+	}
+}
+
 domReady( () => {
 	const modalCheckout = document.querySelector( `#${ MODAL_CHECKOUT_ID }` );
-
 	if ( ! modalCheckout ) {
 		return;
 	}
@@ -167,7 +185,9 @@ domReady( () => {
 	 */
 	const emptyCart = () => {
 		const body = new FormData();
-		body.append( 'modal_checkout', '1' );
+		if ( ! newspackBlocksModal.has_unsupported_payment_gateway ) {
+			body.append( 'modal_checkout', '1' );
+		}
 		body.append( 'action', 'abandon_modal_checkout' );
 		body.append( '_wpnonce', modalCheckout.checkout_nonce );
 		modalCheckout.checkout_nonce = null;
@@ -197,12 +217,13 @@ domReady( () => {
 	 * @param {Event} ev
 	 */
 	const handleCheckoutFormSubmit = ev => {
+		const isModalCheckout = ! newspackBlocksModal.has_unsupported_payment_gateway;
+		if ( ! isModalCheckout ) {
+			ev.preventDefault();
+		}
 		const form = ev.target;
-
 		form.classList.add( 'modal-processing' );
-
 		const productData = form.dataset.product;
-
 		if ( productData ) {
 			const data = JSON.parse( productData );
 			Object.keys( data ).forEach( key => {
@@ -213,17 +234,19 @@ domReady( () => {
 			} );
 		}
 		const formData = new FormData( form );
-
 		// If we're not going from variation picker to checkout, set the modal trigger:
 		if ( ! formData.get( 'variation_id' ) ) {
 			modalTrigger = ev.submitter;
 		}
-
-		const variationModals = document.querySelectorAll( `.${ VARIATON_MODAL_CLASS_PREFIX }` );
 		// Clear any open variation modal.
+		const variationModals = document.querySelectorAll( `.${ VARIATON_MODAL_CLASS_PREFIX }` );
 		variationModals.forEach( variationModal => {
-			closeModal( variationModal );
+			// Only close the variation picker if is the modal checkout, or if registration is required.
+			if ( shouldPromptRegistration() || isModalCheckout ) {
+				closeModal( variationModal );
+			}
 		} );
+
 		// Trigger variation modal if variation is not selected.
 		if ( formData.get( 'is_variable' ) && ! formData.get( 'variation_id' ) ) {
 			const variationModal = [ ...variationModals ].find(
@@ -283,11 +306,27 @@ domReady( () => {
 			}
 		}
 
+		// Populate cart and redirect to checkout if there is an unsupported payment gateway.
+		if ( ! isModalCheckout && ! shouldPromptRegistration() ) {
+			generateCart( formData ).then( url => {
+				// Remove modal checkout query string and trailing question mark (if any).
+				window.location.href = url;
+			} );
+			// Add some animation to the Checkout Button while the non-modal checkout is loading.
+			// For now, don't do it when any popup opens, just when we go right to the checkout page.
+			if ( ! ( formData.get( 'is_variable' ) && ! formData.get( 'variation_id' ) ) ) {
+				const buttons = form.querySelectorAll( 'button[type=submit]:focus' );
+				buttons.forEach( button => {
+					button.classList.add( 'non-modal-checkout-loading' );
+					const buttonText = button.innerHTML;
+					button.innerHTML = '<span>' + buttonText + '</span>';
+				} );
+			}
+			return;
+		}
 		form.classList.remove( 'modal-processing' );
-
 		const isDonateBlock = formData.get( 'newspack_donate' );
 		const isCheckoutButtonBlock = formData.get( 'newspack_checkout' );
-
 		// Set up some GA4 information.
 		if ( isCheckoutButtonBlock ) { // this fires on the second in-modal variations screen, too
 			const formAnalyticsData = form.getAttribute( 'data-product' );
@@ -416,18 +455,23 @@ domReady( () => {
 			cartReq.then( url => {
 				window.newspackReaderActivation?.setPendingCheckout?.( url );
 			} );
-
 			// Initialize auth flow if reader is not authenticated.
 			window.newspackReaderActivation.openAuthModal( {
 				title: newspackBlocksModal.labels.auth_modal_title,
 				onSuccess: ( message, authData ) => {
 					cartReq.then( url => {
-						// If registered, append the registration flag query param to the url.
-						if ( authData?.registered ) {
+						// If registered and in a modal checkout, append the registration flag query param to the url.
+						if ( authData?.registered && isModalCheckout ) {
 							url += `&${ newspackBlocksModal.checkout_registration_flag }=1`;
 						}
-						const checkoutForm = generateCheckoutPageForm( url );
-						triggerCheckout( checkoutForm );
+						// Populate cart and redirect to checkout if there is an unsupported payment gateway.
+						if ( ! isModalCheckout ) {
+							// Remove modal checkout query string, and trailing question mark (if any).
+							generateCart( formData ).then( window.location.href = url );
+						} else {
+							const checkoutForm = generateCheckoutPageForm( url );
+							triggerCheckout( checkoutForm );
+						}
 					} )
 					.catch( error => {
 						console.warn( 'Unable to generate cart:', error ); // eslint-disable-line no-console
@@ -455,6 +499,7 @@ domReady( () => {
 				},
 				content,
 				trigger: ev.submitter,
+				closeOnSuccess: isModalCheckout,
 			} );
 		} else {
 			// Otherwise initialize checkout.
@@ -604,14 +649,6 @@ domReady( () => {
 		iframeReady( handleIframeReady );
 	};
 
-	const closeModal = el => {
-		if ( el.overlayId && window.newspackReaderActivation?.overlays ) {
-			window.newspackReaderActivation?.overlays.remove( el.overlayId );
-		}
-		el.setAttribute( 'data-state', 'closed' );
-		document.body.style.overflow = 'auto';
-	};
-
 	const openModal = el => {
 		if ( window.newspackReaderActivation?.overlays ) {
 			modalCheckout.overlayId = window.newspackReaderActivation?.overlays.add();
@@ -700,7 +737,9 @@ domReady( () => {
 		.forEach( element => {
 			const forms = element.querySelectorAll( 'form' );
 			forms.forEach( form => {
-				form.appendChild( modalCheckoutHiddenInput.cloneNode() );
+				if ( ! newspackBlocksModal.has_unsupported_payment_gateway ) {
+					form.appendChild( modalCheckoutHiddenInput.cloneNode() );
+				}
 				form.target = IFRAME_NAME;
 				form.addEventListener( 'submit', handleCheckoutFormSubmit );
 			} );

src/modal-checkout/modal.scss

@@ -226,6 +226,28 @@
 	}
 }
 
+.non-modal-checkout-loading {
+	position: relative;
+
+	span {
+		visibility: hidden;
+	}
+
+	&::before {
+		animation: spin 900ms infinite linear;
+		border: 1.5px solid;
+		border-color: currentcolor currentcolor transparent transparent;
+		border-radius: 50%;
+		content: "";
+		display: block;
+		height: 18px;
+		inset: calc(50% - 9px) calc(50% - 9px) auto auto;
+		position: absolute;
+		width: 18px;
+	}
+}
+
+
 @keyframes spin {
 	0% {
 		transform: rotate(0deg);