Integrate Stripe TypeScript 'donate-with-elements' into Next.js 13 app router project

[elfin flare]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[uncut gull]

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

Build failed because of webpack errors
Error: Command "npm run build" exited with 1

I am using the ‘/actions/stripe.ts’ document from https://github.com/vercel/next.js/blob/canary/examples/with-stripe-typescript/app/actions/stripe.ts

[scenic island]

You cannot put "use client" at the top of this file as it uses the header() function which can only be used in Server Components and Server Actions.

Keep the "use server" directive at the top. What you need to do is enable "Server Actions".

Take a look at this file:
https://github.com/vercel/next.js/blob/canary/examples/with-stripe-typescript/next.config.js

Just put that into your own app's next.config.js

And restart the server

[uncut gull]

Thank you for your help! I already have 'use server' at the top and my server actions are enabled. I am using this exact code from https://github.com/vercel/next.js/tree/canary/examples/with-stripe-typescript and the /actions/stripe.ts from here https://github.com/vercel/next.js/blob/canary/examples/with-stripe-typescript/app/actions/stripe.ts

[scenic island]

Then that means ./app/components/ElementsForm.tsx is a client component

You cant do that

[uncut gull]

Hmm, it is a client component, but it works great when I test it alone, with 'use server' in the /actions/stripe.ts and 'use client' in my ElementsForm.tsx. Why does it work alone , but not in my project? What am I missing?

[scenic island]

You cant import Server Component into Client Component.

https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns

[uncut gull]

I guess I will never use stripe then. I have been at this for days and I am at a complete lost. The repository has it that way, so I don't know what to do anymore. Anyway, thank you so much for your help.

[scenic island]

It turns out i was wrong. Server Components cant do that but Server Actions can imported into Client Components. So this issue is related to something else.