Payment is not made with no throttling

Question

I am implementing Stripe intent payment in my Angular + Firebase app. I implemented Firebase function like this from example on official documentation.

My problem is that if I try to do payment with mocked card from Stripe documentation, it is working good just if I set in network tab for throttling something else than no throttling. If I set Fast 4G, slow 4G, 3G everything is working good, it trigger on button click the handleSubmit function and it will add 50€ to my stripe account. But if I set no throttling, nothing happens in my app it just refreshes the page.

Where could the problem be?

const functions = require('firebase-functions');
const stripe = require('stripe')(functions.config().stripe.secret); // Store your Stripe secret in Firebase functions config

const calculateOrderAmount = (items: any) => {
  let total = 0;
  items.forEach((item: any) => {
    total += item.amount; // Assuming `item.amount` contains the price
  });
  return total;
};

exports.createPaymentIntent = functions.https.onCall(
  async (data: any, context: any) => {
    const { items } = data; // Accept the items from the client

    const paymentIntent = await stripe.paymentIntents.create({
      amount: calculateOrderAmount(items),
      currency: 'eur',
      automatic_payment_methods: { enabled: true },
    });

    return {
      clientSecret: paymentIntent.client_secret,
      dpmCheckerLink: `https://dashboard.stripe.com/settings/payment_methods/review?transaction_id=${paymentIntent.id}`,
    };
  }

On my frontend I have code like this app.component.ts:

async ngOnInit() {
    const items = [
      { amount: 5000 }, // Example: replace with actual items from your cart
    ];
    const { clientSecret } = await this.paymentService.createPaymentIntent(
      items
    );
    console.log(clientSecret);
    const elements = await this.paymentService.loadStripeElements(clientSecret);

    if (elements) {
      this.elements = elements;
      this.paymentElement = elements.create('payment');
      this.paymentElement.mount('#payment-element');
    }
  }

  async handleSubmit() {
    const orderId = '123';
    const result = await this.paymentService.stripe.confirmPayment({
      elements: this.elements,
      confirmParams: {
        return_url: `https://localhost:4200/success-order/${orderId}`, // Replace with your success URL
      },
    });
  }

and my payment service looks like this:

async createPaymentIntent(items: any[]) {
    const createPaymentIntent = this.functions.httpsCallable(
      'createPaymentIntent'
    );
    const response = await createPaymentIntent({ items }).toPromise();
    return response;
  }

  async loadStripeElements(clientSecret: string) {
    console.log(clientSecret);
    const appearance = {
      theme: 'night',
    } as any;
    const elements = this.stripe.elements({ appearance, clientSecret });
    return elements;
  }