How to COLLECT PAYMENTS with STRIPE + NEXT.js (Step-by-Step Tutorial)

แชร์
ฝัง
  • เผยแพร่เมื่อ 14 ต.ค. 2024

ความคิดเห็น • 31

  • @WarZzed300
    @WarZzed300 2 ปีที่แล้ว

    Hello, I wanted to thanks you for this tutorial, I can see that you put a lot of efforts in it and the quality of the vidéo reflects it. Just amazing stuff, it is exactly what I was searching for, thanks !
    Good continuation :)

  • @codewithhazem
    @codewithhazem ปีที่แล้ว

    thanks very much! ❤❤👌👌

  • @Deepsouthbro
    @Deepsouthbro 3 ปีที่แล้ว +1

    Good stuff! A tutorial on how to build this website would be fantastic!!

  • @miscany
    @miscany 2 ปีที่แล้ว +1

    I'm confused. In the page *pages/products/[id].js* , where are the props coming from? You come to this page when you click on a product, which links you to the dynamic page. But I can't figure out where the props are coming from lol.

  • @vanilla5507
    @vanilla5507 3 ปีที่แล้ว

    Cool video, will definitely try this later today!

  • @AVAGASAFARI
    @AVAGASAFARI 2 ปีที่แล้ว +2

    I think it's worth mentioning that in order to do anything commercial on Vercel, one needs to be on the $20 USD per month plan at minimum. Netlify doesn't require a paid plan to do this at the time of this comment so for some, it might make more sense to follow this tutorial, but deploy to Netlify instead.

  • @arupde6320
    @arupde6320 3 ปีที่แล้ว +1

    keep on uploading .. good job ..

  • @lorianrollian8003
    @lorianrollian8003 3 ปีที่แล้ว

    What happened to React courses that you were offering? Links seem dead from github repo, thanks!

  • @clipartinc
    @clipartinc 2 ปีที่แล้ว

    Great video and love how you show the code. Great job!
    I'm still having issues with a "Request failed with status code 500" when clicking checkout, but I'll figure it out.

    • @RaefetOuafiqo
      @RaefetOuafiqo ปีที่แล้ว

      i saw u in the stripe devs channel, how things are working out with u?

    • @clipartinc
      @clipartinc ปีที่แล้ว

      @@RaefetOuafiqo Hi, working out great :)

    • @RaefetOuafiqo
      @RaefetOuafiqo ปีที่แล้ว

      @@clipartinc did you needed any serverside (like nodejs ) or nextjs was enough

  • @paul1995131
    @paul1995131 3 ปีที่แล้ว

    Cool video :) My question is, does the private key gets also exposed to the web?

    • @NaiReEimaiKyprios
      @NaiReEimaiKyprios 2 ปีที่แล้ว +2

      In next.js, env variables that start with NEXT_PUBLIC will be included in the frontend bundle and therefore exposed. Other env variables that don’t, will not be exposed. Also, code in the directory /pages/api.. are server side endpoints and therefore not exposed to the client. Hope I helped!

  • @sethm7761
    @sethm7761 2 ปีที่แล้ว

    question -- for the success_url, does CHECKOUT_SESSION_ID also need string interpolation or no?

  • @clipartinc
    @clipartinc 2 ปีที่แล้ว

    16:10 for the fetcher I'm getting Module not found. What module did you install for the fetcher?

    • @clipartinc
      @clipartinc 2 ปีที่แล้ว +1

      I keep getting -> session is not defined ... as a webhook error.

  • @ahmaat19
    @ahmaat19 2 ปีที่แล้ว

    Thank you

  • @AlterClass
    @AlterClass  3 ปีที่แล้ว +1

    ⚛️ Check out my React JS course here 👉 www.alterclass.io/courses/react

  • @php6515
    @php6515 2 ปีที่แล้ว +1

    Does not works with Amex Cards ?

    • @frostytf2
      @frostytf2 2 ปีที่แล้ว

      It works with all cards Stripe supports. Amex is included

    • @php6515
      @php6515 2 ปีที่แล้ว

      @@frostytf2 Amex is debrecated now, SRC integration is available now

    • @frostytf2
      @frostytf2 2 ปีที่แล้ว

      Sad

    • @php6515
      @php6515 2 ปีที่แล้ว

      So How i can implement Src?

  • @realtorBG
    @realtorBG 2 ปีที่แล้ว

    awesome...if you have time lets do it from scratch please with Tailwind :)

  • @domy667
    @domy667 2 ปีที่แล้ว

    great

  • @growingisgood
    @growingisgood 10 หลายเดือนก่อน

    Your code is wrong. the [id].js route isn't doing anything

  • @clipartinc
    @clipartinc 2 ปีที่แล้ว

    I am getting a 401 error on the promise return when clicking redirectToCheckout. The session.url from accessing /api/checkout_sessions is correct and works, but the url redirectToCheckout sends to is not, it ends in init, which fails.
    The error seems to be from Invalid API Key provided: undefined".
    Where does this API Key need defined? I have the public key for client side and private key for server side just as the videos show. Hmmmmm
    Any ideas what's going wrong?

    • @clipartinc
      @clipartinc 2 ปีที่แล้ว

      I solved the issue by adding the code below in to the next.config.js file...
      env: {
      stripe_public_key_test: process.env.stripe_public_key_test,
      stripe_secret_key_test: process.env.stripe_secret_key_test,
      stripe_webhook_endpoint_secret: process.env.STRIPE_WEBHOOK_ENDPOINT_SECRET,
      },
      You have to tell Next.js this or else it doesn't see them I guess :\

    • @immortalshadow4244
      @immortalshadow4244 ปีที่แล้ว

      same problem