Integrating Stripe TypeScript 'donate-with-elements' into my Next.js 13 app router project
Unanswered
Donskoy posted this in #help-forum
DonskoyOP
Hello everyone,
I am currently integrating Stripe TypeScript 'donate-with-elements' into my Next.js 13 app router project. I found a reference from the official Next.js GitHub repository, specifically the example with Stripe TypeScript.
When I run the Stripe app on its own, it works perfectly fine both locally and when deployed on Vercel. However, when I import it into my existing project, I encounter issues specifically with the
I have made several attempts to resolve this issue by referring to the Stripe documentation, GitHub repositories, Vercel's documentation, and other resources, but I have not been able to make the Stripe payment functionality work correctly.
I have reached out to Stripe support and even consulted with their developers, but I have not yet found a solution. I am eager to find a way to make this integration work or explore alternative solutions that can provide similar functionality.
If anyone has any suggestions or insights, I would greatly appreciate your input.
I am currently integrating Stripe TypeScript 'donate-with-elements' into my Next.js 13 app router project. I found a reference from the official Next.js GitHub repository, specifically the example with Stripe TypeScript.
When I run the Stripe app on its own, it works perfectly fine both locally and when deployed on Vercel. However, when I import it into my existing project, I encounter issues specifically with the
/api/actions/stripe.ts file. I am unable to resolve the error occurring in this file, and it seems to be related to the 'use server' directive. I am unsure how to properly handle this directive in the context of my client components.I have made several attempts to resolve this issue by referring to the Stripe documentation, GitHub repositories, Vercel's documentation, and other resources, but I have not been able to make the Stripe payment functionality work correctly.
I have reached out to Stripe support and even consulted with their developers, but I have not yet found a solution. I am eager to find a way to make this integration work or explore alternative solutions that can provide similar functionality.
If anyone has any suggestions or insights, I would greatly appreciate your input.
1 Reply
DonskoyOP
Here is the error message I receive when attempting to deploy to Vercel:
Failed to compile.
./app/actions/stripe.ts
ReactServerComponentsError:
You're importing a component that needs next/headers. That only works in a Server Component but one of its parents is marked with "use client", so it's a Client Component.
,-[/vercel/path0/app/actions/stripe.ts:3:1]
3 | import type { Stripe } from 'stripe'
4 |
5 | import { redirect } from 'next/navigation'
6 | import { headers } from 'next/headers'
: ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
7 |
8 | import { CURRENCY } from '@/config'
9 | import { formatAmountForStripe } from '@/utils/stripe-helpers'
`----
One of these is marked as a client entry with "use client":
./app/actions/stripe.ts
./app/components/ElementsForm.tsx
Failed to compile.
./app/actions/stripe.ts
ReactServerComponentsError:
You're importing a component that needs next/headers. That only works in a Server Component but one of its parents is marked with "use client", so it's a Client Component.
,-[/vercel/path0/app/actions/stripe.ts:3:1]
3 | import type { Stripe } from 'stripe'
4 |
5 | import { redirect } from 'next/navigation'
6 | import { headers } from 'next/headers'
: ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
7 |
8 | import { CURRENCY } from '@/config'
9 | import { formatAmountForStripe } from '@/utils/stripe-helpers'
`----
One of these is marked as a client entry with "use client":
./app/actions/stripe.ts
./app/components/ElementsForm.tsx
Build failed because of webpack errorsError: Command "npm run build" exited with 1