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.
![](https://youssefbouhlal.com/wp-content/uploads/2024/02/checkout-blocks.webp)
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 );
});