This is my first time posting for help so please bear with me.
I've created a react app that uses express to create payment intents with Stripe. Locally on my machine, the app works perfectly fine. I can navigate to the page that fetches the POST method and creates a payment intent that I can see on the Stripe dashboard. However, when I've uploaded to Heroku, every time I hit the page, I immediately get a 405 Not Allowed error for my post method.
I noticed the response header was set to text/plain and tried to change that to JSON using res.type('json'), however the error still showed the response header was set to text/plain. I don't quite know if that's the issue. Any help would be very appreciated.
Screenshot of Error Screenshot of Success on my local machine
Server.js file.
const express = require("express");
const app = express();
const { resolve } = require("path");
const path = require('path');
const cors = require('cors')
// This is your real test secret API key.
const stripe = require("stripe")(hidden);
const PORT = process.env.PORT || 4242;
app.use(express.static("."));
app.use(express.json());
app.use(cors());
app.use(express.static(path.join(__dirname, 'build')));
app.get('/*', (req, res) => {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
const calculateOrderAmount = items => {
let result = items.map(a => a.qty * 1500);
const reducer = (accumulator, currentValue) => accumulator + currentValue;
return result.reduce(reducer, 500)
};
app.post("/create-payment-intent", async (req, res) => {
const { items } = req.body;
// Create a PaymentIntent with the order amount and currency
const paymentIntent = await stripe.paymentIntents.create({
amount: calculateOrderAmount(items),
currency: "usd",
payment_method_types: ['card'],
});
res.send({
clientSecret: paymentIntent.client_secret
});
});
Function calling the POST Request inside of my React Function
useEffect(() => {
// Create PaymentIntent as soon as the page loads
window
.fetch("/create-payment-intent", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({items: [{ qty: qty1 }, {qty: qty2}, {qty: qty3}] })
})
.then(res => {
return res.json();
})
.then(data => {
setClientSecret(data.clientSecret);
});
}, [qty1, qty2, qty3]);
Is there anything else I need to provide to get help with this issue?
