Please help! I am still trying to add stripe elements to my project. When I use the exact code (.js) from https://stripe.com/docs/payments/quickstart?client=next, it does not work. It only shows the text for Name, MM / YY, CVC, and a generic submit button, but no UI, fields, styles, etc. I converted the .js/.jsx to .ts/.tsx, same results. I tried a few others from stripe, git hub, Vercel, same results. Then, I tried the donate-with-elements at https://github.com/vercel/next.js/tree/canary/examples/with-stripe-typescript. I finally got it to work perfect, used the test cards, everything functioned correctly, processed the payment, redirected to confirmation results, etc. After that, I copied those files into my Next.js 13 Typescript project, added dependencies, enabled the 'server action', etc, but now it does not work. When I try to run locally and deploy to Vercel, I can not get passed this error:

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.

,-[/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

...