#marc_49265
thorn pollen
Backing up here for a minute - the sample you're referencing isn't one that's maintained by Stripe so it's hard for us to help you since we have no idea how that integration works
What debugging have you done so far to narrow down waht the issue could be? You've provided a lot of error message/stack traces, but none of them seem stripe-specific'
brisk shadowBOT
devout thunder
I tried every option from the stripe docs and none of them worked. Also, they are in JavaScript and my app is in Typescript. This was the only code that worked for me, it is from the official Vercel Nextjs Stripe docs. All my components have 'use client', but this file https://github.com/vercel/next.js/blob/canary/examples/with-stripe-typescript/lib/stripe.ts has import 'server-only', this file https://github.com/vercel/next.js/blob/canary/examples/with-stripe-typescript/app/actions/stripe.ts has 'use server' and this file https://github.com/vercel/next.js/blob/canary/examples/with-stripe-typescript/app/components/CheckoutForm.tsx shows an error: "Type '(data: FormData) => Promise<void>' is not assignable to type 'string'." and "The expected type comes from property 'action' which is declared here on type 'DetailedHTMLProps<FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>'", for this snippet: <form action={createCheckoutSession}>, when I change to <form action="/"> the error disappears, but then I get the error that I first shared above, when trying to deploy to Vercel. I think it is an issue with trying to mix the server component with the client components, but not sure. It is most likely not stripe-related, but stripe does not provide any code that will work with Nextjs 13 app router in Typescript that functions properly. There should be a more simple solution to integrate this into my project.
floral dust
Hi @devout thunder I'm taking over this thread
devout thunder
Okay, Hi Jack : )
floral dust
Give me a sec to catch up
devout thunder
sure take your time, no hurry
floral dust
Do you get any errors if you run the github project directly?
devout thunder
For some strange reason, I can not run my existing app locally so I have to deploy to Vercel. I am not sure how to run from github directly?
Fyi, here is more info about my errors/issues:
This is the error I get when I try to deploy:
Error: Error: Dynamic server usage: Page couldn't be rendered statically because it used searchParams.userId. See more info here: https://nextjs.org/docs/messages/dynamic-server-error
…from the reference at https://nextjs.org/docs/messages/dynamic-server-error, …While generating static pages, Next.js will throw a DynamicServerError if it detects usage of a dynamic function, and catch it to automatically opt the page into dynamic rendering. However, when it's uncaught, it will result in this build-time error.
I think one of or both of those files that have ‘server-only’ and ‘import server’ is the problem.
Also, I added this snippet to my next.config.js, maybe that is causing errors?
serverActions: true,
next.config.js:
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
appDir: true,
serverActions: true,
},
images: {
domains: [
'res.cloudinary.com',
'graph.facebook.com',
'lh3.googleusercontent.com',
],
},
};
module.exports = nextConfig;
The keywords to finding my errors are:
searchParams.userId, ‘server-only’ and ‘import server’ and the added code to the next.config.js.
Also,I am trying to import the <StripeForm /> component that has all of the folders and files from the original nextjs-stripe app that I created, and the components need to have ‘use client’.
I am not sure how to remove the server-related code just so I can try to see this on my page?
This is what I have to try and import, maybe this is the problem?
StripeForm.tsx
import ElementsForm from '@/app/components/ElementsForm'
export default function PaymentElementPage({
searchParams,
}: {
searchParams?: { payment_intent_client_secret?: string }
}): JSX.Element {
return (
<div className="page-container">
<ElementsForm />
</div>
)
}
This is what I already deployed that works great:
https://stripe-nextjs-test-1.vercel.app/donate-with-elements
As soon as I try and add it to my existing project, it does not work anymore.
Maybe it is how I am trying to import or load into my project?
Any ideas?
floral dust
What are the errors when you add the code to your project?
devout thunder
After adding all the code to my existing project, the only error in VS Code is from this...
<form action={createCheckoutSession}>
"Type '(data: FormData) => Promise<void>' is not assignable to type 'string'."
"The expected type comes from property 'action' which is declared here on type 'DetailedHTMLProps<FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>'"
That's it. Then I change <form action={createCheckoutSession}> to <form action="/"> and the error goes away.
Then when try and deploy, I get the error messages from Vercel"
Error: Error: Dynamic server usage: Page couldn't be rendered statically because it used searchParams.userId. See more info here: https://nextjs.org/docs/messages/dynamic-server-error
floral dust
I don't see any Stripe-specific errors here.
You might want to compare your project and the github project and see if there any difference in nextjs configuraiotn?
devout thunder
I just figured it out... well 99%.
It was the way that I was trying to import it as a component. I just added the ElementsForm on it's own page and it finally showed in the browser, without any errors.
But... I still have an error, with a red underline 'action', in this snippet.
<form action={createCheckoutSession}>
<CustomDonationInput
className="checkout-style"
name="customDonation"
min={config.MIN_AMOUNT}
max={config.MAX_AMOUNT}
step={config.AMOUNT_STEP}
currency={config.CURRENCY}
onChange={handleInputChange}
value={input.customDonation}
/>
<button
className="checkout-style-background"
type="submit"
disabled={loading}
>
Donate {formatAmountForDisplay(input.customDonation, config.CURRENCY)}
</button>
</form>
This is the CheckoutForm.tsx at https://github.com/vercel/next.js/blob/canary/examples/with-stripe-typescript/app/components/CheckoutForm.tsx
I need to figure out why that is causing an error, but at least I am one step closer now.
floral dust
https://nextjs.org/docs/app/building-your-application/data-fetching/forms-and-mutations#how-server-actions-work looks like this is something nextjs specific, have you configured server actions in your project?
devout thunder
Here are the errors from that form snippet.
“message": "Type '(data: FormData) => Promise<void>' is not assignable to type 'string'."
"message": "The expected type comes from property 'action' which is declared here on type 'DetailedHTMLProps<FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>'"
It appears to be coming from the @types/react/index.d.ts document from the node_modules, from this snippet:
interface FormHTMLAttributes<T> extends HTMLAttributes<T> {
acceptCharset?: string | undefined;
action?: string | undefined;
autoComplete?: string | undefined;
encType?: string | undefined;
method?: string | undefined;
name?: string | undefined;
noValidate?: boolean | undefined;
target?: string | undefined;
rel?: string | undefined;
}
Any ideas about this?
floral dust
Did you get a chance to read the link that I sent ealier? Have you enabled server actions?
devout thunder
yes, I think here, correct?
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
appDir: true,
serverActions: true,
},
images: {
domains: [
'res.cloudinary.com',
'graph.facebook.com',
'lh3.googleusercontent.com',
],
},
};
module.exports = nextConfig;
I will read more from that link now and see if there is other issues, thx
devout thunder
I just added the paypal component again in 5 minutes and it works perfect. I like stripe better, but I have been trying to integrate this the entire weekend and all day today, and I still do not have it working correctly. I understand that it is not stripe's fault, but if stripe can not provide the correct code for me, than I guess I can not use your service anymore. I am very disappointed, again not your fault or stripe, but I have wasted sooo much time on this and no one on the planet has a solution for me. I am sooo close, but unfortunately I think I am going to give up on stripe.
If there is anyone who works for stripe that can help me, please let me know, thx!
floral dust
Thank you for the feedback, I'd pass along it to the relevant team and suggest that you should add a next.js integration guide.
devout thunder
It's mind-boggling to me that no one at stripe can help me with this! Where are the top developers at?
floral dust
Based on the given information that I receive, I believe this is has to be something related to the serverActions configuration that we discussed earlier.
Again, my expertise lies in Stripe APIs and Products and I'm not the expert in next.js. I may not be a much of help in handling question related to other products rather than Stripe