react-stripe-js | React components for Stripe.js and Stripe Elements | Ecommerce library

I am using stripe following package in nextjs 12

I am trying to create a checkout session but I get an error message and one line is highlighted in the log. I'm not sure why it's doing this because they are both installed and present in my package.json. Has something changed? The .env variables are being logged in the console. Any help would be greatly appreciated.

"Module not found: Can't resolve 'stripe'

1 | const stripe = require("stripe")(process.env.NEXT_PUBLIC_STRIPE_SECRET_KEY); | ^"

http://localhost:3000/api/createStripeSession 500 (Internal Server Error)

I am trying create a custom Stripe Checkout according to the docs here. (Web/React/Node) https://stripe.com/docs/payments/quickstart

Following the docs I am successful in creating a paymentIntent and charging.

The problem is when I add a connected account to the stripe instance, the refuses to show. I can confirm on the Stripe dashboard that indeed a payment intent is created successfully in the connected account for the correct customer existing in said connected account, I am successfully passing back the payment intent id, but the element just won't show. Just as a sanity check, when I remove the connected account, it works as expected.

I am following here https://stripe.com/docs/connect/enable-payment-acceptance-guide?elements-or-checkout=elements&html-or-react=react on how to add the connected account.

I am trying to deploy my first React.js app on Heroku. Everything seems to work fine link to app except the most important part - the Express.js REST API that I use to fetch data from my Postgres database and Stripe API is functioning normally on localhost, but when I deploy the app on Heroku, all the API routes I am trying to access return the same syntax error - Unexpected token < in JSON at position 0.

I understand that the issue is tied to how my app routes to the API. In other words, the fetch request is not able to get to the needed endpoint and thus return this syntax error, but I can't pinpoint exactly where is the issue - am I missing a '/' somewhere, have I incorrectly set up my environment variables, etc.?

Has someone had a similar issue or maybe someone can spot the issue in my code down below?

package.json

I'm trying to create a payment method using nextJs library from stripe, like this:

I am trying to send data to my server but I think I am not sending it correctly.

I get the following error in the backend

Has anyone tried to use the new PaymentElement in Stripe? According to the documentation, the payment_method_types need to be configured in the server side and the client side will automatically configure it after retrieving the client_secret . I've followed all the steps in the documentation and all other payment methods I've selected are working but the client side will not configure FPX

Here's a screenshot of the output. As you can see, it's configuring card payment, grabpay and alipay but it isn't configuring fpx payment: Screenshot of Output

Reference to Stripe Documentation that I'm following: https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=elements

Backend view -Django

I recently downloaded Windows 11 on my system and ever since (I do not know if that is the main issue) I start my react.js app with "npm start" and activate nodemon in my terminal, I get a "RangeError [ERR_SOCKET_BAD_PORT]: Port should be >= 0 and < 65536. Received NaN" error.

The app itself is available at my localhost:3000, but in one section of my app, I have the following code that fetches data from my node express server (by using app.get()) that connects with a Postgres database.

recipe-cards.js

When trying to push my app to Heroku I am getting the following errors (edited for brevity):