PayPal Integration with ReactJS - React Tutorial

Поділитися
Вставка
  • Опубліковано 9 січ 2025

КОМЕНТАРІ • 130

  • @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 UA-cam and Pedro came up. Wow. You definitely got all I need man.

  • @networkserpent5155
    @networkserpent5155 2 роки тому +1

    A fellow Canadian developer! Amazing work man!

  • @jakakrajnc7538
    @jakakrajnc7538 3 роки тому

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

  • @jonathanoakes5995
    @jonathanoakes5995 4 роки тому

    Thank you so much Pedro that worked like a charm! Fantastic 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.

  • @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

  • @RahulSharma-ox6se
    @RahulSharma-ox6se 4 роки тому +1

    I love it, man. Thanks for the video!

  • @hoahuynh4919
    @hoahuynh4919 2 роки тому +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

  • @patitorodri
    @patitorodri 2 роки тому

    Thanks, Pedro!! Awersome tutorial!

  • @beomsooshin5633
    @beomsooshin5633 4 роки тому +1

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

  • @tiga2456
    @tiga2456 3 роки тому +1

    Fantastic. You made it very easy to implement. Thannks

  • @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

  • @dave6012
    @dave6012 4 роки тому +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  4 роки тому

      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;
      }

  • @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?

  • @gursahbwebcyst6030
    @gursahbwebcyst6030 Рік тому +2

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

  • @kcheer18
    @kcheer18 4 роки тому

    Great video. Definitely going to try this today.

  • @osoriodanny
    @osoriodanny 4 роки тому +1

    Thank you for this video, I just subscribed!

  • @ngocduy2179
    @ngocduy2179 Рік тому

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

  • @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.

  • @zedshockblade7157
    @zedshockblade7157 4 роки тому

    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

  • @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!

  • @fungitao
    @fungitao 8 місяців тому

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

  • @Juanlopezalurralde
    @Juanlopezalurralde 4 роки тому

    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!

  • @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.

  • @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 ??

  • @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

  • @WinterSistaCh
    @WinterSistaCh Рік тому

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

  • @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: ua-cam.com/video/tiAlSpyWIDs/v-deo.html

    • @anhxel
      @anhxel 3 роки тому

      @@PedroTechnologies BROOO You are amazing!!

  • @pedrosabia6069
    @pedrosabia6069 4 роки тому +1

    Thank you for the explanation!

  • @saiswaroopbedamatta7747
    @saiswaroopbedamatta7747 3 роки тому

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

  • @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.

  • @danielrichards552
    @danielrichards552 Рік тому

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

  • @lislouise2305
    @lislouise2305 3 роки тому +1

    I dont have any index.html file

  • @Finance-In-FocusX
    @Finance-In-FocusX 3 роки тому +1

    thank you, really good work, I really appreciate

  • @8fed
    @8fed 4 роки тому +2

    Looked like the pyramid of doom to me at first

  • @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

  • @rutvikjr8251
    @rutvikjr8251 2 роки тому

    thanks bro, It was really helpful.

  • @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.

  • @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

  • @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.

  • @mishadaro9759
    @mishadaro9759 3 роки тому

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

  • @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).

  • @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!

  • @akcoder974
    @akcoder974 3 роки тому +1

    Nice explanation tq so much!!

  • @nileshzemse
    @nileshzemse Рік тому

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

  • @Bloodyk91
    @Bloodyk91 3 роки тому

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

  • @waytopeace2703
    @waytopeace2703 Рік тому

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

  • @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.

  • @vanshikawaghela3391
    @vanshikawaghela3391 3 роки тому

    Sir how can we do paypal onboarding process in mern?

  • @pinpon163
    @pinpon163 2 роки тому

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

  • @naveensaini1618
    @naveensaini1618 4 роки тому +1

    Can you make apple pay integration with stripe? checkout

  • @temitopeoyewolefalua3128
    @temitopeoyewolefalua3128 3 роки тому

    This is super great, thank you

  • @luiszamoraveliz2862
    @luiszamoraveliz2862 3 роки тому

    Thanks you so much, greetings from ecuador.

  • @iagommendes
    @iagommendes 3 роки тому

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

  • @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!

  • @sup_nim
    @sup_nim 4 роки тому +1

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

    • @PedroTechnologies
      @PedroTechnologies  4 роки тому

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

    • @sup_nim
      @sup_nim 4 роки тому +1

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

    • @PedroTechnologies
      @PedroTechnologies  4 роки тому

      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 4 роки тому

      @@PedroTechnologies look forward to it bro :)

  • @shimesami
    @shimesami 4 роки тому +1

    Great video! thanks

  • @srijanrai770
    @srijanrai770 7 місяців тому

    How to check whom to pay.

  • @adrienbenaceur4805
    @adrienbenaceur4805 2 роки тому

    Super Easy ! :) Thank You ! :)

  • @kevo777ez
    @kevo777ez 11 місяців тому

    Thank you. Very clear!

  • @FadelCastro4281
    @FadelCastro4281 Рік тому

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

  • @nastynaa6180
    @nastynaa6180 4 роки тому +1

    Good Job, lad!

  • @WilCODE_
    @WilCODE_ 3 роки тому +1

    amazing video bro

  • @mohmadail6611
    @mohmadail6611 3 роки тому +1

    thanks for awesome info

  • @robertcampos7902
    @robertcampos7902 4 роки тому +1

    rifado amigo que buen tutorial

  • @migesualdo
    @migesualdo 3 роки тому

    Great! Thanks!!

  • @poorprogrammers
    @poorprogrammers 2 роки тому

    I really appreciate you sir

  • @abusayedrakib7019
    @abusayedrakib7019 4 роки тому +1

    excellent video

  • @6977202865
    @6977202865 3 роки тому

    it works!!! thats good!

  • @mutsamutepfa
    @mutsamutepfa 4 місяці тому

    you're the man👍

  • @namjotsingh
    @namjotsingh 5 місяців тому

    Thank you so much bro.

  • @kamalsaxena1384
    @kamalsaxena1384 4 роки тому

    Sir,❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️ plz make express.js complete advanced tutorials. There is no at UA-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?

  • @constWardtz
    @constWardtz 4 роки тому +1

    Thanks bro.

  • @christianirwandi4449
    @christianirwandi4449 4 роки тому +1

    Cool man!

  • @PurrfectlyChaotic
    @PurrfectlyChaotic 3 роки тому

    Capo!! Muchas gracias!!!

  • @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 !"

  • @ioannisme7495
    @ioannisme7495 Рік тому

    thank you!

  • @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?

  • @ValentinCorrea-o3b
    @ValentinCorrea-o3b 23 дні тому +1

    Thanks you!