Why are jumping through hoops putting your api keys in other files only to expose them in your front end code with fetch? Since you’re using nextjs, if you deploy to Vercel they support environment variables in production and development. Not to mention you can just load them in from a .env file
Exactly , Expose environment variables to the browser by prefixing with NEXT_PUBLIC_ Stripe Example : in .env NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=sp_test_xxxxxxxx in your app (front code) const STRIPE_PUBLISHABLE_KEY = env.process.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
Hey there - the best framework would be the one you're most comfortable with and that matches your other use cases. If you have any further questions, reach out to us at support.stripe.com/contact.
Hey Erick! In general, browsers cache your JS code. Retrieving the public key from an endpoint makes it easier to update your key (in case you ever need to) on applications. This especially applies for building for mobile clients where the public key shouldn't be embedded into the app’s source. You can manage that on the server.
@@StripeDev Hey! I'm building a static generated site with NextJS, (like serverless). Is it still possible for me to just .ENV the keys into my site and basically 'run build' whenever I need to update the site? Looking for a good serverless payment style and I want to know if Stripe supports it
@@StripeDev You said it will be coming about 7 months ago and now you say keep an eye out for it? Just say NO, you do not have a follow up to the video and NO you're not going to finish that video. Thanks!
@@clipartinc stripe dont understand that junior devs are more important then they realise, if another payment API comes out and does really good tutorials they will fall by the wayside and will only have themselves to blame! Not ONE easy to follow stripe connect tutorial in ANY language, then when you go to look at one just for payments they dont even bother to finish it!
@@neverforget1575 Yes, it is frustrating! I wish Stripe would make a complete video for each framework instead of bouncing around projects. It seems all of the tutorials use a different method and none of them seem to work correctly anymore.
Awesome! Thanks, great video. Have any resources/tutorials/videos on how to use this next.js to create a membership site where the user would create an account, select a monthly plan, complete stripe transaction, and then authenticate the user to display only the content based on the plan selected through Stripe. I'm learning so if there's a better solution let me know! Thanks.
My goal is 1) User creates an account, chooses a plan, and then logs in. 2) Once logged in they will link their account with a 3rd party service (quickbooks) to allow them to use my site to perform actions that would then be sent to quickbooks via the API. Thanks if you can provide some input on this. Thanks!
Hey Shannon! We don't have a pre-built solution for what you're describing. Are you a developer? If so you'd need to write the code for this specific use case yourself. If you aren't a developer we have a variety of resources here to look into hiring someone who will be able to do this: stripe.com/partners/expert-services
This video covers the integration with Stripe in a server. It is meant for both dev and live server. The difference is the test mode and live mode key used. You can toggle the same integration between dev and live with keys in different modes. All documentation used in this video can be found here: stripe.com/docs/issuing
This is the most helpful/effective Stripe Developers channel video I've watched. Hope you do more!
Thanks Rachel! Appreciate your kind words.
Useful demonstration
Why are jumping through hoops putting your api keys in other files only to expose them in your front end code with fetch?
Since you’re using nextjs, if you deploy to Vercel they support environment variables in production and development. Not to mention you can just load them in from a .env file
Exactly ,
Expose environment variables to the browser by prefixing with NEXT_PUBLIC_
Stripe Example :
in .env
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=sp_test_xxxxxxxx
in your app (front code)
const STRIPE_PUBLISHABLE_KEY = env.process.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
you can fetch thru SSR.
Hey there - the best framework would be the one you're most comfortable with and that matches your other use cases. If you have any further questions, reach out to us at support.stripe.com/contact.
I use react + firestore + stripe checkout + webhook in firebase cloud function :)
Quick question, why did you create an endpoint just to get the keys, why didn’t you read the environment variable directly from the .env file ?
Hey Erick! In general, browsers cache your JS code. Retrieving the public key from an endpoint makes it easier to update your key (in case you ever need to) on applications. This especially applies for building for mobile clients where the public key shouldn't be embedded into the app’s source. You can manage that on the server.
@@StripeDev Hey! I'm building a static generated site with NextJS, (like serverless). Is it still possible for me to just .ENV the keys into my site and basically 'run build' whenever I need to update the site? Looking for a good serverless payment style and I want to know if Stripe supports it
@@StripeDev But wouldn't it make our system easily hackable ?
@@secretsanta3029 yep. it exposes the key!
@@StripeDev can you demo stripe subscription and Next js please 🙏 😉
Awesome video ++++++++++ 😃
What is best for payment back end? Next JS, or Firebase Cloud Functions Webhook?
This video is great, but it's only half the process. Why leave us hanging like that?
Thanks for the feedback! We don't have a follow-up yet but be sure to keep an eye out for it in the future.
@@StripeDev You said it will be coming about 7 months ago and now you say keep an eye out for it? Just say NO, you do not have a follow up to the video and NO you're not going to finish that video. Thanks!
@@clipartinc stripe dont understand that junior devs are more important then they realise, if another payment API comes out and does really good tutorials they will fall by the wayside and will only have themselves to blame! Not ONE easy to follow stripe connect tutorial in ANY language, then when you go to look at one just for payments they dont even bother to finish it!
@@neverforget1575 Yes, it is frustrating! I wish Stripe would make a complete video for each framework instead of bouncing around projects. It seems all of the tutorials use a different method and none of them seem to work correctly anymore.
Awesome! Thanks, great video. Have any resources/tutorials/videos on how to use this next.js to create a membership site where the user would create an account, select a monthly plan, complete stripe transaction, and then authenticate the user to display only the content based on the plan selected through Stripe. I'm learning so if there's a better solution let me know! Thanks.
My goal is 1) User creates an account, chooses a plan, and then logs in. 2) Once logged in they will link their account with a 3rd party service (quickbooks) to allow them to use my site to perform actions that would then be sent to quickbooks via the API. Thanks if you can provide some input on this. Thanks!
Hey Shannon! We don't have a pre-built solution for what you're describing. Are you a developer? If so you'd need to write the code for this specific use case yourself. If you aren't a developer we have a variety of resources here to look into hiring someone who will be able to do this: stripe.com/partners/expert-services
@@StripeDev I’m a hobby developer trying to learn to build it myself. 😂
I have a similar goal with my app. See my tutorial. No need to use next js, cloud function webhook do the trick :)
Is this suppose to cover live server setup?its not clear in which environments you inted to build this?
This video covers the integration with Stripe in a server. It is meant for both dev and live server. The difference is the test mode and live mode key used. You can toggle the same integration between dev and live with keys in different modes.
All documentation used in this video can be found here: stripe.com/docs/issuing
will there be a next part soon ?
Working on it! Should be out soon!
@@paulasjes5852 Is it out yet?
J'aime beaucoup stripes mais ici non
Ici? Check out Nike Clone?
Your theme look so DARK, a litle hard to see
Hi there-we're always looking at ways to improve our processes, so certainly do appreciate the insight here!