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.
 	 */
@@ -933,11 +979,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' ),

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

@@ -100,7 +100,7 @@ public static function render( $attributes ) {
 		Newspack_Blocks::enqueue_view_assets( 'donate' );
 		wp_script_add_data( 'newspack-blocks-donate', 'async', true );
 
-		if ( true === $attributes['useModalCheckout'] ) {
+		if ( true === $attributes['useModalCheckout'] && ! Newspack_Blocks\Modal_Checkout::has_unsupported_payment_gateway() ) {
 			\Newspack_Blocks\Modal_Checkout::enqueue_modal();
 		}
 

src/modal-checkout/modal.js

@@ -197,12 +197,14 @@ 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 +215,28 @@ 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 );
+			}
 		} );
+
+		// Generate URL for non-modal checkout
+		const generateNonModalCheckoutUrl = ( url ) => {
+			// Regex for after_success URL params used by the modal checkout.
+			const successParams = /(after_success|&after_success)[^&]*?(?=&|$)/gi;
+			// Remove modal_checkout, success params, and any trailing ? from the URL.
+			const nonModalUrl = url.replace( /&?modal_checkout=1/, '' ).replaceAll(successParams, '').replace( /\?$/, '' ); // remove question mark only if last character.
+			return nonModalUrl;
+		}
+
 		// Trigger variation modal if variation is not selected.
 		if ( formData.get( 'is_variable' ) && ! formData.get( 'variation_id' ) ) {
 			const variationModal = [ ...variationModals ].find(
@@ -282,12 +295,27 @@ domReady( () => {
 				return;
 			}
 		}
-
+		// Populate cart and redirect to checkout if there is an unsupported payment gateway.
+		if ( ! isModalCheckout && ! shouldPromptRegistration() ) {
+				generateCart( formData ).then( url => {
+					window.location.href = generateNonModalCheckoutUrl( url );
+				} );
+				// Add some animation to the Checkout Button and Donate block 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' ) ) ) {
+					// Use :focus to try to limit submit buttons in tiered donate button block.
+					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,7 +444,6 @@ 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,
@@ -426,8 +453,13 @@ domReady( () => {
 						if ( authData?.registered ) {
 							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 ) {
+							generateCart( formData ).then( window.location.href = generateNonModalCheckoutUrl( url ) );
+						} else {
+							const checkoutForm = generateCheckoutPageForm( url );
+							triggerCheckout( checkoutForm );
+						}
 					} )
 					.catch( error => {
 						console.warn( 'Unable to generate cart:', error ); // eslint-disable-line no-console
@@ -455,6 +487,7 @@ domReady( () => {
 				},
 				content,
 				trigger: ev.submitter,
+				closeOnSuccess: isModalCheckout,
 			} );
 		} else {
 			// Otherwise initialize checkout.

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);