PayPal Integration with ReactJS - React Tutorial

In this video, I show you guys how to integrate the PayPal online payment system into a react application. If you have any doubts, please leave a comment below.
Github Repo: github.com/mac...
Please leave a comment on what topic you guys want me to cover next!
SUBSCRIBE!
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Twitter: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/mac...
Email: [e-mail]

[@pjguitar15]

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

[@PedroTechnologies]

Hahaha thank you! Glad I was able to help!

[@henriquekutner6724]

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

[@PedroTechnologies]

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]

@@PedroTechnologies Compro fácil

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

[@networkserpent5155]

A fellow Canadian developer! Amazing work man!

[@hoahuynh4919]

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

[@jakakrajnc7538]

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

[@dave6012]

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]

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

[@benhammourachid8144]

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

[@tiga2456]

Fantastic. You made it very easy to implement. Thannks

[@morijin726]

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

[@jonathanoakes5995]

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

[@PedroTechnologies]

I am happy I could help!

[@mishadaro9759]

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

[@beomsooshin5633]

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

[@PedroTechnologies]

Glad I could Help!

[@gursahbwebcyst6030]

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

[@RahulSharma-ox6se]

I love it, man. Thanks for the video!

[@PedroTechnologies]

Thank u bro! I appreciate it!

[@patitorodri]

Thanks, Pedro!! Awersome tutorial!

[@mixedideas3351]

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

[@PedroTechnologies]

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

[@mixedideas3351]

@@PedroTechnologies thanks in advance Pedro

[@ngocduy2179]

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

[@anhxel]

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

[@PedroTechnologies]

Thank you! Just posted a video on redirecting: kzbin.info/www/bejne/qpqknYamrrx8etU

[@anhxel]

@@PedroTechnologies BROOO You are amazing!!

[@osoriodanny]

Thank you for this video, I just subscribed!

[@PedroTechnologies]

Thank you for subscribing! Glad you liked the video!

[@kevorkyerevanian]

Thank you. Very clear!

[@pedrosabia6069]

Thank you for the explanation!

[@PedroTechnologies]

Glad you liked it!

[@atlferreira]

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]

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

[@TheChickenExplorer]

thank you, really good work, I really appreciate

[@PedroTechnologies]

Glad you liked it!

[@luiszamoraveliz2862]

Thanks you so much, greetings from ecuador.

[@akiij]

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.

[@Juanlopezalurralde]

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!

[@kcheer18]

Great video. Definitely going to try this today.

[@fungitao]

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

[@lislouise2305]

I dont have any index.html file

[@akcoder974]

Nice explanation tq so much!!

[@PedroTechnologies]

Welcome 😊

[@karishma999000]

This was really useful!

[@PedroTechnologies]

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.

[@rutvikjr8251]

thanks bro, It was really helpful.

[@temitopeoyewolefalua3128]

This is super great, thank you

[@migesualdo]

Great! Thanks!!

[@WinterSistaCh]

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

[@hasanradi93]

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

[@mohmadail6611]

thanks for awesome info

[@PedroTechnologies]

No problem!

[@shimesami]

Great video! thanks

[@PedroTechnologies]

Glad you liked it!

[@yachujoshi]

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.

[@poorprogrammers]

I really appreciate you sir

[@kcheer18]

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

[@PedroTechnologies]

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

[@kcheer18]

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

[@namjotsingh]

Thank you so much bro.

[@zedshockblade7157]

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

[@yazidthedev4281]

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

[@nileshzemse]

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

[@GauravSingh-ln1zj]

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

[@kzar123]

Muito bom Pedro. Excelente conteudo, parabens pelo trabalho

[@kzar123]

Solta um video sobre Stripe tambem brother ;)

[@PedroTechnologies]

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

[@Shaadwz]

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]

I think that probably you can use document.getElementById method

[@cryptodoomer2855]

use a valiable name inside curly brackets instead of a string

[@danielrichards552]

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

[@wellzbrown2758]

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

[@PedroTechnologies]

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.

[@adrienbenaceur4805]

Super Easy ! :) Thank You ! :)

[@6977202865]

it works!!! thats good!

[@saiswaroopbedamatta7747]

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

[@saiswaroopbedamatta7747]

And how to add styling in paypalbtn?

[@mutsamutepfa]

you're the man👍

[@Bloodyk91]

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

[@Shellflower1234]

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

[@PedroTechnologies]

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

[@iagommendes]

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

[@aurelianspodarec2629]

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]

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

[@constWardtz]

Thanks bro.

[@PedroTechnologies]

Glas you liked it!

[@pinpon163]

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

[@8fed]

Looked like the pyramid of doom to me at first

[@waytopeace2703]

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

[@WilCODE_]

amazing video bro

[@PedroTechnologies]

Glad you liked it

[@sup_nim]

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

[@PedroTechnologies]

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

[@sup_nim]

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

[@PedroTechnologies]

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

[@sup_nim]

@@PedroTechnologies look forward to it bro :)

[@abusayedrakib7019]

excellent video

[@PedroTechnologies]

Thank you!

[@ioannisme7495]

thank you!

[@arqamshakeel4536]

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]

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

[@robertcampos7902]

rifado amigo que buen tutorial

[@PedroTechnologies]

Gracias

[@vanshikawaghela3391]

Sir how can we do paypal onboarding process in mern?

[@sanjeevgupta5189]

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.

[@PurrfectlyChaotic]

Capo!! Muchas gracias!!!

[@srijanrai770]

How to check whom to pay.

[@naveensaini1618]

Can you make apple pay integration with stripe? checkout

[@PedroTechnologies]

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

[@christianirwandi4449]

Cool man!

[@PedroTechnologies]

Thankss!

[@nastynaa6180]

Good Job, lad!

[@PedroTechnologies]

Thank you!

[@nicolasbarcelo4258]

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]

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]

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

[@kamalsaxena1384]

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

[@PedroTechnologies]

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

[@kamalsaxena1384]

Yes, in series first tuotorials and then project

[@PedroTechnologies]

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?

[@espero_dev]

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?