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 site as reference 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 ); Thanks ! Hopefully i could get this done