Integrating Custom WooCommerce Payment Gateways with WooCommerce Checkout Blocks

In this article, I’ll walk you through the steps to create your own custom WooCommerce payment gateway, complete with compatibility for WooCommerce checkout blocks. Throughout this tutorial, I will guide you through creating a new custom payment gateway for WooCommerce checkout blocks, named “JWC Custom Gateway”.

Let’s initiate the process with an In-depth Guide to Integrating Custom Payment Gateways into WooCommerce Checkout Blocks.

Step 1: Create a payment gateway plugin for “JWC Custom Gateway”.

Creating a plugin is the initial step in implementing a custom WooCommerce payment gateway, ensuring smooth integration into the platform.

/*
Plugin Name: JWC Custom Gateway
Description: A custom payment gateway for WooCommerce.
Version: 1.0.0
Author: Jinesh P.V
Author URI: https://jineshpv.com
License: GPL-2.0+
License URI: http://www.gnu.org/licenses/gpl-2.0.txt
Text Domain: jwc-custom-gateway
Domain Path: /languages
*/

Step 2: Create the Custom Payment Gateway Class

In the directory named ‘jwc-custom-gateway,’ establish a PHP file, such as ‘class-jwc-custom-gateway.php,’ and define your custom gateway class, which must inherit from the WooCommerce-provided WC_Payment_Gateway class.

<?php
class JWC_Custom_Gateway extends WC_Payment_Gateway {
    // Constructor method
    public function __construct () {
        $this->id                 = 'jwc_custom_gateway';
        $this->method_title       = __( 'JWC Custom Gateway', 'jwc-custom-gateway' );
        $this->method_description = __( 'Accept payments through JWC Custom Gateway', 'jwc-custom-gateway' );
        
        // Other initialization code goes here
        $this->init_form_fields();
        $this->init_settings();
        
        add_action ( 'woocommerce_update_options_payment_gateways_' . $this->id, [ $this, 'process_admin_options' ] ) ;
    }
  
    public function init_form_fields() {
        $this->form_fields = array (
            'enabled' => array (
                'title'   => __( 'Enable/Disable', 'jwc-custom-gateway' ),
                'type'    => 'checkbox',
                'label'   => __( 'Enable JWC Custom Gateway', 'jwc-custom-gateway' ),
                'default' => 'yes',
            ),
        );
    }
    // Process the payment
    public function process_payment( $order_id ) {
        $order = wc_get_order ( $order_id );
        $order->payment_complete();
        
        // Redirect to the thank you page
        return array (
            'result'   => 'success',
            'redirect' => $this->get_return_url( $order ),
        );
    }
}
?>

Step 3: Integrate with WooCommerce

Within your primary plugin file, integrate your custom gateway with WooCommerce by leveraging its designated hooks and actions. This integration seamlessly merges your gateway into the WooCommerce framework, granting it full compatibility and visibility among the platform’s payment methods.

<?php
add_action ( 'plugins_loaded', 'woocommerce_jwc_custom_gateway_loaded', 0 );
function woocommerce_jwc_custom_gateway_loaded() {
    // if the WC payment gateway class 
    if ( ! class_exists ( 'WC_Payment_Gateway' ) )
        return;
    
    include ( plugin_dir_path ( __FILE__ ) . 'class-jwc-custom-gateway.php' );
}

// Add JWC_Custom_Gateway to WooCommerce
add_filter ( 'woocommerce_payment_gateways',  'add_jwc_custom_gateway' );
function add_jwc_custom_gateway( $gateways ) {
    $gateways[] = 'JWC_Custom_Gateway' ;
    return $gateways;
}
?>

Step 4: Declare the plugin support WooCommerce checkout blocks.

With the newly introduced plugin, users can now enjoy a streamlined and more efficient checkout process, enhancing both convenience and speed. Simply integrate it into the plugin’s primary file.

<?php
// Custom function to declare compatibility with cart_checkout_blocks feature  
function declare_cart_checkout_blocks_compatibility() {
    if ( class_exists ( '\Automattic\WooCommerce\Utilities\FeaturesUtil' ) ) {
        \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 5: Register WooCommerce blocks payment method type registration.

Initiate the registration process for the Woocommerce checkout blocks payment method type to seamlessly integrate it within the platform, guaranteeing compatibility and accessibility for users seeking a range of payment options within the Woocommerce ecosystem.

<?php
// Hook the custom function to the 'woocommerce_blocks_loaded' action
add_action ( 'woocommerce_blocks_loaded', 'jwc_register_order_approval_payment_method_type' );

// Custom function to register a payment method type
function jwc_register_order_approval_payment_method_type() {
    if ( ! class_exists ( 'Automattic\WooCommerce\Blocks\Payments\Integrations\AbstractPaymentMethodType' ) ) {
        return;
    }

    require_once plugin_dir_path ( __FILE__ ) . 'class-jwc-gateway-block.php';
    add_action ( woocommerce_blocks_payment_method_type_registration',
        function ( Automattic\WooCommerce\Blocks\Payments\PaymentMethodRegistry $payment_method_registry ) {
            $payment_method_registry->register ( new My_JWC_Custom_Gateway_Blocks );
        }
    );
}
?>

Step 6: Develop a block-based Payment Gateway class for WooCommerce Checkout.

<?php
use Automattic\WooCommerce\Blocks\Payments\Integrations\AbstractPaymentMethodType;
final class JWC_Custom_Gateway_Blocks extends AbstractPaymentMethodType {
    private $gateway;

    protected $name = 'jwc_custom_gateway';

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

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

    public function get_payment_method_script_handles() {
        wp_register_script (
            'jwc_custom_gateway-blocks-integration',
            plugin_dir_url ( __FILE__ ) . '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 ( 'jwc_custom_gateway-blocks-integration');
            
        }
        return [ 'jwc_custom_gateway-blocks-integration' ];
    }

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

Step 7: Create js files for the block.

Create JavaScript scripts specialized for the checkout block, designed to elevate its functionality and facilitate engaging user interactions within the specified application environment.

const settings = window.wc.wcSettings.getSetting( 'jwc_custom_gateway_data', {} );
const label = window.wp.htmlEntities.decodeEntities( settings.title ) || window.wp.i18n.__( 'JWC Custom Gateway', 'jwc_custom_gateway' );
const Content = () => {
    return window.wp.htmlEntities.decodeEntities( settings.description || '' );
};
const JWC_Block_Gateway = {
    name: 'jwc_custom_gateway',
    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( JWC_Block_Gateway );

Within the scope of this article, I’ll provide comprehensive guidance on establishing a bespoke WooCommerce checkout payment gateway that seamlessly integrates with WooCommerce checkout blocks. Nonetheless, there are moments where a customized resolution is essential to cater to specific business prerequisites