PayPal Checkout 2.0 - Monetize React, Angular, & Vue Quickly

Learn how to use the new PayPal Checkout 💰 2.0 APIs to accept and capture payments entirely from your frontend code, including demos for React, Angular, and Vue fireship.io
- PayPal 2.0 developer.paypal.com/docs/api...
- Code github.com/fireship-io/193-pa...
#paypal #webdev #money
Take the Fireship quizzes 🤓
iOS itunes.apple.com/us/app/fires...
Android play.google.com/store/apps/de...
Upgrade to Fireship PRO at fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.

[@snwdn]

2:08 Angular 5:43 React 7:31 Vue

[@lifasibiya4810]

It's always a pleasure to hear from you Jeff. I come from a village in South Africa, you inspire me all the time.

[@codeaperture]

I'm Kenyan and I love SA 🔥

[@alinrosuaprins]

I love how you also included REACT in your courses.

[@nvictorme]

That’s why I’m a Pro member... You’re keeping me employed :v

[@Fireship]

That's my goal... help people build products and/or get jobs!

[@codeaperture]

😂😂😂💯

[@ggg-kr7my]

How can you always predict wich tutorial i need? 10 / 10

[@FilledStacks]

haha, I think it's a super power because he's doing it for me too :)

[@alperguven4829]

This happens to me with Traversy Media :D

[@p0w3rm0v3s]

Yes, this is uncanny.

[@schimefpv]

Haha same here! Cheers!

[@aurelianspodarec2629]

You choose what most people want, and do it.

[@DEV_XO]

Mate, I love your channel, like everyone who watch your videos. Sadly I'm a React dev, and besides I still enjoy all your content, watching some react examples, makes this even better for most of us. Hope you keep adding some react / vue examples from time to time, it was just amazing. Thanks you! :insert here emoji heart:

[@FilledStacks]

Jeff with the slam dunk video! This is literally Exactly what I needed to implement the next set of features in my Vue app 😊

[@tiptail]

Thank you so much for this! I was able to add a PayPal button to my Quasar (Vue) project. I adapted your example so that my application will not only take payments via PayPal, but also send an email to myself and the person filling out the form. It's a small application that lets people join a club. :) Just wanted to say thanks!

[@zyadyasser196]

Perfect, loved the easy demonstration.

[@gregfletcher2360]

Awesome! Btw this is the only channel I don't turn speed to 1.5x +

[@nahojazz]

Wow what a great tutorial nice and quick, React hooks. High quality work my friend.

[@dependersethi1345]

5/5 As always✨ Please create a series for handling payments in Flutter(in-app purchases) one time payment and subscription payments. Thank you so much! :)

[@Fireship]

In app purchases will happen soon... Already working on that one for Flutter :)

[@dependersethi1345]

@@Fireship Thank you so much! ♥️ Please consider the payment subscription model as well 🙏

[@ikezedev]

That was so easy...Jeff is at it again 😍

[@matheusinkreator]

Oh man! Thanks for this video... helped me so much.

[@theskysthelimit.]

thank you! great teaching!

[@3DPTR]

Excellent Tutorial! thanks !!

[@gabrielmcreynolds7947]

Fantastic tutorial! Just wondering how I can dynamically load the edit the where you set your client-id, because I need to dynamically set the merchant-id parameter, and I can't do that in index.html for Angular. Thanks!

[@AbhishekKumar-mq1tt]

Thank u for this awesome video

[@BrayanLoayza]

Thanks bro, works like a charm.

[@trevorsmith8950]

He doesn't say this explicitly, but make sure you import ViewChild and ElementRef into your Angular component (check out import statement at 3:00). Probably self-evident for some, but took me a bit to realize I had to import them. Thanks for the tutorial, was very helpful for me.

[@skipmonday6467]

Let the money flow

[@dealloc]

Just clear things up; You don't need to use imperative method to include script tags for React. You can simply include it like any other script in the HTML template, that also can be changed using create-react-app - Just make sure it is loaded _before_ React, so that you have access to the API globally through 'window'. Even better, if you don't want to use the imperative API from Paypal, you can wrap it with in a Context and use the 'useContext' (or a custom hook) to expose a nicer API to use within your components.

[@ultraimagehub]

Please! always with react! your solution is my first-to-go!

