Guide to Integrating Custom Payment Gateways into WooCommerce Checkout Blocks

Before you get started, make sure you've checked out the full guide on how to create a WooCommerce payment gateway (it's important to read that one before reading this post). However, if you're using the latest version of WooCommerce (I think it's from 8.3 onwards), you may find that your custom payment method doesn't appear in the checkout block.

For example, if you try to disable all payment methods in the store except your customized one, you may encounter the following error message:

While using the old version of

Everything works fine with the short code, but it's clear that the previous payment gateway tutorial may not be comprehensive enough now.

But don't worry, we've got a new tutorial to fill in the blanks. I'll take you step-by-step through how to add a custom payment method to the WooCommerce cart and checkout block to make sure it's compatible with the latest version.

By the end of this tutorial, we are on target:

Of course, I'll also teach you some extra tips like adding a custom icon to your payment method.

Server-side integration 

First, we'll start with the server-side integration. I realize that many of you may prefer to develop in PHP rather than JavaScript and React, so let's start with the easy part.

Register a block to support PHP classes 

The "Block Support PHP Class" is a PHP class used to handle our payment gateway in addition to the main payment gateway class. We'll register it with the following simple code snippet, a process similar to what we did earlier in thewoocommerce_payment_gatewaysThe way the main gateway class is registered in the hook is very similar.

add_action( 'woocommerce_blocks_loaded', 'rudr_gateway_block_support' );

function rudr_gateway_block_support() {

// if( ! class_exists( 'Automattic\WooCommerce\Blocks\Payments\Integrations\AbstractPaymentMethodType' ) {

// return;

// }

// Introduce the "gateway block support class" file here.

require_once __DIR__ . '/includes/class-wc-misha-gateway-blocks-support.php' ;

// Register the PHP class we just introduced

add_action(

'woocommerce_blocks_payment_method_type_registration',

function( Automattic\WooCommerce\Blocks\Payments\PaymentMethodRegistry $payment_method_registry ) {

$payment_method_registry->register( new WC_Misha_Gateway_Blocks_Support ) ;

}

);

}

Please remember the following:

• I removed it.class_exists()This condition, because we don't need it now. This is because the checkout block has become part of WooCommerce and is no longer a separate plugin.
• Our block support PHP class will be in a separate file, which we'll discuss in detail in the next steps, and it's calledclass-wc-misha-gateway-blocks-support.phpThe

Block support for PHP classes 

In this section, I'm going to create a file namedWC_Misha_Gateway_Blocks_SupportPHP class that will extend WooCommerce'sAbstractPaymentMethodTypeClass. Also, keep in mind that we already have a class namedWC_Misha_Gatewayclass, which extends theWC_Payment_GatewayThe

For myself, I would put this new class file into theincludes/class-wc-misha-gateway-blocks-support.phpCenter.

<?php
use Automattic\WooCommerce\Blocks\Payments\Integrations\AbstractPaymentMethodType;
final class WC_Misha_Gateway_Blocks_Support extends AbstractPaymentMethodType {
	
	private $gateway;
	
	protected $name = 'misha'; // payment gateway id
	public function initialize() {
		// get payment gateway settings
		$this->settings = get_option( "woocommerce_{$this->name}_settings", array() );
		
		// you can also initialize your payment gateway here
		// $gateways = WC()->payment_gateways->payment_gateways();
		// $this->gateway  = $gateways[ $this->name ];
	}
	public function is_active() {
		return ! empty( $this->settings[ 'enabled' ] ) && 'yes' === $this->settings[ 'enabled' ];
	}
	public function get_payment_method_script_handles() {
		wp_register_script(
			'wc-misha-blocks-integration',
			plugin_dir_url( __DIR__ ) . 'build/index.js',
			array(
				'wc-blocks-registry',
				'wc-settings',
				'wp-element',
				'wp-html-entities',
			),
			null, // or time() or filemtime( ... ) to skip caching
			true
		);
		return array( 'wc-misha-blocks-integration' );
	}
	public function get_payment_method_data() {
		return array(
			'title'        => $this->get_setting( 'title' ),
			// almost the same way:
			// 'title'     => isset( $this->settings[ 'title' ] ) ? $this->settings[ 'title' ] : 'Default value';
			'description'  => $this->get_setting( 'description' ),
			// if $this->gateway was initialized on line 15
			// 'supports'  => array_filter( $this->gateway->supports, [ $this->gateway, 'supports' ] ),
			// example of getting a public key
			// 'publicKey' => $this->get_publishable_key(),
		);
	}
	//private function get_publishable_key() {
	//	$test_mode   = ( ! empty( $this->settings[ 'testmode' ] ) && 'yes' === $this->settings[ 'testmode' ] );
	//	$setting_key = $test_mode ? 'test_publishable_key' : 'publishable_key';
	//	return ! empty( $this->settings[ $setting_key ] ) ? $this->settings[ $setting_key ] : '';
	//}
}

