Integrate online payment with PayPal Checkout in ReactJS

PayPal is a widely known platform for transferring money between entities and for buying products and services online. PayPal Checkout is their API that offers e-commerces a mean to accept payments by letting customers settle their purchase securely and quickly with choosing the payment source of their choice. Customers can decide whether to use their PayPal account balance to pay up, or to select their credit card, bank account, or however they want.
This tutorial aims to provide an approach to integrate payments with PayPal in ReactJS. I will show you my preferred method of implementing PayPal Checkout.
Access the written version of this tutorial:
designcode.io/advanced-react-...
0:00 - Introduction
0:49 - PayPal Developer Account
2:14 - react-paypal-js
3:47 - PayPal Checkout Button
7:01 - PayPalScriptProvider
10:20 - PayPalButtons
11:27 - PayPalButtons
12:57 - Button Props
13:29 - createOrder
15:02 - onApprove
19:59 - onError
22:18 - onCancel
24:24 - onClick
26:18 - Testing
30:16 - Shortcomings
#reactjs #webdev #javascript

[@ssyedyaseens]

I was looking everywhere for this! Great work. Thanks a lot!

[@Kris-to7vh]

Incredible precise tutorial! Very helpful

[@AwesomelyAwesomeKidd]

Awesome tutorial, works first try just from going at the same pace as you, so intuitive and you speak well and explain each and every step beautifully. thanks!

[@carcass360]

Excelent, all I was searching for. Thank you.

[@ibadshaikh2215]

Great explanation. Really liked it!

[@eduardogarciaenriquez5802]

Really helpful, thanks!

[@Sillymonkeies]

This video was great! Thank you very much 🙏

[@almuhanadal-nihmy7452]

thanks for this tutorial. really helpful

[@user-lp5kz2mc5s]

the best paypal react video I never seen

[@sergiovelazquez958]

Excellent video. Absolutely helpfull!!

[@j.i.m6980]

Definitely worth it!!!

[@Valentin-jn3lk]

excellent tutorial. thanks!!!!

[@Richard.halabi]

Great content thanks.

[@dennisgonzales9521]

Very informative thanks

[@anshumansharma6650]

Thank you so much ma'am ❤️😘😍💐🙏🏻🙇🏻‍♂️

[@mohamedyoussef8835]

Awesome video +++++++++++ best explanation on KZbin 🙂🙂🙂

[@rajajaiswal3489]

Thanku so much mam,we love you❤❤

[@felixmilome]

Is there a way to use Node-js to verify an orderId gotten from the client side response? Im looking everywhere but i cant find

[@tausifkovadiya1810]

Perfect One.

[@abhinavgupta6714]

Amazing vid!!!

[@cyrileo]

Amazing 👏🏼 I'm no expert but glad to see this video helped! 🤗

[@mattnelson4387]

This is great but how do you make this live and not sandbox?

[@tejindersingh3314]

Good Job

[@allenschneider1847]

At the beginning of the video, after setting up the business account, how do you "switch to developer"?

[@anatoliy1435]

Am I obliged to use a business PP account? Or is it possible to use a personal account?

[@javascriptexpanse]

nice one, how do i go live using the same library

[@author_brandymarks]

What library? I've added the code to my website with the 'test' and the paypal buttons show up. Buy when I add my client ID, nothing. This is a most confusing process. If the process would be shown WITHOUT all the descriptions - just the step-by-step process to follow, maybe it would work. I spent an hour on the phone with a paypal help rep and both of us came away confused with nothing working on my website.

[@ftwo22]

Exist any way to trigger the checkout without the user clicking on the button? I want to trigger it with my own button and not affect my current UI

[@GutoCmtt]

I don't think so, at least that's not what they want. I took a glimpse at their design guidelines, and we should always have the paypal reference with their standard stuff. I guess anywhere you go and pay with paypal it stands out and is easy for the user to spot what it is. I was going to have 2 buttons, instead I just took the first button's functionality and added it to the onClick function (before resolve()) and ended up with only the paypal button. For functionality you could do the same, and regarding the UI you'd have to get one of the standard options they provide.

[@austingregg7353]

"Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component." The above error occurred in the component.... Any idea why I would be getting this error? Thanks

[@BrianHansen-so3cr]

if you have defined your App component as a class you need to set it as a state in componentDidMount instead.

[@leminhquang9836]

alert in the video have 2 times, what i can resolve this to have 1 times?

[@cyrileo]

🤔 That's a tricky question. For now, I'd suggest adding a conditional statement to check if the alert message is already being rendered.

[@GutoCmtt]

That's probably related to strict mode. I ended up removing react's strict mode, you end up having to write more and weird code to go pass that. At least I didn't find good ways for some of the problems I was having.

[@z4ckfytc777]

Thank you so much! It worked perfectly with React 18 (since react-paypal-button-v2 doesn't support it yet!)