PayPal Integration with ReactJS - React Tutorial

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

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

  • @pjguitar15
    @pjguitar15 3 ปีที่แล้ว +10

    I was given a take home project by my employer to build an ecommerce website that will integrate Paypal as payment. I searched it on TH-cam and Pedro came up. Wow. You definitely got all I need man.

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

      Hahaha thank you! Glad I was able to help!

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

    Cara, vc solta conteúdo que nem curso pago tem! Seu canal está me ajudando muito muito obrigado

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

      Kkkkkk muito obrigado mano! Fico feliz! Estou preparando um curso pago em react pro futuro, mas meu foco é no conteúdo gratis no youtube mesmo!

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

      @@PedroTechnologies Compro fácil

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

    A fellow Canadian developer! Amazing work man!

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

    Fantastic. You made it very easy to implement. Thannks

  • @jonathanoakes5995
    @jonathanoakes5995 4 ปีที่แล้ว

    Thank you so much Pedro that worked like a charm! Fantastic video! :)

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

    I need to implement the PayPal API. I google that shit. And what do I see? My boy Pedro got me covered

  • @RahulSharma-ox6se
    @RahulSharma-ox6se 3 ปีที่แล้ว +1

    I love it, man. Thanks for the video!

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

    heh bro you got your word to say in the web dev world. Whenever I'm stuck pedroTech got a solution for me. I'm still at the beginning of my journey but I believe I will make it. Thanks, Man and keep up the good work.

  • @beomsooshin5633
    @beomsooshin5633 4 ปีที่แล้ว +1

    Thank you PedroTech. It's awesome video to me!!

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

    Thanks, Pedro!! Awersome tutorial!

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

    Thank you for this video, I just subscribed!

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

      Thank you for subscribing! Glad you liked the video!

  • @kcheer18
    @kcheer18 4 ปีที่แล้ว

    Great video. Definitely going to try this today.

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

    thanks! at last, I could integrate PayPal into my website

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

    Muito bom Pedro. Excelente conteudo, parabens pelo trabalho

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

      Solta um video sobre Stripe tambem brother ;)

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

      Obrigado, penso em fazer um sobre stripe! Vou adicionar na lista!

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

    thank you, really good work, I really appreciate

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

    Thank you so much. I tried to do it, but I get the bug. The paypal button show twice when I put it to my project. Can you help me to fix it???
    Thanks

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

    Thank you for the explanation!

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

    Thanks you so much, greetings from ecuador.

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

    Sensacional!! Muito obrigado por compartilhar, me ajudou muuuuito!

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

    thanks bro, It was really helpful.

  • @kevorkyerevanian
    @kevorkyerevanian 7 หลายเดือนก่อน

    Thank you. Very clear!

  • @8fed
    @8fed 4 ปีที่แล้ว +2

    Looked like the pyramid of doom to me at first

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

    you're the man👍

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

    Nice explanation tq so much!!

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

    its a great video but it got error it shows "Indicate whether a cookie is intended to be set in a cross-site context by specifying its SameSite attribute"......can anyone tell how to fix it

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

    This is super great, thank you

  • @yazidthedev4281
    @yazidthedev4281 11 หลายเดือนก่อน

    Hello it works very well , the problem i have 2 buttons.

  • @mixedideas3351
    @mixedideas3351 4 ปีที่แล้ว +1

    This is so fantastic , thanks man ,,,,,,,
    can you create another video showing How To Integrate Payfast in ReactJS.

    • @PedroTechnologies
      @PedroTechnologies  4 ปีที่แล้ว +1

      Your welcome! I can definitely check it out and see if I can make a video about it!

    • @mixedideas3351
      @mixedideas3351 4 ปีที่แล้ว

      @@PedroTechnologies thanks in advance Pedro

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

    Nice short video explaining the basic implementation. Any chance you know how to render only the basic paypal button and not the pay later or credit/debit buttons?

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

      Thank you! If I recall you can just set their display to none using css.

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

      @@PedroTechnologies .paypal-button-row.paypal-button-number-1 {
      display: none;
      }

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

    Great! Thanks!!

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

    Super Easy ! :) Thank You ! :)

  • @gursahbwebcyst6030
    @gursahbwebcyst6030 10 หลายเดือนก่อน +1

    You put your client ID in index.html. Is it safe? Anyone can get your client ID by inspecting the code.

  • @namjotsingh
    @namjotsingh 2 หลายเดือนก่อน

    Thank you so much bro.

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

    This was really useful!

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

      Thank you! This is how you do it with real paypal accounts hahaha If I were to actually use my account and make it actually work it would take me some time because I would have to get permission.

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

    it works!!! thats good!

  • @Shellflower1234
    @Shellflower1234 4 ปีที่แล้ว

    I love your videos! You should do a basics how to code

    • @PedroTechnologies
      @PedroTechnologies  4 ปีที่แล้ว

      Thank You! I am thinking of doing a few different series, this could be one.

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

    rifado amigo que buen tutorial

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

    Great video! thanks

  • @fungitao
    @fungitao 5 หลายเดือนก่อน

    Since there's no server-side validation in this tutorial, can't the client just change the value they want to pay?

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

    great video! However, the balance is not updating on my end for some reason on the buyer side. I logged in from the merchant and it's updated there but on the buyer side, it's not being deducted but can see the transaction being done :3 if anyone can shed some light on as to why this may be happening would really appreciate it.

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

    Great video, can you also create a video for apypal subscription with 7 days trail...?

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

    I dont have any index.html file

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

    Good Job, lad!

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

    I really appreciate you sir

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

    thanks for awesome info

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

    Tx for your videos.
    I open your git project, I install (npm install) I run the view but after I click on "checkout" button I receive this error:
    TypeError: Cannot read property 'Buttons' of undefined
    (anonymous function)
    src/components/PayPal.js:7
    4 | const paypal = useRef();
    5 |
    6 | useEffect(() => {
    > 7 | window.paypal
    | ^ 8 | .Buttons({
    9 | createOrder: (data, actions, err) => {
    10 | return actions.order.create({
    Then I install (npm install @paypal/react-paypal-js) but the problem still there, you know what's the prob?

    • @Valentina-km7qu
      @Valentina-km7qu 2 ปีที่แล้ว

      I have the same problem, were you able to solve it?

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

    Thank you for your sharing. may I know vs theme u used in this video?

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

    Hi! Great tutorial. Just one question: How can you show the description property inside the modal, so the user knows not only the money it's gonna cost, but also information about items to be purchased. Do you know is it possible to show? I only could see the description information in the async promise...
    Again, tank you Pedro!

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

    Hello bro, it is a nice a video and I u are very good teacher.
    But i wanna ask u question:
    if i have 2 subscription on my site (persnal, and multi)
    - Personal: work for one month
    - Multi: work for one year
    -----------------------------------------------------------------------------------------------
    and i have the database on firebase, all my users infromation + subscription information, so i wanna save the information of payment in firebase,
    how can i connect the payment when done to firebase, then after one month trun off the subscription (or after one year).

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

    Can you make a video on to switch this from sandbox to live so people can send real money

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

    For some reason, if I put the currency in the script tag, it won't work. Everything else is great.

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

    Hey Awesome Video! Just Subscribed! Also, could you please tell how to redirect the user to some success route on successful transaction??

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

      Thank you! Just posted a video on redirecting: th-cam.com/video/tiAlSpyWIDs/w-d-xo.html

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

      @@PedroTechnologies BROOO You are amazing!!

  • @kcheer18
    @kcheer18 4 ปีที่แล้ว +1

    Great Video! Can you cover testing this Paypal API with Cypress?

    • @PedroTechnologies
      @PedroTechnologies  4 ปีที่แล้ว

      I don't have much experience testing with Cypress, but it is definitely something I can learn!

    • @kcheer18
      @kcheer18 4 ปีที่แล้ว

      @@PedroTechnologies I'm just learning too. It's pretty awesome. This video saved me so much time by the way THANK YOU!

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

    amazing video bro

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

    Capo!! Muchas gracias!!!

  • @aurelianspodarec2629
    @aurelianspodarec2629 4 ปีที่แล้ว

    Do a Stripe credit card tutorial as well please :D
    I'm using WooCommerce for the back-end, so I guess iwll need to do an extra step but hopefully will manage to figure out how to go about doing this.

    • @PedroTechnologies
      @PedroTechnologies  4 ปีที่แล้ว +1

      I can make a video about it! Stripe has a very good API so I can definitely explain it!

  • @christianirwandi4449
    @christianirwandi4449 4 ปีที่แล้ว +1

    Cool man!

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

    I'm getting an error. The transaction is successful & the seller receives the money. But there is no deduction of money in the buyer's account. I have captured the actions.order but still no changes in buyer's money. Any suggestion is appreciated.

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

    excellent video

  • @wellzbrown2758
    @wellzbrown2758 4 ปีที่แล้ว

    Perfect video. What is the production version of that script tag in index.html?

    • @PedroTechnologies
      @PedroTechnologies  4 ปีที่แล้ว

      For production you would have to create an Application with paypal, and test some transactions through their api. Then finally you would need to submit ur application to review.

  • @GauravSingh-ln1zj
    @GauravSingh-ln1zj 3 ปีที่แล้ว

    Sir I have written same code & it's working but the mode of payment is only by debit card or credit card not paypal balance,, what to do ??

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

    So with this simple tutorial I can get real payments from customers?

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

    Thanks bro.

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

    How do i get the user id of the payee upon redirecting to success page? I’m planning to create an admin dashboard where i can keep track of them

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

    How do we secure the client ID, I can see PayPal saying can’t see a secure payment process

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

    But does the amount being sent to the business account? Or your original account?

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

    thank you!

  • @srijanrai770
    @srijanrai770 3 หลายเดือนก่อน

    How to check whom to pay.

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

    Thanks for the tutorial. It's was helpful !
    But how to you send data to your PayPal Button Component ? Just to not put a fixed price, or a fixed description ?

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

      I think that probably you can use document.getElementById method

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

      use a valiable name inside curly brackets instead of a string

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

    hey, great video thank you, one question, i need to add multiple buttons in my web, how can i do that?

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

    thanks for this, great stuff - could you do one with apple pay through stripe please (react/gatsby)

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

      I never used apple pay, but I love the Stripe API so I can make a video about it!

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

      @@PedroTechnologies me neither tbh, was hoping I’d learn from you :)

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

      In my startup we will eventually implement such integrations and I will end up learning. I will post a video about it!

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

      @@PedroTechnologies look forward to it bro :)

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

    Sir how can we do paypal onboarding process in mern?

  • @kamalsaxena1384
    @kamalsaxena1384 4 ปีที่แล้ว

    Sir,❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️ plz make express.js complete advanced tutorials. There is no at TH-cam. Plz tutorials.

    • @PedroTechnologies
      @PedroTechnologies  4 ปีที่แล้ว +1

      You mean like a series building an advanced Node/Express project?

    • @kamalsaxena1384
      @kamalsaxena1384 4 ปีที่แล้ว +1

      Yes, in series first tuotorials and then project

    • @PedroTechnologies
      @PedroTechnologies  4 ปีที่แล้ว +1

      Interesting! I am thinking of maybe making a series explaining more complex topics behind a Node/Express application. For example, how to implement design patterns / architectures like MVC and SOLID. Or making videos about how to do specific things with express, like uploading images / files, handling errors correctly, authenticating with JWT's. What do you think?

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

    Can anyone tell me how can I just get rid of the Pay with credit card button or if not how to just add information from database to card popup oninit.

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

    Can you make apple pay integration with stripe? checkout

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

      Hey, I can make one! I love the stripe api!

  • @arqamshakeel4536
    @arqamshakeel4536 4 ปีที่แล้ว +1

    can anyone tell me what would i exactly need to change if im going for real paypal account. What changes do i need to make if i have already implemented the code in the video.

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

      The Paypal documentation has a simple explanation on the transition between development and production. The code would be basically the same, but you would have to work around security and link some information. You should checkout the official paypal doc with react

  • @nicolasbarcelo4258
    @nicolasbarcelo4258 4 ปีที่แล้ว +1

    Wow Pedro is there anything you dont know how to do??? Hahaha can you make a video explaining how do you learn this stuff??

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

      Hahahaha Thank you bro! Everything I learned has been by wanting to make something and searching how to do it. In this case, I wanted to integrate both stripe and paypal for a project and I researched how to do it! I can definitely make a video on how to always find new things to learn!

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

      @@PedroTechnologies is Really awesome. I will wait for that video "How to always find new things to learn !"

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

    Now how do I make it give me a dm on discord or my email the name and email and the products they have paid for?