Stripe checkout failing to load from firebase cloud function (Fixed) - node.js

Question

Edit: Update on how I got it working at bottom.
I have a cloud function which creates a stripe checkout session when it is called from my React application.
When it is called I get the following error in the debugger: Failed to load resource: net::ERR_FAILED
Here is the cloud function:
const functions = require('firebase-functions');
const express = require('express');
const app = express();
const cors = require('cors');
const stripe = require('stripe')((private key removed for this question))
app.use(cors());
exports.createCheckoutSession = functions.https.onRequest(async (req, res) => {
const session = await stripe.checkout.sessions.create({
payment_method_types: ['card'],
line_items: [
{
price_data: {
currency: 'usd',
product_data: {
name: 'T-shirt',
},
unit_amount: 2000,
},
quantity: 1,
},
],
mode: 'payment',
success_url: 'https://example.com/success.html',
cancel_url: 'https://example.com/cancel.html',
});
res.json({id: session.id});
});
app.listen(4242, () => console.log(`Listening on port ${4242}!`));
I believe the cloud function is working correctly as when I run:
curl -X POST -is "https://us-central1-project-name.cloudfunctions.net/createCheckoutSession" -d ""
I get a success message.
And here is where it is called on the front-end:
const response = await fetch("https://us-central1-project-name.cloudfunctions.net/createCheckoutSession", {
method: "POST",
});
const session = await response.json();
// When the customer clicks on the button, redirect them to Checkout.
const result = await stripe.redirectToCheckout({
sessionId: session.id,
});
if (result.error) {
// If `redirectToCheckout` fails due to a browser or network
// error, display the localized error message to your customer
// using `result.error.message`.
alert(result.error.message);
}
};
I am getting the error on the fetch call.
Any help would be appreciated.
Update:
I managed to get it to work by referencing this post:
Access-Control-Allow-Origin not working Google Cloud Functions GCF
The issue was with CORS. I needed to add in these headers to the function method:
res.set('Access-Control-Allow-Origin', '*');
res.set('Access-Control-Allow-Methods', 'GET, POST');
res.set('Access-Control-Allow-Headers', 'Content-Type');
res.set('Access-Control-Max-Age', '3600');

Answer 1

You need to create something called a paymentIntent from backend and then pass the paymentIntent Id to your frontend, here is an example const stripe = require('stripe')('sk_test_4eC39HqLyjWDarjtT1zdp7dc'); const paymentIntent = await stripe.paymentIntents.create({ amount: 2000, currency: 'usd', payment_method_types: ['card'], }); why are you using a cloud function using react and simple nodes app will be a lot better (because you will need to set up webhooks for stripe to hit your api for certain transaction) and safer too, I have integrated stripe this way into my react app and it works fine I can share some code snippets, the authentication and all the important stuff will be done in your nodejs app or what ever server-side you are using the front end will only handle the results and you will be able to show errors, add retry logic etc
React Stripe Doc