how to send metadata with wp stripe checkout plugin?

<div id="stripeButtonContainer" style="display: none;">
    <?php                     
        echo do_shortcode('[wp_stripe_checkout_session name="' . $product_name . '" price="' . $price . '" button_text="Pay Now" prefill_wp_email="true" metadata="'.json_encode(array('booking_data' => $bookingData)).'"]');
    ?>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        $("#np-button").hide();
        const nextBtn = document.getElementById('next-btn');
        const prevBtn = document.getElementById('prev-btn');
        const step1 = document.getElementById('step-1');
        const step2 = document.getElementById('step-2');
        const multiStepForm = document.getElementById('multi-step-form');

        nextBtn.addEventListener('click', () => {
            
            if (multiStepForm.checkValidity()) {

                const bookingData = {                    
                    user_id:    document.getElementById('user_id').value,
                    guest_name: document.getElementById('full-name').value,
                    email:      document.getElementById('email').value,
                    phone:      document.getElementById('phone').value,
                    address:    "<?php echo $address; ?>",
                    zip_code:   document.getElementById('zip-code').value,
                    city:       document.getElementById('city').value,
                    country:    document.getElementById('country').value,
                    subscribe:  document.getElementById('subscribe').checked ? 1 : 0,                   
                    check_in:   "<?php echo $check_in->format('Y-m-d'); ?>",
                    check_out:  "<?php echo $check_out->format('Y-m-d'); ?>",                   
                    property_id: "<?php echo $lbb_p_id; ?>",                
                };
                console.log(bookingData);
                document.getElementById('booking_data').value = JSON.stringify(bookingData);

                step1.classList.remove('active');
                step2.classList.add('active');
                $("#np-button").show();
            } else {
                multiStepForm.reportValidity();
            }
        });

        prevBtn.addEventListener('click', () => {
            $("#np-button").hide();
            step2.classList.remove('active');
            step1.classList.add('active');
        });
    });
</script>

i have used the?wp-stripe-checkout?plugin for payment, now i want to send some custom fields with payment, for that i have done the above code,

im passing bookingData as metadata in the shortcode, but whern i have checked in the Stripe Dashboard, metadata shows the empty, now please help me with this, how can i send metadata with checkout?