[@aissamouajib]

Awesome Video, we need things like this with flutter also please! Thank you.

[@Fireship]

Expect an Flutter in app purchases video in the near future :)

[@yogenp]

I implemented this in a PWA exactly a week ago. !

[@sirmooby]

Hi. can i use this for subscription payments

[@idtyu]

The stripe competitor from PayPal is not PayPal api, but Braintree. That one can take credit cards without going thru PayPal account, and the fees associated with it

[@ben34256]

For React couldn't you just place the script in public/index.html?

[@roulzhq]

Same thing for vue I think. The public folder was there, I would say it's the exact same as in Angular.

[@Zharkan16]

How does the user know how the product will be shipped? does the logistics look through the paypal account and see their addresses so they can ship out?

[@theblackharted]

Jeff is there an easy way to keep the PayPal overlay up from when the customer hits approve until capture is confirmed? In other words, until 'paidFor' is true? The buttons briefly show again after approve, before it flips to the confirmation text. I'd rather show the user that payment is processing.

[@guilhermebais]

nice!, and about inapp purchase of applestore and playstore? i think we cannot add paypal checkout on apps, because of their policy

[@games3976]

@Fireship 6:58 it didn't work in your React example not because of weird dependencies but because how Hooks work. Your state method setLoaded is a hook itself that produces a new state of loaded, which runs after the useEffect hook has finished. What you could've written instead would be following: script.addEventListener("load, handleLoaded); while having const handleLoaded = () => { window.paypal.Buttons(..).. }

[@danielsimionescu298]

How do your videos come exactly when I need them? Anyways, thanks 😆

[@ElStego]

Video Chapters would help everyone that only cares about one of those 3 frameworks :)

[@YinonOved]

while integrating bluesnap payment on a site I wondered why they are not using package modules and u clear it out for me, non the less I loaded the script dynamically upon navigation to the relevant feature module that uses the bluesnap service. is there a caveat why I should not do that? why would we want to load the script at the index.html level?

[@DexkillTutorials]

Awesome for In-Browser applications, not so good for electron, I did not found any method to open the Paypal popup to correctly finish the payment process and there seems to be not much information about this.. am I missing something?

[@imlautaro123]

Angular: 2:08 React: 5:45 Vue: 7:30

[@aguyoninternet9883]

Thank you very very much

[@will_abule]

I didn't know why angular lost its popularity it was so much easier I swear.

[@Fireship]

It's still very popular, just not on hype train. I agree, was the most intuitive framework for this video.

[@will_abule]

@@Fireship anyway I still die with it, best for enterprise web app to my opinion.

[@dealloc]

I believe it has to do with the amount of major changes that weren't backward compatible that caused the decline of adoption. While it is still used, I suspect most large projects haven't bothered to upgrade, because they don't have the resources to do so. React has been quite good at keeping the API stable and backwards compatible and provided tools to effectively and easily upgrade breaking changes, if any. Vue goes with the same philosophy, and now Angular is following suit with their newer versions. What is important to note is that Angular is a full-fledged framework with a lot of functionality built-in, whereas Vue and React are merely view libraries. Personally I like React because I don't need a framework to build my app (small and large)-I have found a nice sweet spot with the tools are provided by the community but also write myself.

[@will_abule]

@@dealloc Vue is a framework but pretty lightweight

[@madcroc111]

Mostly because Angular has lots and lots of boilerplate. I wonder why you think it's so much easier when usually it's regarded as the most complicated one. When you look at surveys there's a big part of Angular devs who want to get rid of it. React and Vue don't

[@mogipls]