Let's start by looking at the properties and methods of this class:

Attributes.

• $name: This is a unique identifier for the payment gateway.
• $gateway: It is possible to store instances of the payment gateway object here, but it is not mandatory, so I did not include this part in the code.

Methods.

• is_active(): This method is used to check if the payment method is active.
• get_payment_method_script_handles(): This is where you add the JavaScript files that contain the client-side portion of the integration code.
• get_payment_method_data(): This method provides all the data you need to use on the front-end, in the form of an associative array.

You can also utilize theindex.asset.phpto get the version and dependencies of the script.

public function get_payment_method_script_handles() {
$asset_path = plugin_dir_path( __DIR__ ) . 'build/index.asset.php';
$version = null;
$dependencies = array();
if( file_exists( $asset_path ) ) {
$asset = require $asset_path;
$version = isset( $asset[ 'version' ] ) ? $asset[ 'version' ] : $version; $dependencies = $dependencies( )
$dependencies = isset( $asset[ 'dependencies' ] ) ? $asset[ 'dependencies' ] : $dependencies;
}

wp_register_script(
'wc-misha-blocks-integration',
plugin_dir_url( __DIR__ ) . 'build/index.js', .
$dependencies, .
$version,
true
);
return array( 'wc-misha-blocks-integration' );
}

Declaration of compatibility 

This part is especially important when your payment method doesn't support WooCommerce's checkout block.

When a user edits a checkout page in the Gutenberg editor, they will see a prompt message:

The methodology is as follows:

add_action( 'before_woocommerce_init', 'rudr_cart_checkout_blocks_compatibility' );
function rudr_cart_checkout_blocks_compatibility() {
    if( class_exists( '\Automattic\WooCommerce\Utilities\FeaturesUtil' ) ) {
        \Automattic\WooCommerce\Utilities\FeaturesUtil::declare_compatibility(
'cart_checkout_blocks', \
__FILE__, false // true (compatible, default)
false // true (compatible, default) or false (not compatible)
);
    }

}

Client Integration 

Setting up the project 

I want to keep this tutorial very simple, so I will use the@wordpress/scriptsto finish.

During the build process, you can of course do more in-depth configuration, such as setting up a hybrid build of WooCommerce so that you can use theimport { registerPaymentMethod } from ....Code like this.

This is what my folder structure looks like:

Register Custom Payment Methods for WooCommerce Checkout Block 

this is/src/index.jsof the document to help you better understand the

import { decodeEntities } from '@wordpress/html-entities' ;
const { registerPaymentMethod } = window.wc.wcBlocksRegistry
const { getSetting } = window.wc.wcSettings
const settings = getSetting( 'misha_data', {} )
const label = decodeEntities( settings.title )
const Content = () => {
return decodeEntities( settings.description || '' )
}
const Label = ( props ) => {
const { PaymentMethodLabel } = props.components
return 
}
registerPaymentMethod( {
name: "misha",
label: ,
name: "misha", label: , content: , edit: , , text={ label } /> }
edit: , canMakePayment: () => true, }
canMakePayment: () => true,
canMakePayment: () => true, ariaLabel: label, supports: {customize
supports: {
features: settings.supports, }
}
})

Maybe go deeper.registerPaymentMethod()respond in singingregisterExpressPaymentMethod()would be helpful, but I plan to go into more detail on these examples in the next tutorial on my blog.

Finally, congratulations on completing this step!

If you want to know the source of the payment method title and description:

Add Payment Method Icon 

Since I promise to give you more examples and you probably don't want to wait for the next tutorial, let's get started now.

What I'm going to do is display an icon next to the custom payment gateway in the WooCommerce checkout block:

First, let's tweak our block-supporting PHP classes, specifically theget_payment_method_data()method, where we'll add a new parameter:

public function get_payment_method_data() {
return array(

'description' => $this->get_setting( 'description' ),
'icon' => plugin_dir_url( __DIR__ ) . 'assets/icon.png',

...

I would then suggest creating another React component for it:

const Icon = () => {
return settings.icon
return settings.icon <img src="{settings.icon}" style="{{" float: 'right', marginright: '20px' }} /> 
		: ''
}
const Label = () =&gt; {
return (
        <span style="{{" width: '100%' }}>
            {label}
            <icon />
        </span>
    );
};

If a link to an image of the icon is not provided, then the<img>The tags wouldn't show up, which is great!

Contact Us
Can't read the article? Contact us for free answers! Free help for personal, small business sites!
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off