WooCommerce Payment Method Integration for the Checkout Block

In WooCommerce version 8.3 and beyond, the Checkout Blocks have become the standard for new installations, revolutionizing the user experience. If your extension integrates with a payment gateway, adapting to the block-based checkout is crucial. In this article, I will guide you through the process of seamlessly integrating and supporting Checkout Blocks for your payment gateway, ensuring a smooth and efficient transaction process for your users.

1. Use add_filter to get my custom gateways

Prior to returning my gateways through the woocommerce_payment_gateways filter, I employ a custom filter. This strategic approach allows me to conveniently retrieve my gateways when required in the get_payment_method_data function at a later stage.

function you_bou_add_gateways( $gateways ) {

    $you_bou_methods = array(
        new You_Bou_Gateway_Class()
    );

    add_filter( 'you_bou_payment_methods_filter',
        function( $methods ) use ( $you_bou_methods ){
            return array_merge( $methods, $you_bou_methods );
        }
    );

    return array_merge( $gateways, $you_bou_methods );
}
add_filter( 'woocommerce_payment_gateways', 'you_bou_add_gateways' );

2. woocommerce_blocks_loaded hook

To ensure compatibility with checkout blocks in the current WooCommerce installation and prevent potential fatal errors, I employ the woocommerce_blocks_loaded hook before requiring my class that extends AbstractPaymentMethodType.

function you_bou_blocks_support() {

    if( ! class_exists( 'Automattic\WooCommerce\Blocks\Payments\Integrations\AbstractPaymentMethodType' ) ) {
        return;
    }

    require 'YOUR_PATH/TO/class-you-bou-blocks.php';

    add_action(
        'woocommerce_blocks_payment_method_type_registration',
        function( Automattic\WooCommerce\Blocks\Payments\PaymentMethodRegistry $payment_method_registry ) {
            $payment_method_registry->register(new You_Bou_Blocks);
        }
    );

}
add_action( 'woocommerce_blocks_loaded', 'you_bou_blocks_support' );

3. Extend AbstractPaymentMethodType

Extending the AbstractPaymentMethodType class is crucial for leveraging its built-in functions, including initialize, is_active, and get_payment_method_script_handles. The latter is particularly significant as it facilitates the enqueueing of the JavaScript script, which we'll delve into in the next step. Additionally, the get_payment_method_data function plays a pivotal role in transmitting data to the aforementioned JavaScript script. Here, our custom filter, you_bou_payment_methods_filter, becomes essential, serving as the means to retrieve our gateways and transmit their data seamlessly.

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

final class You_Bou_Blocks extends AbstractPaymentMethodType {

    protected $name = 'you_bou';
    
	public function initialize() {}

	public function is_active() {
        return true;
	}

    public function get_payment_method_script_handles() {

        $checkout_blocks_assets = include( plugin_dir_path( __FILE__ ) . '/build/checkout-blocks.asset.php' );
        wp_register_script(
            'you_bou_checkout_blocks',
            'YOUR_PATH/TO/checkout-blocks.js',
            $checkout_blocks_assets['dependencies'],
            $checkout_blocks_assets['version'],
            true
        );

		return array(
            'you_bou_checkout_blocks'
        );
	}

    public function get_payment_method_data() {

		$methods                    = array();
		$you_bou_payment_methods    = apply_filters( 'you_bou_payment_methods_filter', array() );

		foreach ( $you_bou_payment_methods as $payment_method ) {

			$method_data = array(
				'name'	        => $payment_method->id,
				'label'	        => $payment_method->title,
				'icon'	        => $payment_method->icon,
                'description'   => $payment_method->description,
			);

			$methods[] = $method_data;
		}

		return array(
			'methods' => $methods
        );
	}

}

4. Use JavaScript to implement the gateways in front

To seamlessly implement my gateways both in the front-end and editor, JavaScript becomes indispensable. WooCommerce simplifies this process with the straightforward use of the registerPaymentMethod function.

It's worth noting that I enqueue the compiled version of this script, given its utilization of React. This can be efficiently achieved through the @wordpress/scripts package. I've previously covered the details of using the @wordpress/scripts package in an article, providing a comprehensive guide on the subject.

const settings	= window.wc.wcSettings.getSetting( 'you_bou_data', {} );
const methods	= settings.methods;

function Label( { label, icon } ) {
    return (
        <span className='wc-block-payment-method__label' style={{ width: '100%' }}>
            {label}
            <img src={icon} alt={label} className='wc-block-payment-method__image' style={{ float: 'right', marginRight: '20px' }} />
        </span>
    );
}

function Description( { description } ) {
    return (
        <div className='wc-block-payment-method__description' dangerouslySetInnerHTML={{ __html: description }} ></div>
    );
}

methods.forEach( method => {

	const params = {
		name: method.name,
		label: Label( method ),
		content: Description( method ),
		edit: Description( method ),
		canMakePayment: () => true,
		ariaLabel: method.label
	};
	window.wc.wcBlocksRegistry.registerPaymentMethod( params );
});