Currently, I am following a video tutorial (here) and specifically on part 8 which covers payment processing. The payment process involves using Stripe, Axios, and Node.js. However, whenever attempting to make a POST request to one of the API's routes, a CORS error and Internal Server Error are encountered.
The payment page is embedded as a component in React. When proceeding to checkout, errors appear in the console:
"Access to XMLHttpRequest at 'http://127.0.0.1:5001/clone-e99f7/us-central1/api/payments/create?total=2999' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource." Where the total represents the purchase cost multiplied by 100.
&
"POST net::ERR_FAILED 500 (Internal Server Error)"
In the payment component code snippet:
const [{ basket, user }, dispatch] = useStateValue();
const navigate = useNavigate();
const stripe = useStripe();
const elements = useElements();
const [succeeded, setSucceeded] = useState(false);
const [processing, setProcessing] = useState("");
const [error, setError] = useState(null);
const [disabled, setDisabled] = useState(true);
const [clientSecret, setClientSecret] = useState(true);
useEffect(() => {
const getClientSecret = async () => {
try {
const response = await axios({ // The error is likely here
method: "post",
url: `/payments/create?total=${getBasketTotal(basket) * 100}`,
});
setClientSecret(response.data.clientSecret);
}
catch (error) {
console.log(error) // Error is never logged
}
};
getClientSecret();
}, [basket]);
Where the basket contains user-selected items for purchase.
In the index.js file:
const functions = require("firebase-functions");
const express = require("express");
const cors = require("cors");
const stripe = require("stripe")(/* secret key */);
// API
// - App config
const app = express();
// - Middlewares
app.use(cors({ origin: true }));
app.use(express.json());
// - API routes
app.get("/", (request, response) => response.status(200).send("This is working"));
app.post("/payments/create", async (request, response) => {
console.log("Payment Request Received for this Amount: ", total);
const total = request.query.total;
const paymentIntent = await stripe.paymentIntent.create({
amount: total,
currency: "usd",
});
response.status(201).send({
clientSecret: paymentIntent.client_secret,
});
});
// - Listen command
exports.api = functions.https.onRequest(app);
And within the axios.js file:
import axios from "axios"
const instance = axios.create({
baseURL: "http://127.0.0.1:5001/clone-e99f7/us-central1/api" // API (cloud function) URL
})
export default instance;
Despite the API URL functioning correctly, issues arise when making a POST request to /payments/create?total=x resulting in the mentioned errors. The application is run using the firebase emulators:start command.
Tried utilizing cors({origin: "*"}) without success. Any suggestions?