When configuring the store for one of my customers, I came to know one of the payment gateways I’ve developed – Himalayan Bank Payment For WooCommerce is not compatible with the WooCommerce block checkout. The customer complained that when using the plugin, the payment gateway option doesn’t appear on the checkout in the front end. I checked everything at first just to realize it’s the WooCommerce checkout type that’s the plugin is not compatible with.
While I checked the checkout page, I found that there was a notice:
WooCommerce Block Checkout
WooCommerce version 8.3 introduced cart and checkout blocks which is also the default for every new installation. This means the new WooCommerce installations doesn’t show your payment gateway if you don’t make it compatible the WooCommerce block checkout.
The new block checkout is introduced to provide a visually appealing and customizable checkout for you and a better checkout experience for your customers.
With the new block checkout, you can customize the checkout from within the block. It also has additional settings in the leftbar. For example, whether to include the step number or not, what to include in the address field etc.
Making payment gateway compatible with WooCommerce block checkout
If your custom payment gateway plugin is not compatible with WooCommerce block checkout, you know your customers are missing the features above. They’ll have to use the classic checkout shortcode [woocommerce_checkout]. The new installations might think your custom payment gateway plugin is broken. That’s not a good experience, right?
Here’s how to make your custom payment gateway compatible with block checkout:
Step 1) Declare the plugin as a cart checkout block compatibility.
Add the following code snippet to your plugin main file. If you wish to add to other files, note the __FILE__
/**
* Declare this plugin as a cart checkout block compatibility.
*
* @since 2.2.3
*/
function cart_checkout() {
if ( class_exists( '\Automattic\WooCommerce\Utilities\FeaturesUtil' ) ) {
\Automattic\WooCommerce\Utilities\FeaturesUtil::declare_compatibility( 'cart_checkout_blocks', __FILE__, true );
}
}
add_action( 'before_woocommerce_init', 'cart_checkout' );Step 2) Register your payment gateway block to WooCommerce blocks payment
Also, add the following to the plugin main file, or change the file path.
/**
* Do necessary things for block checkout compatibility.
*
* @since 2.2.3
*/
function register_hbl_payment_type_for_block() {
if ( class_exists( 'Automattic\WooCommerce\Blocks\Payments\Integrations\AbstractPaymentMethodType' ) ) {
require_once __DIR__ . '/src/Block.php';
add_action(
'woocommerce_blocks_payment_method_type_registration',
function ( Automattic\WooCommerce\Blocks\Payments\PaymentMethodRegistry $payment_method_registry ) {
$payment_method_registry->register( new WC_HBL_Block() );
}
);
}
}
add_action( 'woocommerce_blocks_loaded', 'register_hbl_payment_type_for_block' );See there’s a new file Block.php in the src directory which class is WC_HBL_BLOCK
You’ll need to create the same, a new file and its class. Name it Block.php and put in under src directory or you name yourself and put where you prefer. Just not to include the file there ^^.
Step 3) Block.php
Here’s the Block.php file.
<?php
use Automattic\WooCommerce\Blocks\Payments\Integrations\AbstractPaymentMethodType;
/**
* Class for handling HBL Payment block checkout support.
*
* @since 2.2.3
*/
final class WC_HBL_Block extends AbstractPaymentMethodType {
/**
* The HBL Payment gateway instance.
*
* @var WC_Gateway_HBL_Payment
*/
private $gateway;
/**
* The name of the payment method.
*
* @var string
*/
protected $name = 'hbl-payment';
/**
* Initializes the HBL Payment block.
*
* @since 2.2.3
*/
public function initialize() {
$this->settings = get_option( 'woocommerce_hbl-payment_settings', array() );
$this->gateway = new WC_Gateway_HBL_Payment();
}
/**
* Checks if the payment method is active.
*
* @since 2.2.3
*
* @return bool True if the payment method is active, false otherwise.
*/
public function is_active() {
return $this->gateway->is_available();
}
/**
* Retrieves the script handles for the payment method.
*
* @since 2.2.3
*
* @return array The script handles for the payment method.
*/
public function get_payment_method_script_handles() {
wp_register_script(
'wc-hbl-payment-blocks-integration',
plugins_url( 'block/checkout.js', HBL_PAYMENT_FOR_WOOCOMMERCE_PLUGIN_FILE ),
array(
'wc-blocks-registry',
'wc-settings',
'wp-element',
'wp-html-entities',
'wp-i18n',
),
null,
true
);
return array( 'wc-hbl-payment-blocks-integration' );
}
/**
* Retrieves the payment method data.
*
* @since 2.2.3
*
* @return array The payment method data, including title and description.
*/
public function get_payment_method_data() {
return array(
'title' => $this->gateway->title,
'description' => $this->gateway->description,
);
}
}
Changes you require in the file for your plugin:
1. Add your payment gateway name.
protected $name = 'hbl-payment';2. Add your payment gateway settings and class that is extending WC_Payment_Gateway.
$this->settings = get_option( 'woocommerce_hbl-payment_settings', array() );
$this->gateway = new WC_Gateway_HBL_Payment();3. Add you own script handle name, I wrote it “wc-hbl-payment-blocks-integration”. Here you notice there’s a block/checkout.js file – which we’ll create in next step.
public function get_payment_method_script_handles() {
wp_register_script(
'wc-hbl-payment-blocks-integration',
plugins_url( 'block/checkout.js', HBL_PAYMENT_FOR_WOOCOMMERCE_PLUGIN_FILE ),
array(
'wc-blocks-registry',
'wc-settings',
'wp-element',
'wp-html-entities',
'wp-i18n',
),
null,
true
);
return array( 'wc-hbl-payment-blocks-integration' );Step 4) Checkout.js
As you see, I’ve created a checkout.js in the block directory. You may add it anywhere. Here’s the file:
const settings = window.wc.wcSettings.getSetting( 'hbl-payment_data', {} );
const label = window.wp.htmlEntities.decodeEntities( settings.title ) || window.wp.i18n.__( 'HBL Payment', 'hbl-payment-for-woocommerce' );
const Content = () => {
return window.wp.htmlEntities.decodeEntities( settings.description || '' );
};
const Block_Gateway = {
name: 'hbl-payment',
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 );The thing you’ll need to change is:
hbl-payment_data
and window.wp.i18n.__( 'HBL Payment', 'hbl-payment-for-woocommerce' );
to make it suitable to your custom payment gateway plugin.
That’s all. Hurray!! We’ve made the payment gateway compatible with WooCommerce block checkout. If you have questions or need any assistance, let me know in the comments. 🙏
Hi
Thank you for great solution. I have one question
plugins_url( ‘block/checkout.js’, HBL_PAYMENT_FOR_WOOCOMMERCE_PLUGIN_FILE ),
HBL_PAYMENT_FOR_WOOCOMMERCE_PLUGIN_FILE – What should we change here ? Please advice.
Hi Martin – thanks for reaching out.
That should be replaced with your plugin file path. It is just that you need to include checkout.js in some way.