Not getting callback url in embedded checkout

Question

I am trying to integrate razorpay embedded checkout on my flutter web app, but after payment is done, it is getting failed, unable to parse data from url.

My embedded checkout.dart:

import 'dart:developer';
import 'dart:html' as html;

void launchRazorpayEmbeddedCheckout(
    String keyId,
    int amount,
    String orderId,
    String name,
    String description,
    String imageUrl,
    String prefillName,
    String prefillEmail,
    String prefillContact,
    String callbackUrl,
    dynamic router) {

  print('Starting Razorpay embedded checkout process');

  print('Callback URL: $callbackUrl');

  final form = html.FormElement();
  form.method = 'POST';
  form.action = 'https://api.razorpay.com/v1/checkout/embedded';

  form.append(html.InputElement()
    ..type = 'hidden'
    ..name = 'key_id'
    ..value = keyId);

  form.append(html.InputElement()
    ..type = 'hidden'
    ..name = 'amount'
    ..value = amount.toString());

  form.append(html.InputElement()
    ..type = 'hidden'
    ..name = 'order_id'
    ..value = orderId);

  form.append(html.InputElement()
    ..type = 'hidden'
    ..name = 'name'
    ..value = name);

  form.append(html.InputElement()
    ..type = 'hidden'
    ..name = 'description'
    ..value = description);

  form.append(html.InputElement()
    ..type = 'hidden'
    ..name = 'image'
    ..value = imageUrl);

  form.append(html.InputElement()
    ..type = 'hidden'
    ..name = 'prefill[name]'
    ..value = prefillName);

  form.append(html.InputElement()
    ..type = 'hidden'
    ..name = 'prefill[email]'
    ..value = prefillEmail);

  form.append(html.InputElement()
    ..type = 'hidden'
    ..name = 'prefill[contact]'
    ..value = prefillContact);

  form.append(html.InputElement()
    ..type = 'hidden'
    ..name = 'callback_url'
    ..value = callbackUrl);

  html.document.body?.append(form);

  print('Submitting the form to Razorpay');

  form.submit();

  print('Form submitted to Razorpay');

  form.remove();

  print('Razorpay embedded checkout process completed');

  html.window.onMessage.listen((event) {
    print('Received message from Razorpay');
    var paymentResponse = event.data;
    log("Payment response: $paymentResponse");
    if (paymentResponse is Map) {
      if (paymentResponse['paymentStatus'] == 'success') {
        router.go('/payment-success', extra: paymentResponse);
      } else {
        router.go('/payment-failed', extra: paymentResponse);
      }
    } else {
      print('Invalid payment response format');
    }
  });
}

This is the data which i am passing to embaded checkout

 launchRazorpayEmbeddedCheckout(
            dotenv.env['RAZORPAY_KEY']!,
            amount,
            orderId,
            Name1,
            'Payment for product',
            'assets/logo.png',
            Name2,
            email,
            mobileNumber,
          'http://localhost:51998/payment-callback.html', 
            GoRouter.of(context),
          );

This is my javascript code

<script>
  window.addEventListener('message', function(event) {
    try {
      const options = JSON.parse(event.data);
      console.log('Received options:', options);
      const rzp = new Razorpay(options);
      rzp.on('payment.success', function(response) {
        console.log('Payment successful:', response);
        window.parent.postMessage(JSON.stringify({
          razorpayStatus: 'SUCCESS',
          ...response
        }), '*');
      });
      rzp.on('payment.failed', function(response) {
        console.error('Payment failed:', response);
        window.parent.postMessage(JSON.stringify({
          razorpayStatus: 'FAILED',
          ...response
        }), '*');
      });

      rzp.open(); 
    } catch (error) {
      console.error('Checkout error:', error); 
    }
  });
</script>

i tried using html form also, but it didn't solve any issue, unable to parse url to get data and verify payment. Any help would be appreciated