Payment is not made with no throttling

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;
}

Continue reading...