Ecommerce Shopify WordPress Discussion

Block Payments Compatibility in WooCommerce

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
TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.