“Gutenberg Blocked Checkout or Checkout blocks” is a new feature in WooCommerce, starting from version 6.9, which was released in September 2022. Starting with WooCommerce version 8.3, the Woocommerce Cart and Checkout Blocks are the default for new installations.

WooCommerce Checkout Blocks represent a modern approach to designing and customizing the woocommerce checkout pages in a WordPress online store. In contrast to the traditional or “classic” checkout, This involves a series of steps where customers enter their billing details and shipping information, choose a payment method, and complete the purchase. The Woocommerce Checkout Blocks interface is designed to be user-friendly, enabling users to manage each element of the checkout page as an individual block, promoting a more modern and efficient e-commerce checkout process.

If you want to know how the Woocommerce Checkout Block Processes an order click here

If you want more details about how to create a new custom Woocommerce Payment Gateway with Woocommerce Checkout Blocks support – click here

To make woocommerce checkout blocks more user-friendly, it’s essential to provide a brief description or guide on how to make your custom woocommerce checkout payment gateway compatible with this new checkout system.

Step 1: Declare the plugin support WooCommerce Checkout Blocks.

Users can now experience enhanced convenience and efficiency during the checkout phase with the declared plugin. Add this to the plugin’s main file.

/**
 * Custom function to declare compatibility with cart_checkout_blocks feature 
*/
function declare_cart_checkout_blocks_compatibility() {
    // Check if the required class exists
    if (class_exists('\Automattic\WooCommerce\Utilities\FeaturesUtil')) {
        // Declare compatibility for 'cart_checkout_blocks'
        \Automattic\WooCommerce\Utilities\FeaturesUtil::declare_compatibility('cart_checkout_blocks', __FILE__, true);
    }
}
// Hook the custom function to the 'before_woocommerce_init' action
add_action('before_woocommerce_init', 'declare_cart_checkout_blocks_compatibility');

Step 2: Register WooCommerce Checkout Blocks payment method type registration.

To register the WooCommerce Checkout Blocks payment method type, initiate the registration process to efficiently integrate it with the platform. This ensures compatibility and accessibility for users seeking diverse woocommerce checkout payment options within the WooCommerce ecosystem.

// Hook the custom function to the 'woocommerce_blocks_loaded' action
add_action( 'woocommerce_blocks_loaded', 'oawoo_register_order_approval_payment_method_type' );

/**
 * Custom function to register a payment method type

 */
function oawoo_register_order_approval_payment_method_type() {
    // Check if the required class exists
    if ( ! class_exists( 'Automattic\WooCommerce\Blocks\Payments\Integrations\AbstractPaymentMethodType' ) ) {
        return;
    }

    // Include the custom Blocks Checkout class
	require_once plugin_dir_path(__FILE__) . 'includes/class-phonepe-woocommerce-block-checkout.php';

    // Hook the registration function to the 'woocommerce_blocks_payment_method_type_registration' action
    add_action(
        'woocommerce_blocks_payment_method_type_registration',
        function( Automattic\WooCommerce\Blocks\Payments\PaymentMethodRegistry $payment_method_registry ) {
            // Register an instance of WC_Phonepe_Blocks
            $payment_method_registry->register( new WC_Phonepe_Blocks );
        }
    );
}

Step 3: Create a checkout block-based payment gateway class

Develop a woocommerce checkout blocks-based payment gateway class to facilitate seamless integration and interaction with modern block-based systems. This class enables efficient management and processing of payments within the context of evolving woocommerce checkout block-based technologies.

class-phonepe-woocommerce-block-checkout.php

use Automattic\WooCommerce\Blocks\Payments\Integrations\AbstractPaymentMethodType;

final class WC_Phonepe_Blocks extends AbstractPaymentMethodType {

	private $gateway;
	protected $name = 'sg-phonepe';// your payment gateway name

	public function initialize() {
		$this->settings = get_option( 'woocommerce_sg-phonepe_settings', [] );
		$this->gateway = new WC_PhonePe_Gateway();
	}

	public function is_active() {
		return $this->gateway->is_available();
	}

	public function get_payment_method_script_handles() {

		wp_register_script(
			'wc-phonepe-blocks-integration',
            plugin_dir_url(__FILE__) . 'block/checkout.js',
			[
				'wc-blocks-registry',
				'wc-settings',
				'wp-element',
				'wp-html-entities',
				'wp-i18n',
			],
			null,
			true
		);
		if( function_exists( 'wp_set_script_translations' ) ) {			
			wp_set_script_translations( 'wc-phonepe-blocks-integration', 'wc-phonepe', SGPPY_PLUGIN_PATH. 'languages/' );
			
		}
		return [ 'wc-phonepe-blocks-integration' ];
	}

	public function get_payment_method_data() {
		return [
			'title' => $this->gateway->title,
			'description' => $this->gateway->description,
		];
	}

}

Step 4: Create js files for the block.

Generate JavaScript files for the checkout block to implement and enhance its functionality within the designated application. These files encapsulate the necessary code and logic required to empower the checkout block’s dynamic behavior and user interactions.

checkout.js

const settings = window.wc.wcSettings.getSetting( 'sg-phonepe_data', {} );
const label = window.wp.htmlEntities.decodeEntities( settings.title ) || window.wp.i18n.__( 'Phonepe', 'wc-phonepe' );
const Content = () => {
	return window.wp.htmlEntities.decodeEntities( settings.description || '' );
};
const Block_Gateway = {
	name: 'sg-phonepe',
	label: label,
	content: Object( window.wp.element.createElement )( Content, null ),
	edit: Object( window.wp.element.createElement )( Content, null ),
	canMakePayment: () => true,
	ariaLabel: label,
	supports: {
		features: settings.supports,
	},
};
window.wc.wcBlocksRegistry.registerPaymentMethod( Block_Gateway );

Example folder structure based on Boilerplate.

Facing any difficulties to Integrating Custom Woocommerce Payment Gateways with WooCommerce Checkout Blocks please comment on this post so we can help you.

In this article, I’ll share our order approval plugin for Woocommerce websites, starting with our order approval for woocommerce plugin with a blocked checkout mechanism.

If you’re interested in a WooCommerce WhatsApp plugin with support for WooCommerce checkout blocks, take a look now!

Require assistance developing a custom WooCommerce payment plugin? Let’s chat and create a specialized solution for your needs.