#binary-next.js-error
floral scroll
Hello
the error seems to indicate you didn't pass an API key properly
can you share the code where you initialize Stripe?
left pollen
Hi there shure
In this doc is all my relevant code with subscriptions
Of course i can explain, just ask me please
floral scroll
Please share just a really specific part of your code here as text between ```
I won't open such a huge doc, you're the developer so you need to help me help you
All I need is the Stripe loading in your JS code
left pollen
Ok shure i always forget about the code sintax no problem here i go
Heres the Subscriptions page i call first
floral scroll
I don't need all of that
I just want the JS code client-side where you load/initialize Stripe.js
left pollen
export const getServerSideProps = async () => {
const stripe = initStripe(process.env.SECRET_KEY)
const { data: prices } = await stripe.prices.list()
const plans = await Promise.all(
prices.map(async (price) => {
const product = await stripe.products.retrieve(price.product)
return {
id: price.id,
name: product.name,
price: price.unit_amount,
interval: price.recurring.interval,
currency: price.currency,
}
})
)
return {
props: {
plans: plans.reverse(),
},
}
}
Heres the function i call
But this runs at server
floral scroll
Sure so that's not the issue
since the issue you showed me is in the browser client-side
so you must have code/a call client-side using Stripe too
left pollen
Ok the function processSubscription is called when i click the checkout button
import { loadStripe } from '@stripe/stripe-js'
import axios from 'axios'
const processPayment = async (courseId) => {
const stripe = await loadStripe(process.env.PUBLISHABLE_KEY)
const { data } = await axios.get(`/api/payment/charge-card/${courseId}`)
await stripe.redirectToCheckout({ sessionId: data.id })
}
const processSubscription = async (priceId) => {
const stripe = await loadStripe(process.env.PUBLISHABLE_KEY)
const { data } = await axios.get(`/api/payment/subscription/${priceId}`)
await stripe.redirectToCheckout({ sessionId: data.id })
}
const loadPortal = async () => {
const stripe = await loadStripe(process.env.PUBLISHABLE_KEY)
const { data } = await axios.get('/api/payment/portal')
window.location.href = data.url
}
export { processPayment, processSubscription, loadPortal }
perfect
all I needed is const stripe = await loadStripe(process.env.PUBLISHABLE_KEY)
this will never work!
left pollen
Its the one in the middle
floral scroll
process.env only exists server-side in your Node.js code
it can never be access client-side (would be super dangerous if it did)
So you need to change your code to have the server-side code set the key
or hardcode it for now whi;e you debug
Also lots of extra advice
1/ Do not use the redirectToCheckout. Way easier to just do a server-side redirect to the Session's url
2/ do not load Stripe.js many times. Have one method to load it once globally for all your pages
3/ Highly recommend moving away from axios.get this is an async request and you can't do a redirect in those (like I mentioned in step #1). Just do a real form/page submit and do a server-side redirect
left pollen
So if i understand well i just do a form and in the action i asume i call /api/payment/subscription/{priceId} which is my api ?
And add Stripe "global"
Oh cool !!! Way much simpler
Oh think i got it
floral scroll
Amazing
left pollen
Thank you very much @floral scroll !!! I was making things more complicated