#saintlike_code
storm vaultBOT
👋 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/1399763872583258352
📝 Have more to share? Add more details, code, screenshots, videos, etc. below.
smoky elm
hi there, taking a look now
might be difficult to troubleshoot this without the full context of your code -- however the 429 error sounds like one of your components is getting re-rendered over and over, and that component is calling the Stripe API. can you tell which URL is returning the 429 by inspecting the network panel on your browser?
nimble torrent
Hi, I would much rather prefer server first, then client component approach I am using right now The issue right now is that anything inside of CheckoutProvider does not render. here is a more descriptive code snippet
smoky elm
do you get that console.log('checkout form') happening? like does it reach the component at all?
nimble torrent
Nope, just the two logs from page and clientcontext components
smoky elm
can you share how you're importing the CheckoutClientStudio component? I noticed the export is "CheckoutForm" so I"m wondering if it's just not the component you're expecting?
nimble torrent
import CheckoutClientStudio from "@/components/checkout_page/CheckoutClientStudio"
smoky elm
can you tell if the fetchClientSecret function you're passing in is getting called? one way to do that would be to look in your network panel and see if the api/checkout-session is getting hit
nimble torrent
here it is
"use server"
import { NextResponse } from 'next/server'
// import { headers } from 'next/headers'
import { stripe } from '@/lib/stripe'
const base = process.env.NEXT_PUBLIC_BASE_URL ?? 'http://localhost:3000'
export async function POST(request) {
try {
const body = await request.json();
const { name, email, priceId, tier } = body;
const selectedPriceId = priceId;
const sessionData = {
ui_mode: "custom",
line_items: [
{
price: selectedPriceId,
quantity: 1
}
],
mode: "payment",
return_url: `${base}/checkout/complete?session_id={CHECKOUT_SESSION_ID}`
};
// Add customer information if provided
if (name || email || tier) {
sessionData.metadata = {
customer_name: name || '',
customer_email: email || '',
tier: tier || 'gallery'
};
}
// Add customer email if provided
if (email) {
sessionData.customer_email = email;
}
const session = await stripe.checkout.sessions.create(sessionData);
return NextResponse.json({ clientSecret: session.client_secret })
} catch (error) {
console.error("Checkout session error:", error)
return NextResponse.json({ error: "Failed to create checkout session" }, { status: 500 })
}
}
export async function GET(request) {
const session = await stripe.checkout.sessions.retrieve(request.nextUrl.searchParams.get('session_id'), { expand: ['payment_intent'] })
return NextResponse.json({
status: session.status,
payment_status: session.payment_status,
payment_intent_id: session.payment_intent.id,
payment_intent_status: session.payment_intent.status
})
}```
Here is what /api/checkout-session looks likeyeah I'm not seeing anything super obviously wrong :/ at this point I would try setting up a super-barebones page with as minimal an implementation of CheckoutProvider as you can, then gradually add functionality back to see if there's a point where it breaks. I'll keep looking though just in case I see anything
nimble torrent
thats fine 😄 , its confusing anyways, could you help me figuring out why the other client-only approach sends repeated requests to stripe? I'll share the code in a second
smoky elm
can you show how you're creating stripePromise?
nimble torrent
can you show how you're creating stripePromise?
const stripePromise = process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY
? loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY)
: null;
const base = process.env.NEXT_PUBLIC_BASE_URL ?? 'http://localhost:3000'
It is in page component
smoky elm
this is a longshot, but have you double checked that your env file is loading correctly? like logging out the public key just to make sure
nimble torrent
this is a longshot, but have you double checked that your env file is loading co...
Yeah, just console.logged the public stripe key
smoky elm
ok. yeah, let's take a look at the 429 issue if you'd like
nimble torrent
Okay, so this is how it is implemented:
/checkout/studio/page.jsx is the wrapper component that tracks loading states, loads stripe and provides CheckoutFormStudio with checkout context.
The problem of repeated requests until 429 happens after refreshing the page, but not on the initial load. I presume the problem is in useMemo(), i have tried using a useEffect instead, but the problem persisted
Here is the nested CheckoutFormStudio component that is inside of CheckoutProvider in page.jsx
You can see a live demo of whats happening right here https://www.showmeyoursaas.com/checkout/studio
Here is the error after reloading the page 1-2 times
smoky elm
so that appears to be an internal stripe call from the SDK... have you noticed it actually affecting the functionality of the site? like is anything broken that you can tell? it may not actually be causing a problem
if your code was causing it I would expect there to be a ton of calls to that URL in a row, but it doesn't look like that's occurring
also I laughed at the url 😄
nimble torrent
Yeah thats the funny part, everything works just as intended, I just dont feel comfortable pushing this to production with a crimson red console
nimble torrent
also I laughed at the url 😄
Its awesome right ? 😆
Could it be possible the stripe developer fab is at fault and not the application itself? i noticed whenever it loads the errors start flooding the console
smoky elm
oh that could be! you could try temporarily using your live key (which would cause that not to load) to see
nimble torrent
Would it be okay for you to not close this ticket for an hour or two? I will test it out and get back to you as soon as i can
smoky elm
sure
storm vaultBOT