stripe-js | Loading wrapper for Stripe.js | Ecommerce library

I am using stripe following package in nextjs 12

Stripe provides example in docs for using PaymentElement where they create the component at the root of the app and wrap it around the entire website. This works well with being able to access the stripe object from anywhere within the app using the useStripe and useElements hooks.

However, when they create elements at the root, they also specify the options parameter which contains a clientPromise. clientPromise can only be obtained once the item being purchased is known. Hence, I need to generate the clientPromise in a subcomponent that deals with checkout.

Stripe Docs Code

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 link one of my react components to the other and it is is coming up as undefined. I have no idea what to do now because I have no experience with linking an export default function.

I am trying to link this code

In my project, I am using WordPress woo-commerce as backend and next js as frontend. I am trying to implement stripe payment. I can send line items in stripe sessionData and they show perfectly on the stripe page, how ever when I am trying to send the tax amounts with line items I am getting errors.

My project is working perfectly from past month but when i reinstall windows and try to run my project again it show error 'addDoc' is not exported from 'firebase/firestore'

and now for some region if that error fixed it show collection not exported. i already install Firebase inside my project and firebase cli too.

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 am working on project upgrade from Vue 2 to Vue 3. The code base changed according to Vue migration documents: https://v3.vuejs.org/guide/migration/introduction.html#overview. I have mismatch of above mentioned libraries. Does somebody has a running project and would share their working library versions

Current mismatch error is :