This works perfectly well! However, what if I wanted a dynamic price, like it depends on the number of things they want to buy? Problem is that when I tried implementing this, the paypal button kept re-rendering, and it kept duplicating the paypal button :(

[@ivanabregu1]

The couch! lol

[@EmilianoC76]

Good tutorial but I would jump straight to the repo, the code there's better organized and polished.

[@massiveleg]

When I wrote the React project I don't see the Paypal button when I deployed

[@nicolatoledo]

i have the button in a lazy module the first time work but the second time no and return this error Error: Window closed does anyone have the same issue?

[@Jack74r]

I using Nuxt i have error with this example 500 (Internal Server Error) Error: Order could not be captured

[@blado9059]

I have a question. In my proyect I have differents modules so when I try to run the code in a different module it doesnt work but if I put the code in appModule works good. So how can I fix it?

[@ramonportales8368]

thats good, but if I click the option of "credit or debit card" there's a lot of field to fill, I dont need it how can I configure all those fields?

[@abeetbored]

any way to do it in a class based component? getting a " Cannot read property 'Buttons' of undefined " :( . Suspect that it has something to do with setState triggering a re-render.

[@MohamedAli-rb2sn]

Thanks :)

[@CodeWithNasir]

used couch, decent condition!

[@MikeNugget]

What about payment platforms for mobile development i.e. for Ionic, Flutter e.t.c.?

[@levizjaperdije8499]

does this need a backend configuration? or something else?

[@barbieroalex]

The api is super OP!, but the big problem with the api is the time needed to load it the api is horrible slow.

[@moonythm]

U can use a service worker to cache it

[@GK_Aptitude_Reasoning_Test]

How to dynamically set client I'd from a configuration file?

[@rheasamson3528]

Ohh!! That's great

[@roccodenicolo3921]

On which card/bankAccount the 'buyer' will send the money ? Is there any option to set that ?

[@massiveleg]

this only works with one product tho. How to connect the paypal button with cart full of items and different item quantities?

[@mahrukhayub2233]

What should I do to make the paypal transaction live rather than sandbox?

[@mattgarelli1371]

Quick question: Couldn't someone just edit the client side code in browser inspection tools to send a different value? I.e. send your backend the correct price, inject a separate price in PayPal.

[@PointlessPOS]

You could, but this is managed on your backend API to reject these kinds of behaviors.

[@jonathankaufman120]

How do you get order details once the payment is executed?

[@rpaivabr]

If I'm using ssr with universal, how can I get the paypal var on document? :/

[@hodotsofficial]

window.paypal.Buttons is not a function in React part

[@user-cv3er1qj8y]

thank you~~~

[@gilberttorchon1280]

my paypal button was working just fine this morning but it stopped showing. What am I doing wrong?

[@daggy1234]

hey it would be really cool if you made a paid tutorial for both stripe and paypal

[@loanpincher2631]

It seems that in my case, the paypal is being read before the script has finished loading, so, it throws me a "paypa is undefined". Please, can someone help me on this?

[@theskysthelimit.]

please make video for more than two products.

[@fffhshf345]

you don't have to use mounted: function()... u can just use mounted(){}

[@RajenParekh13]

I don't really have much clue about this, but is this secure, what security measures will I have to take to implement this in a website?

[@arsenemn]

Csn you do another video for react native

[@hugocardoso1488]

But making payments in the frontend, isn't a vulnerability? Someone could change the amount and you can't prevent it securely, it should be done in the backend rigth?

[@Fireship]

If you have something that is fulfilled instantly, it is a good idea to validate on the backend. In theory, anything done of the frontend can be reverse engineered.

[@michaelobasi2687]

8:02 "Vue will React auto-Angularly" - Fireship

[@anticom1337]

8:02 "And vue will react automatically" ...i wish this was true :P

[@dulanhewage6395]

In what cases it won't?

[@chacondorodo96]

I'm passing some props to paypalButton but every time this property changes, a new button is created inside the div instead of changing the already existing button property, can you help me?

[@iBmx1994]

I am having the same issue. Did you manage to resolve this ?

[@aslouche]

bro you are the best

[@chiubaca]

do you need to pay to create a Paypal business account?

[@sydneymolobela4953]

Hi, thank you for this tutorial. How do I make an actual paypal payment in angular?

[@yogenp]

Change the Sandbox Client ID to Live Client ID. Viola! Your payment gateway is live.

[@Fireship]

@@yogenp That is literally all it takes 👍

[@gilberttorchon1280]

Can yo do recurring payment with that method?

[@markmbugua2108]

Hi I changed the Client ID and now the paypal buttons are not loading on my page. What might be the problem?

[@Diamonddrake]

Using a hook to load the script means you might download the script multiple times in your application, your hook really should check if the script has been loaded already

[@kabiskac]

That useEffect needs [] as a dependency, and there should be another hook with the dependency of "loaded"

[@caolanfanning7261]

does anyone know if this doesnt work in europe? my sandbox works but my live doesnt

[@dayzmelttogether]

Cannot read property 'map' of undefined i did the vue tut i have a sandbox account ..what gives

[@xshadyz]

Even though you obviously know what you're talkin about. It's like watching a squirrel running up a tree stem watching your videos and listening to you. Not sure like it but I'm still a subscriber! :)

[@Fireship]

Haha, I get that a lot :)

