Stripe Payment Integration - React and Node.js E-Commerce

Поделиться
HTML-код
  • Опубликовано: 12 июл 2024
  • In this video I will show you how to integrate stripe payment system using React and Node.js in a step by step manner. Enjoy!
    Starter Files and Source Codes: chaoocharles.dev/source-codes...
    Stripe Checkout Documentation: stripe.com/docs/payments/acce...
    Complete Shopping Cart with Auth: • Complete Shopping Cart...
    ✨ Join My Discord Server
    / discord
    Donate 🤑
    📍Donate with PayPal: www.paypal.com/cgi-bin/webscr...
    Sections:
    00:00 - app demo
    06:08 - starter files
    09:32 - stripe docs
    12:14 - Node.js stripe api endpoint
    20:39 - React Pay Button
    36:08 - Charging the Cart Items
    41:47 - Collecting Shipping Information
    SUPPORT MY CHANNEL
    📍SUBSCRIBE: / @chaoocharles
    📍Become a Channel Member: / @chaoocharles
    📍Join My Fun Channel: / @chaaoo
    GET IN TOUCH:
    📍 Twitter: / chaoocharles
    Disclaimer: This video is not sponsored
  • НаукаНаука

Комментарии • 97

  • @ChaooCharles
    @ChaooCharles  2 года назад +5

    There are some issues with including the cartItems at the metadata. For now I recommend that you pass an empty array as cartItems. I am also preparing an admin dashboard video, I will make sure to also update you on everything concerning the cartItems, so that we can include them when creating an order. For now follow everything as it is but let cartItems be just an empty array.

  • @Dhanushsaji
    @Dhanushsaji Год назад +6

    I searched youtube for hours for a beginner-friendly stripe integration.. This is what I wanted. Thank you...
    You earned a subscriber...🥂🥂❤❤

  • @Manuevaral
    @Manuevaral 9 месяцев назад +1

    Wowwwww!!! i have been finding this video for stripe from long time ago and finally i got it. love you man appreatiate a lot.

  • @hesbonobare2184
    @hesbonobare2184 10 месяцев назад +2

    This might be the best Kenyan coding channel that I have come across . Thumbs up 👍

  • @UddhikaIshara
    @UddhikaIshara 9 месяцев назад

    Thank you very much for this! Appreciate your effort and this tutorial is amazing and very easy to understand! ❤

  • @njeririziki8949
    @njeririziki8949 2 года назад +1

    Finally 😃 I have been waiting for this!

  • @ririyan5960
    @ririyan5960 Год назад +1

    Hi Chaoo Charles, thank you for your tutorial, your explanation is really good

  • @mustafabursal6101
    @mustafabursal6101 Год назад

    just enough details, not more not less.. subscribed bro!

  • @legendaizy482
    @legendaizy482 Год назад +1

    Thank you very very much it’s a full and enough stripe tutorial very handy

  • @chrisqiuu
    @chrisqiuu Год назад +3

    thanks man, THIS is the PERFECT tutorial for stripe checkout and the BEST I have watched so far. You saved my project. I was using sandbox paypal integration but they have lots of errors. And then I saw this tutorial, it saved my project. Thank you so much. You just earned another subscriber!

  • @wanfer09lan42
    @wanfer09lan42 Год назад

    Sos el mejor Chao Saludos desde argentina !

  • @darx9050
    @darx9050 2 года назад

    This is gold, thanks 👍

  • @MatthewLong-ot3hh
    @MatthewLong-ot3hh 9 месяцев назад

    Awesome tutorial! Thanks

  • @azaanibrahimmohamed2846
    @azaanibrahimmohamed2846 5 месяцев назад

    Thank you very much for helping me with my e-commerce project

  • @jirikolb7154
    @jirikolb7154 Год назад

    Thanks a lot for this tutorial!

  • @hesbonobare2184
    @hesbonobare2184 10 месяцев назад

    Good tutorial 👍,KE all the way 🎉

  • @mahmodsamir5110
    @mahmodsamir5110 3 месяца назад

    i cant really appreciate you, you did a great job thank you

  • @abrehamtilahun4820
    @abrehamtilahun4820 4 месяца назад +1

    Thanks a lot Chaoo charles from your African brother, keep it up

  • @alejandroperalta4294
    @alejandroperalta4294 11 месяцев назад

    Dude you are awesome!

  • @alexanderpayes2781
    @alexanderpayes2781 Год назад +1

    You're the best 👌👌

  • @patil-manish
    @patil-manish Год назад

    Great 😊 Bro!! Keep it up 🙂

  • @lolashepota4050
    @lolashepota4050 2 года назад

    Thank you so much! Well done!!!

  • @vinayprince6267
    @vinayprince6267 2 года назад

    Awesome job explaining is good 👍

  • @nwobodofelix4859
    @nwobodofelix4859 2 года назад +1

    Such a great job you did here..how about other payment gateway since I am unable to use stripe at the moment in Nigeria and secondly how can I arrange my products in categories and display them on their individual components... Thank you once more and God bless you

  • @MicahFishel
    @MicahFishel Год назад

    Everything made perfect sense! Do you know how I should upload my project to cPanel? Having a NodeJS Backend and a react frontend makes it kinda hard. Any help is appreciated thx!

  • @umairahmed2657
    @umairahmed2657 Месяц назад

    great work

  • @DanPeal1
    @DanPeal1 9 месяцев назад

    very good!

  • @fionagonza8829
    @fionagonza8829 11 месяцев назад

    Thank you sir

  • @tmomar6910
    @tmomar6910 2 года назад

    Great works

  • @KristijanStosic
    @KristijanStosic 2 года назад

    Thank you so much, this helped only !

    • @ChaooCharles
      @ChaooCharles  2 года назад

      You're welcome 😊

    • @KristijanStosic
      @KristijanStosic 2 года назад

      @@ChaooCharles Can i contact you privately i need some help with stripe and orders

    • @ChaooCharles
      @ChaooCharles  2 года назад

      @@KristijanStosic a bit busy at the moment, but I'm on twitter @chaoocharles

  • @kartikbh3096
    @kartikbh3096 Год назад

    Thank you

  • @vunguyenphuong1900
    @vunguyenphuong1900 2 месяца назад

    tks so much

  • @user-vy8pm9mn3q
    @user-vy8pm9mn3q 8 месяцев назад

    Thanks

  • @kamichikora6035
    @kamichikora6035 Год назад

    Good stuff

  • @Abram-gb3ij
    @Abram-gb3ij 7 месяцев назад

    a question in the slices/api file that you have put and what it is for?

  • @omargbreil-re5nn
    @omargbreil-re5nn 3 месяца назад

    thanks

  • @onigbindedavid6630
    @onigbindedavid6630 12 дней назад

    Lots of love ❤️ from Nigeria 🇳🇬 @charles 🇰🇪

    • @ChaooCharles
      @ChaooCharles  12 дней назад

      @@onigbindedavid6630 ❤️❤️

    • @onigbindedavid6630
      @onigbindedavid6630 12 дней назад

      @ChaooCharles please I have a question on this, how can we send the receipt of order created to the customer ??? Immediately the payment is successful or failed

    • @onigbindedavid6630
      @onigbindedavid6630 12 дней назад

      Via email

  • @usamaUzair343
    @usamaUzair343 15 дней назад

    Awesome tutorial, I am having an issue, Once I go to checkout and back without paying its not showing any transactions with incomplete? is that a new feature? or any error
    Only showing the succeededs

  • @twentyfourseven853
    @twentyfourseven853 Год назад

    Subscribed

  • @shakilahmed6870
    @shakilahmed6870 Год назад +18

    My right ear is felling so alone

    • @SanjuKumar-hk8yy
      @SanjuKumar-hk8yy Год назад +1

      I was thinking my right earbuds has been spoil but not.🤣🤣🤣

    • @kalahari8295
      @kalahari8295 Год назад

      I had to see for my self. Damnn 😭

    • @LordR123
      @LordR123 Год назад

      hahahahahaahahh

  • @rahulpatil4144
    @rahulpatil4144 Год назад

    hey bro please help me .. when we click on checkout automatic total is coming.. but I want to add extra 3.70$ in subtotal how can I add that. 3.70 is a service charge

  • @fariedomar401
    @fariedomar401 Год назад

    Hey man, there is a problem when I save order into DB while I use mongoDB product to make order,
    when I make order it dose not store the image and id of the product into mongoDB,
    could you please help me

  • @arghaghosh5561
    @arghaghosh5561 3 месяца назад

    Sir I am using real cards in test more . What error message should it show.

  • @mustalichunawala6156
    @mustalichunawala6156 Год назад

    I also want the order details to be stored in mongodb after payment is completed successfully how do i do that?

  • @gagan3786
    @gagan3786 Год назад

    super super

  • @_Dipanshukhetawat
    @_Dipanshukhetawat Год назад

    How to apply api call on add to cart button ?
    Please make video

  • @jirikolb7154
    @jirikolb7154 Год назад

    I got this problem could someone help me please?
    Uncaught TypeError: Cannot read properties of undefined (reading '_id')

  • @sinistersinister4325
    @sinistersinister4325 9 месяцев назад

    stripe checkout form not showing should i install to react ‘stripe.js’

  • @user-yv4rk6it4m
    @user-yv4rk6it4m Год назад +1

    Brother, I am using the same project, but for some reason the images are not showing up on the stripe payment screen, I tried to log the images content, but i was getting 'undefined'. Please look into this request. Thank you

    • @AAOhranger
      @AAOhranger 4 месяца назад

      Did you ever find a solution?

  • @shakirkamal4958
    @shakirkamal4958 2 месяца назад

    Hi My images are not showing in the checkoutpage

  • @aponsaha5957
    @aponsaha5957 2 года назад

    metadata string length for customer is 500 at max.
    what is best way to keep cart data other than metadata when cart items are larger than expected ?

    • @ChaooCharles
      @ChaooCharles  2 года назад +1

      For now pass an empty array, I found out that we can get the cartItems from line Items. I'm preparing another video where I will update everything to avoid these errors. But meanwhile you can check this article stripe.com/docs/api/checkout/sessions/line_items

    • @aponsaha5957
      @aponsaha5957 2 года назад

      @@ChaooCharles Thanks man, appreciate it. Looking forward to your next video.

    • @ChaooCharles
      @ChaooCharles  2 года назад

      @@aponsaha5957 okay, but might take a while coz I'm also covering the admin dashboard

  • @Oluwadedemilade.
    @Oluwadedemilade. 2 года назад +1

    I have watched and implemented basically all your build
    Is it possible i have your contact details in other to reach out when i have a problem with my personal build..this will mean alot🙏

  • @AbdulQayyum-qe4qz
    @AbdulQayyum-qe4qz Год назад

    HI its happy to learn from this vedio butt there is one big issue for me . after the session has been created and it redirect the user to payment page and at the same time i want to save oorder in mongo db after paymentt successful ,now suppose our session in created and order is daved in db and user in redirected to session url and if user click on back buttom our payment is cancled and user is redirected automatically to cabcel page and notice one thing our oder is saved in db and payment is not completed yet ,i just want to create order after payment successfull

    • @ChaooCharles
      @ChaooCharles  Год назад

      Try stripe webhooks, try next part of this video

    • @AbdulQayyum-qe4qz
      @AbdulQayyum-qe4qz Год назад

      @@ChaooCharles oky start it now

    • @ChaooCharles
      @ChaooCharles  Год назад

      ruclips.net/video/_TVrn-pyTo8/видео.html check that link,

    • @AbdulQayyum-qe4qz
      @AbdulQayyum-qe4qz Год назад

      I see this vedio butt how /webhook api is called after session payment completed ?

    • @ChaooCharles
      @ChaooCharles  Год назад

      @@AbdulQayyum-qe4qz webhook listens to stripe events, you can make it listen to a successful payment and then create order after that

  • @_Dipanshukhetawat
    @_Dipanshukhetawat Год назад

    Client url ?

  • @ilhomyuldoshev5033
    @ilhomyuldoshev5033 Месяц назад

    Bro, there's something wrong with the sound in the video, I can't hear any sound from the right side of the headset.

  • @bytewavenetworks
    @bytewavenetworks Год назад

    do mpesa intergration pls

  • @jarvisai6917
    @jarvisai6917 Год назад

    Can you share your vscode theme?

  • @mdazimbabu5001
    @mdazimbabu5001 Год назад

    How I can retrieve the data after payment

    • @ChaooCharles
      @ChaooCharles  Год назад

      Check next video, you can use webhooks

  • @syydsalman
    @syydsalman Год назад

    thanks my nigga, I appreciate your work

  • @rohithn-76
    @rohithn-76 3 месяца назад

    No github code

  • @tonyvito5062
    @tonyvito5062 Год назад

    I thought my headphones aren't working after checking out I found out that you has a problem in the sound , man fix your audio I almost messed my headphones cuz of this video

  • @Rud331
    @Rud331 Год назад

    is the payment real or dummy

  • @Kenz-zs8in
    @Kenz-zs8in 5 месяцев назад

    Confused... How many people have been successful by following this video? even the source code has much more than that to make this work...😕

  • @arsalanawan7516
    @arsalanawan7516 Год назад

    you provide code of something else

  • @Sky-yy
    @Sky-yy 2 года назад

    There's no voice

    • @ChaooCharles
      @ChaooCharles  2 года назад

      Voice is there. Check your settings!

  • @dharmeshgohil9375
    @dharmeshgohil9375 2 года назад +1

    Expecting login using instragram ,facebook and gmail tutorial