Get WooCommerce custom payment gateway values in process_payment function for Blocks checkout

Question

I am creating custom payment plugin for woocommerce. I am facing issue while getting the checkout form data in process_payment function of woocommerce payment class.

I am using following JS code to make payment gateway compatible with woocommerce Block checkout.

const PaySettings= window.wc.wcSettings.allSettings.paymentMethodData.pay;

const Paylabel = window.wp.htmlEntities.decodeEntities( PaySettings.title );

const PayMethod = ({ id, label,value }) => {

    return React.createElement('div', {className: 'pay-methods'},
        React.createElement('label', {htmlFor: id}, label),
        React.createElement('input', {type: 'radio', name: id, value: value, onChange: (e) => e.target.value}),
    );
};

const Content = () => {
    
    return React.createElement('div', {className: 'pay-methods-cont'}, null,
        React.createElement('img', {src: PaySettings.icon}),
        React.createElement('p', null, window.wp.htmlEntities.decodeEntities(PaySettings.description ||  '')),
        React.createElement(PayMethod, {id: 'pay_method', label: 'JazzCash',value: 'jazzcash' }),
        React.createElement(PayMethod, {id: 'pay_method', label: 'EasyPaisa',value: 'easypaisa' })
    );

}
const Icon = () => {
    return React.createElement('div', {className: 'custom-input-field'},
        React.createElement('img', {src: PaySettings.icon}))
}


const AP_Gateway = {
    name: 'pay',
    label: Paylabel,
    icon: Icon,
    content: Object(window.wp.element.createElement)(Content, null),
    edit: Object(window.wp.element.createElement)(Content, null),
    canMakePayment: () => true,
    ariaLabel: Paylabel,
    supports: {
        features: ['products'],//settings.supports,
    },
};

window.wc.wcBlocksRegistry.registerPaymentMethod( AP_Gateway )

It is showing radio options on checkout as payment gateway options but when I select any of the option I am not able to receive value in process_payment function.

public function process_payment( $order_id ) {
            
   echo "<pre>";print_r($_POST);echo "</pre>";die;
            
}

I am doing something wrong or missing something ? Please help.

Ergec · Accepted Answer · 2025-02-27 07:22:11Z

I was having the same problem since a couple of days and I finally found a solution.

Credit card form was displayed but data never sent. When I check Chrome Dev Console > Network > Request Payload the "payment_data" was empty.

useEffect part did the work. Hope it helps.

(function ({ registerPaymentMethod }) {
console.log('Payment method registration script is running!');

const { useState } = wp.element;
const { __ } = wp.i18n;

const CreditCardForm = ({ eventRegistration, emitResponse }) => {
        const [cardNumber, setCardNumber] = useState('');
        const [cardExpiry, setCardExpiry] = useState('');
        const [cardCvc, setCardCvc] = useState('');

        const { onPaymentSetup } = eventRegistration;

        // Hook into the payment setup event to provide payment data
        wp.element.useEffect(() => {
                const unsubscribe = onPaymentSetup(() => {
                        console.log('Providing payment data');

                        // Basic client-side validation (optional)
                        if (!cardNumber || !cardExpiry || !cardCvc) {
                                return {
                                        type: emitResponse.responseTypes.ERROR,
                                        message: __('Please fill in all credit card fields.', 'wc-custom-cc-gateway'),
                                };
                        }

                        // Return payment data to WooCommerce for backend processing
                        return {
                                type: emitResponse.responseTypes.SUCCESS,
                                meta: {
                                        paymentMethodData: {
                                                custom_cc_card_number: cardNumber,
                                                custom_cc_card_expiry: cardExpiry,
                                                custom_cc_card_cvc: cardCvc,
                                        },
                                },
                        };
                });

                return () => unsubscribe();
        }, [onPaymentSetup, cardNumber, cardExpiry, cardCvc]);

        return wp.element.createElement( /* Redacted... Your credit card form creation goes here...  */);
};

const CustomCCPaymentMethod = {
        name: 'custom_cc',
        label: __('Credit Card', 'wc-custom-cc-gateway'),
        content: wp.element.createElement(CreditCardForm),
        edit: wp.element.createElement('div', {}, 'Credit Card Payment Method'),
        canMakePayment: () => {
                console.log('canMakePayment called');
                return true;
        },
        ariaLabel: __('Custom Credit Card Payment Method', 'wc-custom-cc-gateway'),
        supports: {
                features: ['products'],
        },
};

registerPaymentMethod(CustomCCPaymentMethod);
})(window.wc.wcBlocksRegistry);

Collectives™ on Stack Overflow

Get WooCommerce custom payment gateway values in process_payment function for Blocks checkout

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related