[@AviatorXD]

KZbin wont fix the resolution

[@josueorozcoaltamirano7101]

Not so easy on Vue 3 composition api, the documentation it's a real mess... I did it at the end but it wasn't that clear.

[@benton202]

all of a sudden this doesn't work. i get a 422 error after days of completing this... WHYY?

[@acche-rc]

Still prefer Stripe. Paypal used to (not sure about now) randomly deny accepting credit card and make registering a Paypal account mandatory

[@Fireship]

Stripe is still better overall IMO, but I actually use both side-by-side now.

[@keerthipriyachunduri7648]

Which version of angular is this?

[@YousefSh]

Paypal Checkout + React = 💥. Can't get it working. Just shows loading page in paypal popup.

[@LC-qg6of]

Is anyone else getting "unhandled_error: zoid destroyed all components"?

[@raknjarasoa]

Awesome

[@physicsimpossible73]

How did you actually find out how to do this? PayPal documentation (and user interface) suck! Stripe is so much easier

[@syeddaniyal1273]

5:45 is react, 7:30 is vue

[@godmakoto1041]

Ok so i dont see much information whats the difference between firebase and other platforms,?

[@aserillll]

What do you mean you don’t see much information? Google has thousand of articles comparing fire base to other services

[@tkdevlop]

Is there is a reason why we can't put script in public/index.html in head for react?

[@Fireship]

The public folder can be deleted and overridden, so you generally don't want src code there.

[@dealloc]

@@Fireship That is not true. If you delete the public folder, in React's case, it won't be able to compile your project. The public folder is made for public assets, that shouldn't be part of the transpilation step (except for the index.html being used as a template).

[@Fireship]

@@dealloc You're right, I just found that in the create-react-app docs. I stand corrected. Just merged a pull request in the code that cleans up the react example.

[@flyingsamosa5282]

You forgot to blackout confidential info at 2:26

[@yogenp]

Client ID can be exposed, as mentioned in the video. Plus, it's a sandbox account.

[@carlosdanieldasilvaoliveir152]

what about react native ?

[@won1626]

Grate 👏

[@SethuSenthil]

Are there any fees?

[@sylviecypher4692]

buttons not rendering

[@JFkingW]

So whats better? stripe or paypal?

[@Fireship]

It depends. Stripe is still better overall IMO, but PayPal is preferred by many and supported in more countries. They are really close in feature parity and pricing.

[@dealloc]

I find that Stripe is fantastic if you don't want to tie yourself and users into a mandatory process. Stripe has a nice Payment API too (and React components as well, for example). I have used Stripe for all projects that I have worked for, so I am a bit biased. But also because I don't particularly like the account-centric side of PayPal. I just like to have a simple, user-friendly payment flow.

[@williamjamesrapp7356]

**QUESTION** How do I get a result from a PAYMENT process ( like STRIPE or PAYPAL ) to Trigger an Event or Function in MY website ? I am building a Business Website where in steps ( 1 ) a Customer ( anyone this is not a Subscription nor membership site ) comes to my web site Fills out a Form for DATA SUBMISSION into the Database. ( 2 ) Once the DATA Form is filled out they press NEXT button ( 3 ) they are taken to a 3rd party PAYMENT page where they fill out a payment form and then press SUBMIT ( 4 ) once the SUBMIT button is pressed payment is process ( 5 ) ONLY AFTER PAYMENT IS APPROVED THEN I want the Data to be submitted into the data base. QUESTION Is STEP # 5 completed with JS or some other language ? *HOW do I complete the process where AFTER PAYMENT IS ACCEPTED from a 3rd party payment processor ( like STRIP or PAYPAL ) THEN the data from the Already filled out data form is submitted into the data base ??* IS A WEBHOOK required to make this possible ? (if so how would one code that ) Is GET, Fetch, or some third party server required ??