Custom Payments method compatible with WooCommerce Checkout Blocks

Question

I have been working on creating a payment method in WooCommerce that should work on the new block system, but for some reason, when editing the checkout page, I can see the payment method, but when I move into the actual checkout page its not there again, hopefully, i could get some help on this. I used this tutorial Integrating Custom WooCommerce Payment Gateways with WooCommerce Checkout Blocks

FileSystem:

main plugin file:

    <?php
/**
 * Plugin Name: Custom Plugin for Woocommerce Subscriptions + Xendit
 * Plugin URI: 
 * Author Name: Emmanuel John Navarro
 * Description: Plugin integration to create subscription based payments with automated integration to Xendit
 * Version 0.1.0
 * 
 * 
 */



add_action('plugins_loaded', 'woocommerce_xen_payment_init',0);

function woocommerce_xen_payment_init(){

    if(!class_exists('WC_Payment_Gateway')) return;

        #[AllowDynamicProperties]
        class WC_xen_payment extends WC_Payment_Gateway{
            public function __construct() {
                $this->id = 'xen_payment';
                $this->icon = apply_filters('woocommerce_payment_icon', plugins_url() . '/assets/icon.png');
                $this->has_fields = false;
                $this->method_title = __('Credit Cards/E-Wallets','xen-pay-woo');
                $this->method_description = __('Pay Through Credit Cards or E-Wallets Through XENDIT, Personal Information will NOT be stored','xen-pay-woo');

                $this->title = $this->get_option( 'title' );
                $this->description = $this->get_option( 'description' );
                
                $this->instructions =  $this->get_option( 'instructions', $this->description );
                
                $this->init_form_fields();
                $this->init_settings();
            }
            public function init_form_fields(){
                $this->form_fields = apply_filters('xen_pay_fields',array(
                    'enabled' => array(
                        'title' => __('Enable/Disable','xen-pay-woo'),
                        'type' =>'checkbox',
                        'label'=> __('Enable or Disable Payments','xen-pay-woo'),
                        'default'=>'no'
                    ),
                    'title' => array(
                        'title' => __('Payment Gateway Name','xen-pay-woo'),
                        'type' =>'text',
                        'default'=>__('Credit Cards/E-Wallets','xen-pay-woo'),
                        'desc_tip'=> true,
                        'description'=> __('Add a new title for the payment gateway that customers will see in the checkout page','xen-pay-woo')
                    ),
                    'description' => array(
                        'title' => __('Payment Gateway Description','xen-pay-woo'),
                        'type' =>'textarea',
                        'default'=>__('This gateway accepts VISA, MASTERCARD, ETC','xen-pay-woo'),
                        'desc_tip'=> true,
                        'description'=> __('Add a new description for the payment gateway that customers will see in the checkout page','xen-pay-woo')
                    ),
                    'instructions' => array(
                        'title' => __('Instructions','xen-pay-woo'),
                        'type' =>'textarea',
                        'default'=>__('Kindly check your account page and reload to contact your personal graphics manager. Thank you so much for choosing HelloGFX','xen-pay-woo'),
                        'desc_tip'=> true,
                        'description'=> __('Place a product description that will be shown after checkout on EMAIL and THANK YOU PAGE','xen-pay-woo')
                    )
                    
                ));
            }

            public function process_payment($order_id){
            
                $order_id = wc_get_order($order_id);

                $this->clear_payment_with_api();

                $order->update_status('pending-payment',  __('Awaiting Payments','xen-pay-woo'));

                $order->reduce_order_stock();
                
                WC()->cart->empty_cart();

                return array(
                    'result'=>'success',
                    'redirect'=>$this->get_return_url($order)
                );
            }

            public function clear_payment_with_api(){

            }
        }
    
}

add_filter('woocommerce_payment_gateways','add_to_woo_xen_payment');

function add_to_woo_xen_payment( $gateways ){
    $gateways[] = 'WC_xen_payment';
    return $gateways;
}

function declare_cart_checkout_blocks_compatibility() {
    // Check if the required class exists
    if (class_exists('\Automattic\WooCommerce\Utilities\FeaturesUtil')) {
        // Declare compatibility for 'cart_checkout_blocks'
        \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');

add_action( 'woocommerce_blocks_loaded', 'oawoo_register_order_approval_payment_method_type' );

/**
 * Custom function to register a payment method type

 */
function oawoo_register_order_approval_payment_method_type() {
    // Check if the required class exists
    if ( ! class_exists( 'Automattic\WooCommerce\Blocks\Payments\Integrations\AbstractPaymentMethodType' ) ) {
        return;
    }

    // Include the custom Blocks Checkout class
    require_once plugin_dir_path(__FILE__) . 'includes/class-phonepe-woocommerce-block-checkout.php';

    // Hook the registration function to the 'woocommerce_blocks_payment_method_type_registration' action
    add_action(
        'woocommerce_blocks_payment_method_type_registration',
        function( Automattic\WooCommerce\Blocks\Payments\PaymentMethodRegistry $payment_method_registry ) {
            // Register an instance of WC_Phonepe_Blocks
            $payment_method_registry->register( new WC_Phonepe_Blocks );
        }
    );
}

class-phonepe-woocommerce-block-checkout.php

<?php
use Automattic\WooCommerce\Blocks\Payments\Integrations\AbstractPaymentMethodType;

final class WC_Phonepe_Blocks extends AbstractPaymentMethodType {

    private $gateway;
    protected $name = 'WC_xen_payment';// your payment gateway name

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

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

    public function get_payment_method_script_handles() {

        wp_register_script(
            'wc-phonepe-blocks-integration',
            plugin_dir_url(__FILE__) . 'block/checkout.js',
            [
                'wc-blocks-registry',
                'wc-settings',
                'wp-element',
                'wp-html-entities',
                'wp-i18n',
            ],
            null,
            true
        );
        
        return [ 'wc-phonepe-blocks-integration' ];
    }

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

}

Checkout.js

const settings = window.wc.wcSettings.getSetting( 'sg-phonepe_data', {} );
const label = window.wp.htmlEntities.decodeEntities( settings.title ) || window.wp.i18n.__( 'Phonepe', 'wc-phonepe' );
const Content = () => {
    return window.wp.htmlEntities.decodeEntities( settings.description || '' );
};
const Block_Gateway = {
    name: 'sg-phonepe',
    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 );