#rhy_code
tawny flickerBOT
👋 Welcome to your new thread!
⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.
⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.
🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1218170282368303205
📝 Have more to share? Add more details, code, screenshots, videos, etc. below.
keen sigilBOT
vocal ravine
Hi there, sorry there wasn't enough space to write the code
pallid atlas
What's the issue?
vocal ravine
I'm trying to link my page to the stripe hosted checkout page
I previously did it, then dabbled with elements, and now am deciding to revert back to the hosted checkout page
I still have the code for it which I will paste below
but for some erason I can't link it to the page
pallid atlas
What do you mean by 'link it to page'?
vocal ravine
link the buy button to the checkout page
I am trying via a form that redirects the user to
/api/payment
where the stripe checkout page is located
something like this
<form action="/api/payment" method="POST">
OK, any more context?
vocal ravine
Here's the /api/payment page, it's too long so I split it into 2 parts
import Stripe from 'stripe';
import {NextResponse, NextRequest} from 'next/server';
export async function POST (request) {
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);
let data = await request.json();
let priceId = data.priceId;
const session = await stripe.checkout.sessions.create({
mode: 'payment',
shipping_address_collection: {
allowed_countries: [
'AC', 'AD', 'AE', 'AF'
],
},
shipping_options: [
{
shipping_rate_data: {
type: 'fixed_amount',
fixed_amount: {
amount: 3000,
currency: 'usd',
},
display_name: 'Delivered ASAP',
delivery_estimate: {
minimum: {
unit: 'business_day',
value: 1,
},
maximum: {
unit: 'business_day',
value: 1,
},
},
},
},
],
line_items: [
{
price: 'price_1OIc0bB5oiepJ50uHShfyCok',
quantity: 1,
},
],
success_url: 'http://youtube.com',
cancel_url: 'http://youtube.com',
});
return NextResponse.json(session.url)
}
so basically I'm linking the form to this /api/payment page but it's saying the page isn't working
pallid atlas
Well to be clear this is a Next.js implementation Q, nothing specific to Stripe
But seems like you're mixing Server Action concepts with Route Handlers?
vocal ravine
so which should I use?
pallid atlas
Up to you! But there is a Server Action example here: https://github.com/vercel/next.js/blob/canary/examples/with-stripe-typescript/app/components/CheckoutForm.tsx
vocal ravine
ah is this an example for a stripe hosted checkout?
pallid atlas
A Server Action is just a regular JS function that you invoke. You're passing an endpoint for a Route Handler, which won't work. You'd need to call that fetch or something: https://nextjs.org/docs/app/building-your-application/routing/route-handlers
vocal ravine
can you expand where I might be using server action?
pallid atlas
You're conflating the two concepts, so it won't work
vocal ravine
since we're supposed to be using only route handlers
pallid atlas
The <form action=""> in your code – the action attr there expects a Server Action
Our Next.js quickstart is more akin to what you want: https://docs.stripe.com/payments/quickstart?client=next
pallid atlas
Yeah but how that works is depedent on which flavour of Next.js you're using - App Router or Pages
vocal ravine
I think im using app router
pallid atlas
Our quickstart uses pages still, which is now the old non-default Next.js concept
vocal ravine
and the example is too tho
pallid atlas
and the example is too tho
Which example?
vocal ravine
Our Next.js quickstart is more akin to what you want: https://docs.stripe.com/pa...
this one
pallid atlas
No it isn't – you can see the pages/ directory in the paths
You need to use the example I linked earlier if you're in the App Router
vocal ravine
A Server Action is just a regular JS function that you invoke. You're passing an...
this one?
pallid atlas
If you want to use a Route Handler in App Router then you'd need an onClick/onSubmit handler and then call the endpoint via fetch
vocal ravine
gimme a sec
Will give that a try in a bit, I assume this thread will close soon?
Can I refer to this later when I reopen it
pallid atlas
Sure
keen sigilBOT