Currently, I can display custom fields on the checkout page but I’m struggling to pass the values to the POST request so I can process them further. I have all name, id attributes on my inputs but still no luck.

On checkout.js I’ve include custom field with below code.

// Import necessary modules from WordPress
const { createElement, Fragment } = wp.element;
const { __ } = wp.i18n;

// Get settings from WooCommerce
const paythensettings = window.paythen_custom_gateway_data;
const paythenlabel = wp.htmlEntities.decodeEntities(paythensettings.title) || __('Paythen Custom Gateway', 'paythen_custom_gateway');

// Function to create and return the content as a React element
const createPaythenContent = () => {
    // Generate the description content
    const description = wp.htmlEntities.decodeEntities(paythensettings.description || '');

    // Create description element
    const descriptionElement = createElement('div', { className: 'paythen-description' }, description);

    // Create Installment Field if applicable
    let installmentField = null;
    if (paythensettings.numberInstallments === 'yes') {
        if (paythensettings.minInstallment && paythensettings.maxInstallment) {
            // Create dropdown if both minimum and maximum installments are defined
            const options = [];
            for (let i = paythensettings.minInstallment; i <= paythensettings.maxInstallment; i++) {
                options.push(createElement('option', { value: i, key: i, selected: i === paythensettings.minInstallment }, i));
            }
            installmentField = createElement('div', { className: 'installment-options' },
                createElement('label', { htmlFor: 'customer_instalment' }, __('Choose Installments', 'woocommerce')),
                createElement('select', { id: 'customer_instalment', name: 'customer_instalment' }, options)
            );
        } else {
            // Create number input field if either or both minimum and maximum installments are not defined
            installmentField = createElement('div', { className: 'installment-options' },
                createElement('label', { htmlFor: 'customer_instalment' }, __('Choose Installments', 'woocommerce')),
                createElement('input', { type: 'number', id: 'customer_instalment', name: 'customer_instalment' })
            );
        }
    }

    // Create Separate Payment Options if applicable
    const separatePaymentOptions = paythensettings.separatePayment === 'yes' ? createElement('div', { className: 'separate-payment-options' },
        createElement('label', { className: 'separate-label' }, __('Choose your payment option', 'woocommerce')),
        ...paythensettings.paymentOptions.map((option, index) =>
            createElement('div', { key: option.url },
                createElement('input', { type: 'radio', name: 'separate_payment', value: option.url, defaultChecked: index === 0 }),
                createElement('label', null, option.title)
            )
        )
    ) : null;

    // Combine all parts into a single content element
    return createElement(Fragment, null, descriptionElement, installmentField, separatePaymentOptions);
};

// Register the payment method
const Paythen_Block_Gateway = {
    name: 'paythen',
    label: paythenlabel,
    content: createElement(createPaythenContent),
    edit: createElement(createPaythenContent),
    canMakePayment: () => true,
    ariaLabel: paythenlabel,
    supports: {
        features: paythensettings.supports,
    },
};

// Ensure the registry is ready and then register the payment method
if (window.wc && window.wc.wcBlocksRegistry) {
    window.wc.wcBlocksRegistry.registerPaymentMethod(Paythen_Block_Gateway);
} else {
    console.error('WooCommerce Blocks registry is not available.');
}

On other file I’ve called 2 field

// Add Installment Field
        if ($numberInstallments == 'yes') {
            $description .= '<div class="installment-options">';
            $description .= '<label for="customer_instalment">' . __('Choose Installments', 'woocommerce') . '</label>';
            
            // Check if both minimumInstallment and maximumInstallment are defined
            if (isset($minimumInstallment) && isset($maximumInstallment)) {
                $description .= '<select id="customer_instalment" name="customer_instalment">';
                for ($i = $minimumInstallment; $i <= $maximumInstallment; $i++) {
                    $selected = ($i == $minimumInstallment) ? 'selected' : '';
                    $description .= '<option value="' . esc_attr($i) . '" ' . $selected . '>' . esc_html($i) . '</option>';
                }
                $description .= '</select>';
            } else {
                $description .= '<input type="number" id="customer_instalment" name="customer_instalment">';
            }

            $description .= '</div>';
        }


        // Add Separate Payment Options
        if ($numberInstallments == 'no' && $separatePayment == 'yes') {
            if (!empty($payment_title_one) || !empty($payment_title_two) || !empty($payment_title_three)) {
                $payment_options = array();

                // Create an array of payment options and their URLs, excluding options with empty values
                if (!empty($payment_title_one) && !empty($payment_url_one)) {
                    $payment_options[$payment_title_one] = $payment_url_one;
                }
                if (!empty($payment_title_two) && !empty($payment_url_two)) {
                    $payment_options[$payment_title_two] = $payment_url_two;
                }
                if (!empty($payment_title_three) && !empty($payment_url_three)) {
                    $payment_options[$payment_title_three] = $payment_url_three;
                }

                // Generate radio buttons for payment options and append to $description
                $description .= '<div class="separate-payment-options">';
                $description .= '<label class="separate-label">' . __('Choose a payment plan option:', 'woocommerce') . '</label>';
                $count_id = 0;
                foreach ($payment_options as $title => $url) {
                    $description .= '<input type="radio" name="separate_payment" id="separate_payment_'.$count_id.'" value="' . esc_attr($url) . '">';
                    $description .= '<label for="separate_payment_'.$count_id.'">' . esc_html($title) . '</label><br>';
                    $count_id++;
                }
                $description .= '</div>';
            }
        }

While grab value from front-end and tries to save on meta_data not able to get input value inside $_POST

add_action('woocommerce_checkout_create_order', 'save_paythen_option_order_meta', 20, 2);

function save_paythen_option_order_meta($order, $data) {
    if (isset($_POST['customer_instalment']) && !empty($_POST['customer_instalment'])) {
        $order->update_meta_data('_customer_instalment', sanitize_text_field($_POST['customer_instalment']));
    }
    
    if (isset($_POST['separate_payment']) && !empty($_POST['separate_payment'])) {
        $order->update_meta_data('_separate_payment', sanitize_text_field($_POST['separate_payment']));
    }

    $order->save();
}