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 https://fireship.io

- PayPal 2.0 https://developer.paypal.com/docs/api/overview/
- Code https://github.com/fireship-io/193-paypal-checkout-v2-demos

#paypal #webdev #money

Take the Fireship quizzes 🤓

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
2024-02-04T06:41:00.203Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
09c4da01-74ca-44dc-95ef-83c0f9e16c89
90de86efdecae2e499f6d4d9f5c1d6aec26475e5358dc7d9dd2294eb3e0558be
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Version 2 of the PayPal API was released earlier this year and it makes it extremely easy to start accepting payments from your progressive web app.
It's so easy, in fact, that I can show you how to integrate it into Angular, React, and Vue in a single video.
Dollar, dollar bills, y'all.
In today's video, you'll learn the basics of the PayPal version 2 API, and how to start start accepting and capturing real payments from your front end JavaScript app, and it's a lot easier than you might think.
If you're new here, like and subscribe, and you can find the full source code on FireShip IO.
Now just Say a few days ago, I implemented PayPal payments on Fireship, and also added the ability to purchase individual courses.
So ironically, you can now use PayPal to pay for my Stripe payments course if you want.
Now, during this integration, I learned that PayPal 2.0 delivers a really nice developer experience.
They've completely revamped the documentation and the API in a way that resembles Stripe payments.
Now in my case, I already have Stripe implemented, so I'm using PayPal alongside it as an additional option, but you can actually use PayPal as a stand alone payment solution to accept credit cards, Venmo, crypto, and more.
What we'll be looking at today is PayPal checkout, which allows you to mount this payment button directly in your application, and it will take care of collecting payment details from the user and can also capture and charge the payment entirely from the front end.
The first thing you'll need to get started is a PayPal Business account.
From there, you can go to the PayPal developers dashboard, and the first thing we'll want to do is create an application.
When you create this application, it will give you 2 sets of API keys.
The sandbox keys are used to make mock payments and to test your integration, and the live keys are used for actual payments in your production app.
Now each of these environments contains 2 API keys, the client ID and the secret.
The client ID is perfectly safe to expose in your front end application, and we'll use that client ID in the Angular, React, and Vue apps.
The secret on the other hand should never be exposed in your front end code or a public GitHub repo.
The secret is used to identify your app to a back end server like Node or Firebase Cloud Functions, so you can use it to interact with the API from the back end, but we actually don't even need to use it in this demo.
And that's because you can use PayPal checkout to do everything entirely from the front end and we'll talk a little bit more about trade offs later in the video.
Now we're going to implement the same basic payment spec in Angular, React, and Vue.
And even though each app is solving the same exact problem the implementation details vary widely.
Let's go ahead and get started with my personal favorite and generate a new Angular app with the CLI.
The first thing we'll do is go into the index HTML file and include the script tag for PayPal JS.
When you include the script tag, you'll also need to pass in your client ID, and and you wanna stick to the sandbox client ID for now.
And, again, you can retrieve that from the PayPal developer dashboard.
Now a quick side note, you might be wondering why using a script tag and not installing an npm module.
The reason payment systems generally use script tags is because they want your site to always have the latest version of the SDK.
A security flaw on a payment system is a very big deal, so they want to make sure that you're not running outdated code.
The next thing I'll do is generate a component, Then in the top of that component, I'll declare a variable for PayPal.
That PayPal script creates a global variable called PayPal that lives on the window object, and that's how we make it known to TypeScript.
The first thing that PayPal needs to do is mount the actual button to the DOM.
So we need to grab an HTML element that PayPal can attach itself to.
In Angular, we can do that with the ViewChild decorator and then pass in the name of the template reference variable, and we can make that reference in the HTML with a hashtag.
Now in these examples, we're just going to hard code the product data directly into the components, but in real life you'll most likely be pulling this information from an API or a database somewhere.
In this example here, we just need some data for the product and then we'll set a boolean that will tell us whether or not that product's been paid for.
When the component is initial utilize is when we'll mount the PayPal button to the DOM element.
So we call PayPal buttons and then pass in the native DOM element to the render method.
We can pass an object to buttons that contains the callbacks used to handle different events that happen in the payment life cycle.
The first thing that happens in the life cycle is the user clicks on the PayPal button, and we need to configure the order details to send to PayPal so they can process the payment.
So we call actions order create, and we can pass in a bunch of custom options here, but at the bare minimum, you'll want to have at least one purchase unit, and that should at least contain a description and an amount with a currency code.
This will send the user over to PayPal where they can authorize the order.
They can check out as a guest with their credit card details, or they can use their PayPal balance or some other form of payment on their account.
At this point, the order is authorized and approved, but the actual funds have not been captured yet, or in other words, the credit card has not been charged.
For most simple use cases.
You can simply capture the payment directly in your front end code by calling actions order capture.
Now it's important to point out that you don't actually need to capture the funds here if you don't want to.
An alternative would be to send the data from this callback to your back end server and then process the charge there.
And that tends to be a better option for more advanced use cases where you might need to validate the payment and then do additional back end work after the payment has been captured.
We're just going to stick with the easy route here and capture the payment directly in Angular, and then we'll set the paid for property to true.
And that's something that you would obviously want to persist in a back end as well in a real application.
And the last thing I'll point out is that there are additional callbacks we can use here as well.
For example, if we want to cache errors, we can use on error to do that.
That takes care of our TypeScript code.
Now we can go over to the HTML and set up our template logic.
We'll use n g f to see if the item has not been paid for, and if not, we'll go ahead and show the price and product details as well as the PayPal button.
And if it has been paid for, then we'll just go ahead and show an order confirmation.
And just like that, we now have a full stack payment solution in Angular.
Now one thing I really like about PayPal is that you can set up multiple mock accounts, and then you could add funds to those mock accounts as well as credit cards and bank accounts and things like that.
So it makes it really easy to test your implementation details in the sandbox, and that also makes it easy to perform negative testing where you handle different error conditions.
In our demo here, you can see we have a successful mock payment, and then it console logs the payment details to the browser.
And you can send this data to your back end to record in a database or send the user formation email and stuff like that.
That takes care of our Angular integration, now let's move on to React.
I'll use Create React App to generate a new application, and we'll want to build this app the modern way, so we'll go ahead and import some hooks like use state, use ref, and use effect.
Now including a script tag in React isn't quite as easy as it is in Angular, and we need to manually create the script and then append it to the Dom.
So we have 2 different pieces of state.
The first one paid for will tell us whether or not the product has been paid and then we'll have a loaded state that will tell us when the actual PayPal script has been loaded.
And if you know of a better way to do this with React Hooks, let me know in the comments.
Then we'll also use the useRef hook so we can set up a reference to a DOM element that the actual PayPal button can be mounted to.
Now at this point, I'm going to jump into the JSX and build out the template.
This follows the same general structure that we saw in Angular.
If the item has been paid for, then we'll show the confirmation.
Otherwise, we'll go ahead and show the actual product details and the payment button.
And to grab an empty div from the dom for the button, we'll go ahead and use that reference that we defined with the use ref hook.
Now the next thing we need to do is get the actual PayPal JS script into our code.
We can do that imperatively in the useEffect hook and then we'll define the script source as the same source that we used in the Angular app.
But this time we want to add an event listener to the load event and then when it's finished loading will set the loaded property to true on this React component.
Once we know that the script's been loaded, we can then initialize our PayPal button.
But for whatever reason, I had to wrap this in a set time out because there seems to be some weird issue between one of the dependencies in PayPal JS and React, but feel free to submit a pull request if you have a good workaround for this demo.
Now at this point, we can access PayPal from the window object, and then we'll have the exact same code that we wrote previously in the Angular example.
The only difference is that we're using React Hooks to update estate and to grab the DOM element to mount the actual button itself, and that's all it takes to get started with React.
And if you check out the PayPal JS repo, you'll see an example for React in there as well, but it doesn't use hooks.
But enough of React, let's go ahead and move on to Vue.
We can start by generating a new Vue app with the Vue CLI, and then we'll start by defining the template because it's conveniently located at the top of the file.
The template logic is very similar to Angular because Vue also uses directives.
So again, we'll show the item details if the item is not paid for, and then if it is paid for, we'll show the order information.
And then we'll also make a reference to an empty div with a ref of PayPal.
The next thing we'll do is define the data for this component which is exactly the same as React, but instead of hooks, we use a data function that returns an object with the data that we use in this component, and Vue will react automatically if we change any of the properties on this object.
The next thing we'll do is append the PayPal script to this application in the mounted life cycle hook.
This is the exact same thing we did in the use effect hook with React.
When the script is loaded, we'll have access to the global PayPal object, and then we'll mount it to that empty div that we made a reference to earlier.
From there the callbacks will be the same as the previous examples where we first create the order and then we capture the order and handle any errors if necessary.
And and that's all it takes to implement PayPal in a Vue app.
Well, that was easy.
Yeah, I guess it was.
My goal with these three examples was to show you how easy it is to start monetizing your progressive web app, but if you want to learn more advanced techniques, consider becoming a pro member to enroll in the Stripe Payments Master Course.
You'll learn how to build and test a reliable payment system that can work with any front end framework.
Thanks for watching, and I will talk to you soon.

Speaker 0: Version 2 of the PayPal API was released earlier this year and it makes it extremely easy to start accepting payments from your progressive web app. It's so easy, in fact, that I can show you how to integrate it into Angular, React, and Vue in a single video. Dollar, dollar bills, y'all. In today's video, you'll learn the basics of the PayPal version 2 API, and how to start start accepting and capturing real payments from your front end JavaScript app, and it's a lot easier than you might think. If you're new here, like and subscribe, and you can find the full source code on FireShip IO.

Now just Say a few days ago, I implemented PayPal payments on Fireship, and also added the ability to purchase individual courses. So ironically, you can now use PayPal to pay for my Stripe payments course if you want. Now, during this integration, I learned that PayPal 2.0 delivers a really nice developer experience. They've completely revamped the documentation and the API in a way that resembles Stripe payments. Now in my case, I already have Stripe implemented, so I'm using PayPal alongside it as an additional option, but you can actually use PayPal as a stand alone payment solution to accept credit cards, Venmo, crypto, and more.

What we'll be looking at today is PayPal checkout, which allows you to mount this payment button directly in your application, and it will take care of collecting payment details from the user and can also capture and charge the payment entirely from the front end. The first thing you'll need to get started is a PayPal Business account. From there, you can go to the PayPal developers dashboard, and the first thing we'll want to do is create an application. When you create this application, it will give you 2 sets of API keys. The sandbox keys are used to make mock payments and to test your integration, and the live keys are used for actual payments in your production app.

Now each of these environments contains 2 API keys, the client ID and the secret. The client ID is perfectly safe to expose in your front end application, and we'll use that client ID in the Angular, React, and Vue apps. The secret on the other hand should never be exposed in your front end code or a public GitHub repo. The secret is used to identify your app to a back end server like Node or Firebase Cloud Functions, so you can use it to interact with the API from the back end, but we actually don't even need to use it in this demo. And that's because you can use PayPal checkout to do everything entirely from the front end and we'll talk a little bit more about trade offs later in the video.

Now we're going to implement the same basic payment spec in Angular, React, and Vue. And even though each app is solving the same exact problem the implementation details vary widely. Let's go ahead and get started with my personal favorite and generate a new Angular app with the CLI. The first thing we'll do is go into the index HTML file and include the script tag for PayPal JS. When you include the script tag, you'll also need to pass in your client ID, and and you wanna stick to the sandbox client ID for now.

And, again, you can retrieve that from the PayPal developer dashboard. Now a quick side note, you might be wondering why using a script tag and not installing an npm module. The reason payment systems generally use script tags is because they want your site to always have the latest version of the SDK. A security flaw on a payment system is a very big deal, so they want to make sure that you're not running outdated code. The next thing I'll do is generate a component, Then in the top of that component, I'll declare a variable for PayPal.

That PayPal script creates a global variable called PayPal that lives on the window object, and that's how we make it known to TypeScript. The first thing that PayPal needs to do is mount the actual button to the DOM. So we need to grab an HTML element that PayPal can attach itself to. In Angular, we can do that with the ViewChild decorator and then pass in the name of the template reference variable, and we can make that reference in the HTML with a hashtag. Now in these examples, we're just going to hard code the product data directly into the components, but in real life you'll most likely be pulling this information from an API or a database somewhere.

In this example here, we just need some data for the product and then we'll set a boolean that will tell us whether or not that product's been paid for. When the component is initial utilize is when we'll mount the PayPal button to the DOM element. So we call PayPal buttons and then pass in the native DOM element to the render method. We can pass an object to buttons that contains the callbacks used to handle different events that happen in the payment life cycle. The first thing that happens in the life cycle is the user clicks on the PayPal button, and we need to configure the order details to send to PayPal so they can process the payment.

So we call actions order create, and we can pass in a bunch of custom options here, but at the bare minimum, you'll want to have at least one purchase unit, and that should at least contain a description and an amount with a currency code. This will send the user over to PayPal where they can authorize the order. They can check out as a guest with their credit card details, or they can use their PayPal balance or some other form of payment on their account. At this point, the order is authorized and approved, but the actual funds have not been captured yet, or in other words, the credit card has not been charged. For most simple use cases.

You can simply capture the payment directly in your front end code by calling actions order capture. Now it's important to point out that you don't actually need to capture the funds here if you don't want to. An alternative would be to send the data from this callback to your back end server and then process the charge there. And that tends to be a better option for more advanced use cases where you might need to validate the payment and then do additional back end work after the payment has been captured. We're just going to stick with the easy route here and capture the payment directly in Angular, and then we'll set the paid for property to true.

And that's something that you would obviously want to persist in a back end as well in a real application. And the last thing I'll point out is that there are additional callbacks we can use here as well. For example, if we want to cache errors, we can use on error to do that. That takes care of our TypeScript code. Now we can go over to the HTML and set up our template logic.

We'll use n g f to see if the item has not been paid for, and if not, we'll go ahead and show the price and product details as well as the PayPal button. And if it has been paid for, then we'll just go ahead and show an order confirmation. And just like that, we now have a full stack payment solution in Angular. Now one thing I really like about PayPal is that you can set up multiple mock accounts, and then you could add funds to those mock accounts as well as credit cards and bank accounts and things like that. So it makes it really easy to test your implementation details in the sandbox, and that also makes it easy to perform negative testing where you handle different error conditions.

In our demo here, you can see we have a successful mock payment, and then it console logs the payment details to the browser. And you can send this data to your back end to record in a database or send the user formation email and stuff like that. That takes care of our Angular integration, now let's move on to React. I'll use Create React App to generate a new application, and we'll want to build this app the modern way, so we'll go ahead and import some hooks like use state, use ref, and use effect. Now including a script tag in React isn't quite as easy as it is in Angular, and we need to manually create the script and then append it to the Dom.

So we have 2 different pieces of state. The first one paid for will tell us whether or not the product has been paid and then we'll have a loaded state that will tell us when the actual PayPal script has been loaded. And if you know of a better way to do this with React Hooks, let me know in the comments. Then we'll also use the useRef hook so we can set up a reference to a DOM element that the actual PayPal button can be mounted to. Now at this point, I'm going to jump into the JSX and build out the template.

This follows the same general structure that we saw in Angular. If the item has been paid for, then we'll show the confirmation. Otherwise, we'll go ahead and show the actual product details and the payment button. And to grab an empty div from the dom for the button, we'll go ahead and use that reference that we defined with the use ref hook. Now the next thing we need to do is get the actual PayPal JS script into our code.

We can do that imperatively in the useEffect hook and then we'll define the script source as the same source that we used in the Angular app. But this time we want to add an event listener to the load event and then when it's finished loading will set the loaded property to true on this React component. Once we know that the script's been loaded, we can then initialize our PayPal button. But for whatever reason, I had to wrap this in a set time out because there seems to be some weird issue between one of the dependencies in PayPal JS and React, but feel free to submit a pull request if you have a good workaround for this demo. Now at this point, we can access PayPal from the window object, and then we'll have the exact same code that we wrote previously in the Angular example.

The only difference is that we're using React Hooks to update estate and to grab the DOM element to mount the actual button itself, and that's all it takes to get started with React. And if you check out the PayPal JS repo, you'll see an example for React in there as well, but it doesn't use hooks. But enough of React, let's go ahead and move on to Vue. We can start by generating a new Vue app with the Vue CLI, and then we'll start by defining the template because it's conveniently located at the top of the file. The template logic is very similar to Angular because Vue also uses directives.

So again, we'll show the item details if the item is not paid for, and then if it is paid for, we'll show the order information. And then we'll also make a reference to an empty div with a ref of PayPal. The next thing we'll do is define the data for this component which is exactly the same as React, but instead of hooks, we use a data function that returns an object with the data that we use in this component, and Vue will react automatically if we change any of the properties on this object. The next thing we'll do is append the PayPal script to this application in the mounted life cycle hook. This is the exact same thing we did in the use effect hook with React.

When the script is loaded, we'll have access to the global PayPal object, and then we'll mount it to that empty div that we made a reference to earlier. From there the callbacks will be the same as the previous examples where we first create the order and then we capture the order and handle any errors if necessary. And and that's all it takes to implement PayPal in a Vue app. Well, that was easy. Yeah, I guess it was.

My goal with these three examples was to show you how easy it is to start monetizing your progressive web app, but if you want to learn more advanced techniques, consider becoming a pro member to enroll in the Stripe Payments Master Course. You'll learn how to build and test a reliable payment system that can work with any front end framework. Thanks for watching, and I will talk to you soon.
Version 2 of the PayPal API was released earlier this year and it makes it extremely easy to start accepting payments from your progressive web app.
It's so easy, in fact, that I can show you how to integrate it into Angular, React, and Vue in a single video. Dollar, dollar bills, y'all. In today's video, you'll learn the basics of the PayPal version 2 API, and how to start start accepting and capturing real payments from your front end JavaScript app, and it's a lot easier than you might think.
youtube
If you're new here, like and subscribe, and you can find the full source code on FireShip IO. Now just Say a few days ago, I implemented PayPal payments on Fireship, and also added the ability to purchase individual courses.
So ironically, you can now use PayPal to pay for my Stripe payments course if you want. Now, during this integration, I learned that PayPal 2.0 delivers a really nice developer experience. They've completely revamped the documentation and the API in a way that resembles Stripe payments. Now in my case, I already have Stripe implemented, so I'm using PayPal alongside it as an additional option, but you can actually use PayPal as a stand alone payment solution to accept credit cards, Venmo, crypto, and more.
billing
What we'll be looking at today is PayPal checkout, which allows you to mount this payment button directly in your application, and it will take care of collecting payment details from the user and can also capture and charge the payment entirely from the front end. The first thing you'll need to get started is a PayPal Business account. From there, you can go to the PayPal developers dashboard, and the first thing we'll want to do is create an application. When you create this application, it will give you 2 sets of API keys. The sandbox keys are used to make mock payments and to test your integration, and the live keys are used for actual payments in your production app.
Now each of these environments contains 2 API keys, the client ID and the secret. The client ID is perfectly safe to expose in your front end application, and we'll use that client ID in the Angular, React, and Vue apps. The secret on the other hand should never be exposed in your front end code or a public GitHub repo. The secret is used to identify your app to a back end server like Node or Firebase Cloud Functions, so you can use it to interact with the API from the back end, but we actually don't even need to use it in this demo. And that's because you can use PayPal checkout to do everything entirely from the front end and we'll talk a little bit more about trade offs later in the video. Now we're going to implement the same basic payment spec in Angular, React, and Vue. And even though each app is solving the same exact problem the implementation details vary widely.
security
billing
Let's go ahead and get started with my personal favorite and generate a new Angular app with the CLI. The first thing we'll do is go into the index HTML file and include the script tag for PayPal JS. When you include the script tag, you'll also need to pass in your client ID, and and you wanna stick to the sandbox client ID for now. And, again, you can retrieve that from the PayPal developer dashboard. Now a quick side note, you might be wondering why using a script tag and not installing an npm module.
The reason payment systems generally use script tags is because they want your site to always have the latest version of the SDK. A security flaw on a payment system is a very big deal, so they want to make sure that you're not running outdated code. The next thing I'll do is generate a component, Then in the top of that component, I'll declare a variable for PayPal.
billing
That PayPal script creates a global variable called PayPal that lives on the window object, and that's how we make it known to TypeScript. The first thing that PayPal needs to do is mount the actual button to the DOM. So we need to grab an HTML element that PayPal can attach itself to. In Angular, we can do that with the ViewChild decorator and then pass in the name of the template reference variable, and we can make that reference in the HTML with a hashtag.
Now in these examples, we're just going to hard code the product data directly into the components, but in real life you'll most likely be pulling this information from an API or a database somewhere. In this example here, we just need some data for the product and then we'll set a boolean that will tell us whether or not that product's been paid for.
data
data management
data analysis
databases
When the component is initial utilize is when we'll mount the PayPal button to the DOM element. So we call PayPal buttons and then pass in the native DOM element to the render method. We can pass an object to buttons that contains the callbacks used to handle different events that happen in the payment life cycle. The first thing that happens in the life cycle is the user clicks on the PayPal button, and we need to configure the order details to send to PayPal so they can process the payment.
So we call actions order create, and we can pass in a bunch of custom options here, but at the bare minimum, you'll want to have at least one purchase unit, and that should at least contain a description and an amount with a currency code. This will send the user over to PayPal where they can authorize the order. They can check out as a guest with their credit card details, or they can use their PayPal balance or some other form of payment on their account. At this point, the order is authorized and approved, but the actual funds have not been captured yet, or in other words, the credit card has not been charged. For most simple use cases. You can simply capture the payment directly in your front end code by calling actions order capture. Now it's important to point out that you don't actually need to capture the funds here if you don't want to. An alternative would be to send the data from this callback to your back end server and then process the charge there. And that tends to be a better option for more advanced use cases where you might need to validate the payment and then do additional back end work after the payment has been captured.
billing
purchasing
We're just going to stick with the easy route here and capture the payment directly in Angular, and then we'll set the paid for property to true. And that's something that you would obviously want to persist in a back end as well in a real application. And the last thing I'll point out is that there are additional callbacks we can use here as well. For example, if we want to cache errors, we can use on error to do that. That takes care of our TypeScript code. Now we can go over to the HTML and set up our template logic.
We'll use n g f to see if the item has not been paid for, and if not, we'll go ahead and show the price and product details as well as the PayPal button. And if it has been paid for, then we'll just go ahead and show an order confirmation. And just like that, we now have a full stack payment solution in Angular. Now one thing I really like about PayPal is that you can set up multiple mock accounts, and then you could add funds to those mock accounts as well as credit cards and bank accounts and things like that.
billing
purchasing
So it makes it really easy to test your implementation details in the sandbox, and that also makes it easy to perform negative testing where you handle different error conditions.
In our demo here, you can see we have a successful mock payment, and then it console logs the payment details to the browser. And you can send this data to your back end to record in a database or send the user formation email and stuff like that. That takes care of our Angular integration, now let's move on to React.
billing
I'll use Create React App to generate a new application, and we'll want to build this app the modern way, so we'll go ahead and import some hooks like use state, use ref, and use effect. Now including a script tag in React isn't quite as easy as it is in Angular, and we need to manually create the script and then append it to the Dom.
So we have 2 different pieces of state. The first one paid for will tell us whether or not the product has been paid and then we'll have a loaded state that will tell us when the actual PayPal script has been loaded. And if you know of a better way to do this with React Hooks, let me know in the comments.
billing
Then we'll also use the useRef hook so we can set up a reference to a DOM element that the actual PayPal button can be mounted to. Now at this point, I'm going to jump into the JSX and build out the template. This follows the same general structure that we saw in Angular.
If the item has been paid for, then we'll show the confirmation. Otherwise, we'll go ahead and show the actual product details and the payment button. And to grab an empty div from the dom for the button, we'll go ahead and use that reference that we defined with the use ref hook.
billing
Now the next thing we need to do is get the actual PayPal JS script into our code. We can do that imperatively in the useEffect hook and then we'll define the script source as the same source that we used in the Angular app. But this time we want to add an event listener to the load event and then when it's finished loading will set the loaded property to true on this React component. Once we know that the script's been loaded, we can then initialize our PayPal button. But for whatever reason, I had to wrap this in a set time out because there seems to be some weird issue between one of the dependencies in PayPal JS and React, but feel free to submit a pull request if you have a good workaround for this demo. Now at this point, we can access PayPal from the window object, and then we'll have the exact same code that we wrote previously in the Angular example. The only difference is that we're using React Hooks to update estate and to grab the DOM element to mount the actual button itself, and that's all it takes to get started with React. And if you check out the PayPal JS repo, you'll see an example for React in there as well, but it doesn't use hooks. But enough of React, let's go ahead and move on to Vue. We can start by generating a new Vue app with the Vue CLI, and then we'll start by defining the template because it's conveniently located at the top of the file. The template logic is very similar to Angular because Vue also uses directives. So again, we'll show the item details if the item is not paid for, and then if it is paid for, we'll show the order information. And then we'll also make a reference to an empty div with a ref of PayPal. The next thing we'll do is define the data for this component which is exactly the same as React, but instead of hooks, we use a data function that returns an object with the data that we use in this component, and Vue will react automatically if we change any of the properties on this object. The next thing we'll do is append the PayPal script to this application in the mounted life cycle hook. This is the exact same thing we did in the use effect hook with React. When the script is loaded, we'll have access to the global PayPal object, and then we'll mount it to that empty div that we made a reference to earlier. From there the callbacks will be the same as the previous examples where we first create the order and then we capture the order and handle any errors if necessary. And and that's all it takes to implement PayPal in a Vue app. Well, that was easy. Yeah, I guess it was. My goal with these three examples was to show you how easy it is to start monetizing your progressive web app, but if you want to learn more advanced techniques, consider becoming a pro member to enroll in the Stripe Payments Master Course.
You'll learn how to build and test a reliable payment system that can work with any front end framework. Thanks for watching, and I will talk to you soon.
billing
customer support
loans
banking
Version 2 of the PayPal API was released earlier this year and it makes it extremely easy to start accepting payments from your progressive web app. It's so easy, in fact, that I can show you how to integrate it into Angular, React, and Vue in a single video. Dollar, dollar bills, y'all. In today's video, you'll learn the basics of the PayPal version 2 API, and how to start start accepting and capturing real payments from your front end JavaScript app, and it's a lot easier than you might think. If you're new here, like and subscribe, and you can find the full source code on FireShip IO. Now just Say a few days ago, I implemented PayPal payments on Fireship, and also added the ability to purchase individual courses. So ironically, you can now use PayPal to pay for my Stripe payments course if you want. Now, during this integration, I learned that PayPal 2.0 delivers a really nice developer experience. They've completely revamped the documentation and the API in a way that resembles Stripe payments. Now in my case, I already have Stripe implemented, so I'm using PayPal alongside it as an additional option, but you can actually use PayPal as a stand alone payment solution to accept credit cards, Venmo, crypto, and more. What we'll be looking at today is PayPal checkout, which allows you to mount this payment button directly in your application, and it will take care of collecting payment details from the user and can also capture and charge the payment entirely from the front end. The first thing you'll need to get started is a PayPal Business account. From there, you can go to the PayPal developers dashboard, and the first thing we'll want to do is create an application. When you create this application, it will give you 2 sets of API keys. The sandbox keys are used to make mock payments and to test your integration, and the live keys are used for actual payments in your production app. Now each of these environments contains 2 API keys, the client ID and the secret. The client ID is perfectly safe to expose in your front end application, and we'll use that client ID in the Angular, React, and Vue apps. The secret on the other hand should never be exposed in your front end code or a public GitHub repo. The secret is used to identify your app to a back end server like Node or Firebase Cloud Functions, so you can use it to interact with the API from the back end, but we actually don't even need to use it in this demo. And that's because you can use PayPal checkout to do everything entirely from the front end and we'll talk a little bit more about trade offs later in the video. Now we're going to implement the same basic payment spec in Angular, React, and Vue. And even though each app is solving the same exact problem the implementation details vary widely. Let's go ahead and get started with my personal favorite and generate a new Angular app with the CLI. The first thing we'll do is go into the index HTML file and include the script tag for PayPal JS. When you include the script tag, you'll also need to pass in your client ID, and and you wanna stick to the sandbox client ID for now. And, again, you can retrieve that from the PayPal developer dashboard. Now a quick side note, you might be wondering why using a script tag and not installing an npm module. The reason payment systems generally use script tags is because they want your site to always have the latest version of the SDK. A security flaw on a payment system is a very big deal, so they want to make sure that you're not running outdated code. The next thing I'll do is generate a component, Then in the top of that component, I'll declare a variable for PayPal. That PayPal script creates a global variable called PayPal that lives on the window object, and that's how we make it known to TypeScript. The first thing that PayPal needs to do is mount the actual button to the DOM. So we need to grab an HTML element that PayPal can attach itself to. In Angular, we can do that with the ViewChild decorator and then pass in the name of the template reference variable, and we can make that reference in the HTML with a hashtag. Now in these examples, we're just going to hard code the product data directly into the components, but in real life you'll most likely be pulling this information from an API or a database somewhere. In this example here, we just need some data for the product and then we'll set a boolean that will tell us whether or not that product's been paid for. When the component is initial utilize is when we'll mount the PayPal button to the DOM element. So we call PayPal buttons and then pass in the native DOM element to the render method. We can pass an object to buttons that contains the callbacks used to handle different events that happen in the payment life cycle. The first thing that happens in the life cycle is the user clicks on the PayPal button, and we need to configure the order details to send to PayPal so they can process the payment. So we call actions order create, and we can pass in a bunch of custom options here, but at the bare minimum, you'll want to have at least one purchase unit, and that should at least contain a description and an amount with a currency code. This will send the user over to PayPal where they can authorize the order. They can check out as a guest with their credit card details, or they can use their PayPal balance or some other form of payment on their account. At this point, the order is authorized and approved, but the actual funds have not been captured yet, or in other words, the credit card has not been charged. For most simple use cases. You can simply capture the payment directly in your front end code by calling actions order capture. Now it's important to point out that you don't actually need to capture the funds here if you don't want to. An alternative would be to send the data from this callback to your back end server and then process the charge there. And that tends to be a better option for more advanced use cases where you might need to validate the payment and then do additional back end work after the payment has been captured. We're just going to stick with the easy route here and capture the payment directly in Angular, and then we'll set the paid for property to true. And that's something that you would obviously want to persist in a back end as well in a real application. And the last thing I'll point out is that there are additional callbacks we can use here as well. For example, if we want to cache errors, we can use on error to do that. That takes care of our TypeScript code. Now we can go over to the HTML and set up our template logic. We'll use n g f to see if the item has not been paid for, and if not, we'll go ahead and show the price and product details as well as the PayPal button. And if it has been paid for, then we'll just go ahead and show an order confirmation. And just like that, we now have a full stack payment solution in Angular. Now one thing I really like about PayPal is that you can set up multiple mock accounts, and then you could add funds to those mock accounts as well as credit cards and bank accounts and things like that. So it makes it really easy to test your implementation details in the sandbox, and that also makes it easy to perform negative testing where you handle different error conditions. In our demo here, you can see we have a successful mock payment, and then it console logs the payment details to the browser. And you can send this data to your back end to record in a database or send the user formation email and stuff like that. That takes care of our Angular integration, now let's move on to React. I'll use Create React App to generate a new application, and we'll want to build this app the modern way, so we'll go ahead and import some hooks like use state, use ref, and use effect. Now including a script tag in React isn't quite as easy as it is in Angular, and we need to manually create the script and then append it to the Dom. So we have 2 different pieces of state. The first one paid for will tell us whether or not the product has been paid and then we'll have a loaded state that will tell us when the actual PayPal script has been loaded. And if you know of a better way to do this with React Hooks, let me know in the comments. Then we'll also use the useRef hook so we can set up a reference to a DOM element that the actual PayPal button can be mounted to. Now at this point, I'm going to jump into the JSX and build out the template. This follows the same general structure that we saw in Angular. If the item has been paid for, then we'll show the confirmation. Otherwise, we'll go ahead and show the actual product details and the payment button. And to grab an empty div from the dom for the button, we'll go ahead and use that reference that we defined with the use ref hook. Now the next thing we need to do is get the actual PayPal JS script into our code. We can do that imperatively in the useEffect hook and then we'll define the script source as the same source that we used in the Angular app. But this time we want to add an event listener to the load event and then when it's finished loading will set the loaded property to true on this React component. Once we know that the script's been loaded, we can then initialize our PayPal button. But for whatever reason, I had to wrap this in a set time out because there seems to be some weird issue between one of the dependencies in PayPal JS and React, but feel free to submit a pull request if you have a good workaround for this demo. Now at this point, we can access PayPal from the window object, and then we'll have the exact same code that we wrote previously in the Angular example. The only difference is that we're using React Hooks to update estate and to grab the DOM element to mount the actual button itself, and that's all it takes to get started with React. And if you check out the PayPal JS repo, you'll see an example for React in there as well, but it doesn't use hooks. But enough of React, let's go ahead and move on to Vue. We can start by generating a new Vue app with the Vue CLI, and then we'll start by defining the template because it's conveniently located at the top of the file. The template logic is very similar to Angular because Vue also uses directives. So again, we'll show the item details if the item is not paid for, and then if it is paid for, we'll show the order information. And then we'll also make a reference to an empty div with a ref of PayPal. The next thing we'll do is define the data for this component which is exactly the same as React, but instead of hooks, we use a data function that returns an object with the data that we use in this component, and Vue will react automatically if we change any of the properties on this object. The next thing we'll do is append the PayPal script to this application in the mounted life cycle hook. This is the exact same thing we did in the use effect hook with React. When the script is loaded, we'll have access to the global PayPal object, and then we'll mount it to that empty div that we made a reference to earlier. From there the callbacks will be the same as the previous examples where we first create the order and then we capture the order and handle any errors if necessary. And and that's all it takes to implement PayPal in a Vue app. Well, that was easy. Yeah, I guess it was. My goal with these three examples was to show you how easy it is to start monetizing your progressive web app, but if you want to learn more advanced techniques, consider becoming a pro member to enroll in the Stripe Payments Master Course. You'll learn how to build and test a reliable payment system that can work with any front end framework. Thanks for watching, and I will talk to you soon.
Version
version
2
2
of
of
the
the
PayPal
paypal
API
api
was
was
released
released
earlier
earlier
this
this
year
year
and
and
it
it
makes
makes
it
it
extremely
extremely
easy
easy
to
to
start
start
accepting
accepting
payments
payments
from
from
your
your
progressive
progressive
web
web
app.
app
It's
it's
so
so
easy,
easy
in
in
fact,
fact
that
that
I
i
can
can
show
show
you
you
how
how
to
to
integrate
integrate
it
it
into
into
Angular,
angular
React,
react
and
and
Vue
vue
in
in
a
a
single
single
video.
video
Dollar,
dollar
dollar
dollar
bills,
bills
y'all.
y'all
In
in
today's
today's
video,
video
you'll
you'll
learn
learn
the
the
basics
basics
of
of
the
the
PayPal
paypal
version
version
2
2
API,
api
and
and
how
how
to
to
start
start
start
start
accepting
accepting
and
and
capturing
capturing
real
real
payments
payments
from
from
your
your
front
front
end
end
JavaScript
javascript
app,
app
and
and
it's
it's
a
a
lot
lot
easier
easier
than
than
you
you
might
might
think.
think
If
if
you're
you're
new
new
here,
here
like
like
and
and
subscribe,
subscribe
and
and
you
you
can
can
find
find
the
the
full
full
source
source
code
code
on
on
FireShip
fireship
IO.
io
Now
now
just
just
Say
say
a
a
few
few
days
days
ago,
ago
I
i
implemented
implemented
PayPal
paypal
payments
payments
on
on
Fireship,
fireship
and
and
also
also
added
added
the
the
ability
ability
to
to
purchase
purchase
individual
individual
courses.
courses
So
so
ironically,
ironically
you
you
can
can
now
now
use
use
PayPal
paypal
to
to
pay
pay
for
for
my
my
Stripe
stripe
payments
payments
course
course
if
if
you
you
want.
want
Now,
now
during
during
this
this
integration,
integration
I
i
learned
learned
that
that
PayPal
paypal
2.0
2.0
delivers
delivers
a
a
really
really
nice
nice
developer
developer
experience.
experience
They've
they've
completely
completely
revamped
revamped
the
the
documentation
documentation
and
and
the
the
API
api
in
in
a
a
way
way
that
that
resembles
resembles
Stripe
stripe
payments.
payments
Now
now
in
in
my
my
case,
case
I
i
already
already
have
have
Stripe
stripe
implemented,
implemented
so
so
I'm
i'm
using
using
PayPal
paypal
alongside
alongside
it
it
as
as
an
an
additional
additional
option,
option
but
but
you
you
can
can
actually
actually
use
use
PayPal
paypal
as
as
a
a
stand
stand
alone
alone
payment
payment
solution
solution
to
to
accept
accept
credit
credit
cards,
cards
Venmo,
venmo
crypto,
crypto
and
and
more.
more
What
what
we'll
we'll
be
be
looking
looking
at
at
today
today
is
is
PayPal
paypal
checkout,
checkout
which
which
allows
allows
you
you
to
to
mount
mount
this
this
payment
payment
button
button
directly
directly
in
in
your
your
application,
application
and
and
it
it
will
will
take
take
care
care
of
of
collecting
collecting
payment
payment
details
details
from
from
the
the
user
user
and
and
can
can
also
also
capture
capture
and
and
charge
charge
the
the
payment
payment
entirely
entirely
from
from
the
the
front
front
end.
end
The
the
first
first
thing
thing
you'll
you'll
need
need
to
to
get
get
started
started
is
is
a
a
PayPal
paypal
Business
business
account.
account
From
from
there,
there
you
you
can
can
go
go
to
to
the
the
PayPal
paypal
developers
developers
dashboard,
dashboard
and
and
the
the
first
first
thing
thing
we'll
we'll
want
want
to
to
do
do
is
is
create
create
an
an
application.
application
When
when
you
you
create
create
this
this
application,
application
it
it
will
will
give
give
you
you
2
2
sets
sets
of
of
API
api
keys.
keys
The
the
sandbox
sandbox
keys
keys
are
are
used
used
to
to
make
make
mock
mock
payments
payments
and
and
to
to
test
test
your
your
integration,
integration
and
and
the
the
live
live
keys
keys
are
are
used
used
for
for
actual
actual
payments
payments
in
in
your
your
production
production
app.
app
Now
now
each
each
of
of
these
these
environments
environments
contains
contains
2
2
API
api
keys,
keys
the
the
client
client
ID
id
and
and
the
the
secret.
secret
The
the
client
client
ID
id
is
is
perfectly
perfectly
safe
safe
to
to
expose
expose
in
in
your
your
front
front
end
end
application,
application
and
and
we'll
we'll
use
use
that
that
client
client
ID
id
in
in
the
the
Angular,
angular
React,
react
and
and
Vue
vue
apps.
apps
The
the
secret
secret
on
on
the
the
other
other
hand
hand
should
should
never
never
be
be
exposed
exposed
in
in
your
your
front
front
end
end
code
code
or
or
a
a
public
public
GitHub
github
repo.
repo
The
the
secret
secret
is
is
used
used
to
to
identify
identify
your
your
app
app
to
to
a
a
back
back
end
end
server
server
like
like
Node
node
or
or
Firebase
firebase
Cloud
cloud
Functions,
functions
so
so
you
you
can
can
use
use
it
it
to
to
interact
interact
with
with
the
the
API
api
from
from
the
the
back
back
end,
end
but
but
we
we
actually
actually
don't
don't
even
even
need
need
to
to
use
use
it
it
in
in
this
this
demo.
demo
And
and
that's
that's
because
because
you
you
can
can
use
use
PayPal
paypal
checkout
checkout
to
to
do
do
everything
everything
entirely
entirely
from
from
the
the
front
front
end
end
and
and
we'll
we'll
talk
talk
a
a
little
little
bit
bit
more
more
about
about
trade
trade
offs
offs
later
later
in
in
the
the
video.
video
Now
now
we're
we're
going
going
to
to
implement
implement
the
the
same
same
basic
basic
payment
payment
spec
spec
in
in
Angular,
angular
React,
react
and
and
Vue.
vue
And
and
even
even
though
though
each
each
app
app
is
is
solving
solving
the
the
same
same
exact
exact
problem
problem
the
the
implementation
implementation
details
details
vary
vary
widely.
widely
Let's
let's
go
go
ahead
ahead
and
and
get
get
started
started
with
with
my
my
personal
personal
favorite
favorite
and
and
generate
generate
a
a
new
new
Angular
angular
app
app
with
with
the
the
CLI.
cli
The
the
first
first
thing
thing
we'll
we'll
do
do
is
is
go
go
into
into
the
the
index
index
HTML
html
file
file
and
and
include
include
the
the
script
script
tag
tag
for
for
PayPal
paypal
JS.
js
When
when
you
you
include
include
the
the
script
script
tag,
tag
you'll
you'll
also
also
need
need
to
to
pass
pass
in
in
your
your
client
client
ID,
id
and
and
and
and
you
you
wanna
wanna
stick
stick
to
to
the
the
sandbox
sandbox
client
client
ID
id
for
for
now.
now
And,
and
again,
again
you
you
can
can
retrieve
retrieve
that
that
from
from
the
the
PayPal
paypal
developer
developer
dashboard.
dashboard
Now
now
a
a
quick
quick
side
side
note,
note
you
you
might
might
be
be
wondering
wondering
why
why
using
using
a
a
script
script
tag
tag
and
and
not
not
installing
installing
an
an
npm
npm
module.
module
The
the
reason
reason
payment
payment
systems
systems
generally
generally
use
use
script
script
tags
tags
is
is
because
because
they
they
want
want
your
your
site
site
to
to
always
always
have
have
the
the
latest
latest
version
version
of
of
the
the
SDK.
sdk
A
a
security
security
flaw
flaw
on
on
a
a
payment
payment
system
system
is
is
a
a
very
very
big
big
deal,
deal
so
so
they
they
want
want
to
to
make
make
sure
sure
that
that
you're
you're
not
not
running
running
outdated
outdated
code.
code
The
the
next
next
thing
thing
I'll
i'll
do
do
is
is
generate
generate
a
a
component,
component
Then
then
in
in
the
the
top
top
of
of
that
that
component,
component
I'll
i'll
declare
declare
a
a
variable
variable
for
for
PayPal.
paypal
That
that
PayPal
paypal
script
script
creates
creates
a
a
global
global
variable
variable
called
called
PayPal
paypal
that
that
lives
lives
on
on
the
the
window
window
object,
object
and
and
that's
that's
how
how
we
we
make
make
it
it
known
known
to
to
TypeScript.
typescript
The
the
first
first
thing
thing
that
that
PayPal
paypal
needs
needs
to
to
do
do
is
is
mount
mount
the
the
actual
actual
button
button
to
to
the
the
DOM.
dom
So
so
we
we
need
need
to
to
grab
grab
an
an
HTML
html
element
element
that
that
PayPal
paypal
can
can
attach
attach
itself
itself
to.
to
In
in
Angular,
angular
we
we
can
can
do
do
that
that
with
with
the
the
ViewChild
viewchild
decorator
decorator
and
and
then
then
pass
pass
in
in
the
the
name
name
of
of
the
the
template
template
reference
reference
variable,
variable
and
and
we
we
can
can
make
make
that
that
reference
reference
in
in
the
the
HTML
html
with
with
a
a
hashtag.
hashtag
Now
now
in
in
these
these
examples,
examples
we're
we're
just
just
going
going
to
to
hard
hard
code
code
the
the
product
product
data
data
directly
directly
into
into
the
the
components,
components
but
but
in
in
real
real
life
life
you'll
you'll
most
most
likely
likely
be
be
pulling
pulling
this
this
information
information
from
from
an
an
API
api
or
or
a
a
database
database
somewhere.
somewhere
In
in
this
this
example
example
here,
here
we
we
just
just
need
need
some
some
data
data
for
for
the
the
product
product
and
and
then
then
we'll
we'll
set
set
a
a
boolean
boolean
that
that
will
will
tell
tell
us
us
whether
whether
or
or
not
not
that
that
product's
product's
been
been
paid
paid
for.
for
When
when
the
the
component
component
is
is
initial
initial
utilize
utilize
is
is
when
when
we'll
we'll
mount
mount
the
the
PayPal
paypal
button
button
to
to
the
the
DOM
dom
element.
element
So
so
we
we
call
call
PayPal
paypal
buttons
buttons
and
and
then
then
pass
pass
in
in
the
the
native
native
DOM
dom
element
element
to
to
the
the
render
render
method.
method
We
we
can
can
pass
pass
an
an
object
object
to
to
buttons
buttons
that
that
contains
contains
the
the
callbacks
callbacks
used
used
to
to
handle
handle
different
different
events
events
that
that
happen
happen
in
in
the
the
payment
payment
life
life
cycle.
cycle
The
the
first
first
thing
thing
that
that
happens
happens
in
in
the
the
life
life
cycle
cycle
is
is
the
the
user
user
clicks
clicks
on
on
the
the
PayPal
paypal
button,
button
and
and
we
we
need
need
to
to
configure
configure
the
the
order
order
details
details
to
to
send
send
to
to
PayPal
paypal
so
so
they
they
can
can
process
process
the
the
payment.
payment
So
so
we
we
call
call
actions
actions
order
order
create,
create
and
and
we
we
can
can
pass
pass
in
in
a
a
bunch
bunch
of
of
custom
custom
options
options
here,
here
but
but
at
at
the
the
bare
bare
minimum,
minimum
you'll
you'll
want
want
to
to
have
have
at
at
least
least
one
one
purchase
purchase
unit,
unit
and
and
that
that
should
should
at
at
least
least
contain
contain
a
a
description
description
and
and
an
an
amount
amount
with
with
a
a
currency
currency
code.
code
This
this
will
will
send
send
the
the
user
user
over
over
to
to
PayPal
paypal
where
where
they
they
can
can
authorize
authorize
the
the
order.
order
They
they
can
can
check
check
out
out
as
as
a
a
guest
guest
with
with
their
their
credit
credit
card
card
details,
details
or
or
they
they
can
can
use
use
their
their
PayPal
paypal
balance
balance
or
or
some
some
other
other
form
form
of
of
payment
payment
on
on
their
their
account.
account
At
at
this
this
point,
point
the
the
order
order
is
is
authorized
authorized
and
and
approved,
approved
but
but
the
the
actual
actual
funds
funds
have
have
not
not
been
been
captured
captured
yet,
yet
or
or
in
in
other
other
words,
words
the
the
credit
credit
card
card
has
has
not
not
been
been
charged.
charged
For
for
most
most
simple
simple
use
use
cases.
cases
You
you
can
can
simply
simply
capture
capture
the
the
payment
payment
directly
directly
in
in
your
your
front
front
end
end
code
code
by
by
calling
calling
actions
actions
order
order
capture.
capture
Now
now
it's
it's
important
important
to
to
point
point
out
out
that
that
you
you
don't
don't
actually
actually
need
need
to
to
capture
capture
the
the
funds
funds
here
here
if
if
you
you
don't
don't
want
want
to.
to
An
an
alternative
alternative
would
would
be
be
to
to
send
send
the
the
data
data
from
from
this
this
callback
callback
to
to
your
your
back
back
end
end
server
server
and
and
then
then
process
process
the
the
charge
charge
there.
there
And
and
that
that
tends
tends
to
to
be
be
a
a
better
better
option
option
for
for
more
more
advanced
advanced
use
use
cases
cases
where
where
you
you
might
might
need
need
to
to
validate
validate
the
the
payment
payment
and
and
then
then
do
do
additional
additional
back
back
end
end
work
work
after
after
the
the
payment
payment
has
has
been
been
captured.
captured
We're
we're
just
just
going
going
to
to
stick
stick
with
with
the
the
easy
easy
route
route
here
here
and
and
capture
capture
the
the
payment
payment
directly
directly
in
in
Angular,
angular
and
and
then
then
we'll
we'll
set
set
the
the
paid
paid
for
for
property
property
to
to
true.
true
And
and
that's
that's
something
something
that
that
you
you
would
would
obviously
obviously
want
want
to
to
persist
persist
in
in
a
a
back
back
end
end
as
as
well
well
in
in
a
a
real
real
application.
application
And
and
the
the
last
last
thing
thing
I'll
i'll
point
point
out
out
is
is
that
that
there
there
are
are
additional
additional
callbacks
callbacks
we
we
can
can
use
use
here
here
as
as
well.
well
For
for
example,
example
if
if
we
we
want
want
to
to
cache
cache
errors,
errors
we
we
can
can
use
use
on
on
error
error
to
to
do
do
that.
that
That
that
takes
takes
care
care
of
of
our
our
TypeScript
typescript
code.
code
Now
now
we
we
can
can
go
go
over
over
to
to
the
the
HTML
html
and
and
set
set
up
up
our
our
template
template
logic.
logic
We'll
we'll
use
use
n
n
g
g
f
f
to
to
see
see
if
if
the
the
item
item
has
has
not
not
been
been
paid
paid
for,
for
and
and
if
if
not,
not
we'll
we'll
go
go
ahead
ahead
and
and
show
show
the
the
price
price
and
and
product
product
details
details
as
as
well
well
as
as
the
the
PayPal
paypal
button.
button
And
and
if
if
it
it
has
has
been
been
paid
paid
for,
for
then
then
we'll
we'll
just
just
go
go
ahead
ahead
and
and
show
show
an
an
order
order
confirmation.
confirmation
And
and
just
just
like
like
that,
that
we
we
now
now
have
have
a
a
full
full
stack
stack
payment
payment
solution
solution
in
in
Angular.
angular
Now
now
one
one
thing
thing
I
i
really
really
like
like
about
about
PayPal
paypal
is
is
that
that
you
you
can
can
set
set
up
up
multiple
multiple
mock
mock
accounts,
accounts
and
and
then
then
you
you
could
could
add
add
funds
funds
to
to
those
those
mock
mock
accounts
accounts
as
as
well
well
as
as
credit
credit
cards
cards
and
and
bank
bank
accounts
accounts
and
and
things
things
like
like
that.
that
So
so
it
it
makes
makes
it
it
really
really
easy
easy
to
to
test
test
your
your
implementation
implementation
details
details
in
in
the
the
sandbox,
sandbox
and
and
that
that
also
also
makes
makes
it
it
easy
easy
to
to
perform
perform
negative
negative
testing
testing
where
where
you
you
handle
handle
different
different
error
error
conditions.
conditions
In
in
our
our
demo
demo
here,
here
you
you
can
can
see
see
we
we
have
have
a
a
successful
successful
mock
mock
payment,
payment
and
and
then
then
it
it
console
console
logs
logs
the
the
payment
payment
details
details
to
to
the
the
browser.
browser
And
and
you
you
can
can
send
send
this
this
data
data
to
to
your
your
back
back
end
end
to
to
record
record
in
in
a
a
database
database
or
or
send
send
the
the
user
user
formation
formation
email
email
and
and
stuff
stuff
like
like
that.
that
That
that
takes
takes
care
care
of
of
our
our
Angular
angular
integration,
integration
now
now
let's
let's
move
move
on
on
to
to
React.
react
I'll
i'll
use
use
Create
create
React
react
App
app
to
to
generate
generate
a
a
new
new
application,
application
and
and
we'll
we'll
want
want
to
to
build
build
this
this
app
app
the
the
modern
modern
way,
way
so
so
we'll
we'll
go
go
ahead
ahead
and
and
import
import
some
some
hooks
hooks
like
like
use
use
state,
state
use
use
ref,
ref
and
and
use
use
effect.
effect
Now
now
including
including
a
a
script
script
tag
tag
in
in
React
react
isn't
isn't
quite
quite
as
as
easy
easy
as
as
it
it
is
is
in
in
Angular,
angular
and
and
we
we
need
need
to
to
manually
manually
create
create
the
the
script
script
and
and
then
then
append
append
it
it
to
to
the
the
Dom.
dom
So
so
we
we
have
have
2
2
different
different
pieces
pieces
of
of
state.
state
The
the
first
first
one
one
paid
paid
for
for
will
will
tell
tell
us
us
whether
whether
or
or
not
not
the
the
product
product
has
has
been
been
paid
paid
and
and
then
then
we'll
we'll
have
have
a
a
loaded
loaded
state
state
that
that
will
will
tell
tell
us
us
when
when
the
the
actual
actual
PayPal
paypal
script
script
has
has
been
been
loaded.
loaded
And
and
if
if
you
you
know
know
of
of
a
a
better
better
way
way
to
to
do
do
this
this
with
with
React
react
Hooks,
hooks
let
let
me
me
know
know
in
in
the
the
comments.
comments
Then
then
we'll
we'll
also
also
use
use
the
the
useRef
useref
hook
hook
so
so
we
we
can
can
set
set
up
up
a
a
reference
reference
to
to
a
a
DOM
dom
element
element
that
that
the
the
actual
actual
PayPal
paypal
button
button
can
can
be
be
mounted
mounted
to.
to
Now
now
at
at
this
this
point,
point
I'm
i'm
going
going
to
to
jump
jump
into
into
the
the
JSX
jsx
and
and
build
build
out
out
the
the
template.
template
This
this
follows
follows
the
the
same
same
general
general
structure
structure
that
that
we
we
saw
saw
in
in
Angular.
angular
If
if
the
the
item
item
has
has
been
been
paid
paid
for,
for
then
then
we'll
we'll
show
show
the
the
confirmation.
confirmation
Otherwise,
otherwise
we'll
we'll
go
go
ahead
ahead
and
and
show
show
the
the
actual
actual
product
product
details
details
and
and
the
the
payment
payment
button.
button
And
and
to
to
grab
grab
an
an
empty
empty
div
div
from
from
the
the
dom
dom
for
for
the
the
button,
button
we'll
we'll
go
go
ahead
ahead
and
and
use
use
that
that
reference
reference
that
that
we
we
defined
defined
with
with
the
the
use
use
ref
ref
hook.
hook
Now
now
the
the
next
next
thing
thing
we
we
need
need
to
to
do
do
is
is
get
get
the
the
actual
actual
PayPal
paypal
JS
js
script
script
into
into
our
our
code.
code
We
we
can
can
do
do
that
that
imperatively
imperatively
in
in
the
the
useEffect
useeffect
hook
hook
and
and
then
then
we'll
we'll
define
define
the
the
script
script
source
source
as
as
the
the
same
same
source
source
that
that
we
we
used
used
in
in
the
the
Angular
angular
app.
app
But
but
this
this
time
time
we
we
want
want
to
to
add
add
an
an
event
event
listener
listener
to
to
the
the
load
load
event
event
and
and
then
then
when
when
it's
it's
finished
finished
loading
loading
will
will
set
set
the
the
loaded
loaded
property
property
to
to
true
true
on
on
this
this
React
react
component.
component
Once
once
we
we
know
know
that
that
the
the
script's
script's
been
been
loaded,
loaded
we
we
can
can
then
then
initialize
initialize
our
our
PayPal
paypal
button.
button
But
but
for
for
whatever
whatever
reason,
reason
I
i
had
had
to
to
wrap
wrap
this
this
in
in
a
a
set
set
time
time
out
out
because
because
there
there
seems
seems
to
to
be
be
some
some
weird
weird
issue
issue
between
between
one
one
of
of
the
the
dependencies
dependencies
in
in
PayPal
paypal
JS
js
and
and
React,
react
but
but
feel
feel
free
free
to
to
submit
submit
a
a
pull
pull
request
request
if
if
you
you
have
have
a
a
good
good
workaround
workaround
for
for
this
this
demo.
demo
Now
now
at
at
this
this
point,
point
we
we
can
can
access
access
PayPal
paypal
from
from
the
the
window
window
object,
object
and
and
then
then
we'll
we'll
have
have
the
the
exact
exact
same
same
code
code
that
that
we
we
wrote
wrote
previously
previously
in
in
the
the
Angular
angular
example.
example
The
the
only
only
difference
difference
is
is
that
that
we're
we're
using
using
React
react
Hooks
hooks
to
to
update
update
estate
estate
and
and
to
to
grab
grab
the
the
DOM
dom
element
element
to
to
mount
mount
the
the
actual
actual
button
button
itself,
itself
and
and
that's
that's
all
all
it
it
takes
takes
to
to
get
get
started
started
with
with
React.
react
And
and
if
if
you
you
check
check
out
out
the
the
PayPal
paypal
JS
js
repo,
repo
you'll
you'll
see
see
an
an
example
example
for
for
React
react
in
in
there
there
as
as
well,
well
but
but
it
it
doesn't
doesn't
use
use
hooks.
hooks
But
but
enough
enough
of
of
React,
react
let's
let's
go
go
ahead
ahead
and
and
move
move
on
on
to
to
Vue.
vue
We
we
can
can
start
start
by
by
generating
generating
a
a
new
new
Vue
vue
app
app
with
with
the
the
Vue
vue
CLI,
cli
and
and
then
then
we'll
we'll
start
start
by
by
defining
defining
the
the
template
template
because
because
it's
it's
conveniently
conveniently
located
located
at
at
the
the
top
top
of
of
the
the
file.
file
The
the
template
template
logic
logic
is
is
very
very
similar
similar
to
to
Angular
angular
because
because
Vue
vue
also
also
uses
uses
directives.
directives
So
so
again,
again
we'll
we'll
show
show
the
the
item
item
details
details
if
if
the
the
item
item
is
is
not
not
paid
paid
for,
for
and
and
then
then
if
if
it
it
is
is
paid
paid
for,
for
we'll
we'll
show
show
the
the
order
order
information.
information
And
and
then
then
we'll
we'll
also
also
make
make
a
a
reference
reference
to
to
an
an
empty
empty
div
div
with
with
a
a
ref
ref
of
of
PayPal.
paypal
The
the
next
next
thing
thing
we'll
we'll
do
do
is
is
define
define
the
the
data
data
for
for
this
this
component
component
which
which
is
is
exactly
exactly
the
the
same
same
as
as
React,
react
but
but
instead
instead
of
of
hooks,
hooks
we
we
use
use
a
a
data
data
function
function
that
that
returns
returns
an
an
object
object
with
with
the
the
data
data
that
that
we
we
use
use
in
in
this
this
component,
component
and
and
Vue
vue
will
will
react
react
automatically
automatically
if
if
we
we
change
change
any
any
of
of
the
the
properties
properties
on
on
this
this
object.
object
The
the
next
next
thing
thing
we'll
we'll
do
do
is
is
append
append
the
the
PayPal
paypal
script
script
to
to
this
this
application
application
in
in
the
the
mounted
mounted
life
life
cycle
cycle
hook.
hook
This
this
is
is
the
the
exact
exact
same
same
thing
thing
we
we
did
did
in
in
the
the
use
use
effect
effect
hook
hook
with
with
React.
react
When
when
the
the
script
script
is
is
loaded,
loaded
we'll
we'll
have
have
access
access
to
to
the
the
global
global
PayPal
paypal
object,
object
and
and
then
then
we'll
we'll
mount
mount
it
it
to
to
that
that
empty
empty
div
div
that
that
we
we
made
made
a
a
reference
reference
to
to
earlier.
earlier
From
from
there
there
the
the
callbacks
callbacks
will
will
be
be
the
the
same
same
as
as
the
the
previous
previous
examples
examples
where
where
we
we
first
first
create
create
the
the
order
order
and
and
then
then
we
we
capture
capture
the
the
order
order
and
and
handle
handle
any
any
errors
errors
if
if
necessary.
necessary
And
and
and
and
that's
that's
all
all
it
it
takes
takes
to
to
implement
implement
PayPal
paypal
in
in
a
a
Vue
vue
app.
app
Well,
well
that
that
was
was
easy.
easy
Yeah,
yeah
I
i
guess
guess
it
it
was.
was
My
my
goal
goal
with
with
these
these
three
three
examples
examples
was
was
to
to
show
show
you
you
how
how
easy
easy
it
it
is
is
to
to
start
start
monetizing
monetizing
your
your
progressive
progressive
web
web
app,
app
but
but
if
if
you
you
want
want
to
to
learn
learn
more
more
advanced
advanced
techniques,
techniques
consider
consider
becoming
becoming
a
a
pro
pro
member
member
to
to
enroll
enroll
in
in
the
the
Stripe
stripe
Payments
payments
Master
master
Course.
course
You'll
you'll
learn
learn
how
how
to
to
build
build
and
and
test
test
a
a
reliable
reliable
payment
payment
system
system
that
that
can
can
work
work
with
with
any
any
front
front
end
end
framework.
framework
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
talk
talk
to
to
you
you
soon.
soon
success
The PayPal API release allows for easy payments through the front end of an app and integrates with various platforms. Payment information is easily processed through a script tag and a component in the front end. The speaker provides instructions on how to access and process payment information and explains the use of a script tag and a component in the front end. They also provide instructions on how to use the app in React and explain how to access a reference for a referral. The speaker concludes by reminding the audience to consider becoming a pro member to enroll in the Stripe Payments Master Course.
PayPal Checkout 2.0 - Monetize React, Angular, & Vue Quickly
Version 2 of the PayPal API was released earlier this year and it makes it extremely easy to start accepting payments from your progressive web app. It's so easy, in fact, that I can show you how to integrate it into Angular, React, and Vue in a single video. Dollar, dollar bills, y'all. In today's video, you'll learn the basics of the PayPal version 2 API, and how to start start accepting and capturing real payments from your front end JavaScript app, and it's a lot easier than you might think. If you're new here, like and subscribe, and you can find the full source code on FireShip IO. Now just Say a few days ago, I implemented PayPal payments on Fireship, and also added the ability to purchase individual courses. So ironically, you can now use PayPal to pay for my Stripe payments course if you want. Now, during this integration, I learned that PayPal 2.0 delivers a really nice developer experience. They've completely revamped the documentation and the API in a way that resembles Stripe payments. Now in my case, I already have Stripe implemented, so I'm using PayPal alongside it as an additional option, but you can actually use PayPal as a stand alone payment solution to accept credit cards, Venmo, crypto, and more. What we'll be looking at today is PayPal checkout, which allows you to mount this payment button directly in your application, and it will take care of collecting payment details from the user and can also capture and charge the payment entirely from the front end. The first thing you'll need to get started is a PayPal Business account. From there, you can go to the PayPal developers dashboard, and the first thing we'll want to do is create an application. When you create this application, it will give you 2 sets of API keys. The sandbox keys are used to make mock payments and to test your integration, and the live keys are used for actual payments in your production app. Now each of these environments contains 2 API keys, the client ID and the secret. The client ID is perfectly safe to expose in your front end application, and we'll use that client ID in the Angular, React, and Vue apps. The secret on the other hand should never be exposed in your front end code or a public GitHub repo. The secret is used to identify your app to a back end server like Node or Firebase Cloud Functions, so you can use it to interact with the API from the back end, but we actually don't even need to use it in this demo. And that's because you can use PayPal checkout to do everything entirely from the front end and we'll talk a little bit more about trade offs later in the video. Now we're going to implement the same basic payment spec in Angular, React, and Vue. And even though each app is solving the same exact problem the implementation details vary widely. Let's go ahead and get started with my personal favorite and generate a new Angular app with the CLI. The first thing we'll do is go into the index HTML file and include the script tag for PayPal JS. When you include the script tag, you'll also need to pass in your client ID, and and you wanna stick to the sandbox client ID for now. And, again, you can retrieve that from the PayPal developer dashboard. Now a quick side note, you might be wondering why using a script tag and not installing an npm module. The reason payment systems generally use script tags is because they want your site to always have the latest version of the SDK. A security flaw on a payment system is a very big deal, so they want to make sure that you're not running outdated code. The next thing I'll do is generate a component, Then in the top of that component, I'll declare a variable for PayPal. That PayPal script creates a global variable called PayPal that lives on the window object, and that's how we make it known to TypeScript. The first thing that PayPal needs to do is mount the actual button to the DOM. So we need to grab an HTML element that PayPal can attach itself to. In Angular, we can do that with the ViewChild decorator and then pass in the name of the template reference variable, and we can make that reference in the HTML with a hashtag. Now in these examples, we're just going to hard code the product data directly into the components, but in real life you'll most likely be pulling this information from an API or a database somewhere. In this example here, we just need some data for the product and then we'll set a boolean that will tell us whether or not that product's been paid for. When the component is initial utilize is when we'll mount the PayPal button to the DOM element. So we call PayPal buttons and then pass in the native DOM element to the render method. We can pass an object to buttons that contains the callbacks used to handle different events that happen in the payment life cycle. The first thing that happens in the life cycle is the user clicks on the PayPal button, and we need to configure the order details to send to PayPal so they can process the payment. So we call actions order create, and we can pass in a bunch of custom options here, but at the bare minimum, you'll want to have at least one purchase unit, and that should at least contain a description and an amount with a currency code. This will send the user over to PayPal where they can authorize the order. They can check out as a guest with their credit card details, or they can use their PayPal balance or some other form of payment on their account. At this point, the order is authorized and approved, but the actual funds have not been captured yet, or in other words, the credit card has not been charged. For most simple use cases. You can simply capture the payment directly in your front end code by calling actions order capture. Now it's important to point out that you don't actually need to capture the funds here if you don't want to. An alternative would be to send the data from this callback to your back end server and then process the charge there. And that tends to be a better option for more advanced use cases where you might need to validate the payment and then do additional back end work after the payment has been captured. We're just going to stick with the easy route here and capture the payment directly in Angular, and then we'll set the paid for property to true. And that's something that you would obviously want to persist in a back end as well in a real application. And the last thing I'll point out is that there are additional callbacks we can use here as well. For example, if we want to cache errors, we can use on error to do that. That takes care of our TypeScript code. Now we can go over to the HTML and set up our template logic. We'll use n g f to see if the item has not been paid for, and if not, we'll go ahead and show the price and product details as well as the PayPal button. And if it has been paid for, then we'll just go ahead and show an order confirmation. And just like that, we now have a full stack payment solution in Angular. Now one thing I really like about PayPal is that you can set up multiple mock accounts, and then you could add funds to those mock accounts as well as credit cards and bank accounts and things like that. So it makes it really easy to test your implementation details in the sandbox, and that also makes it easy to perform negative testing where you handle different error conditions. In our demo here, you can see we have a successful mock payment, and then it console logs the payment details to the browser. And you can send this data to your back end to record in a database or send the user formation email and stuff like that. That takes care of our Angular integration, now let's move on to React. I'll use Create React App to generate a new application, and we'll want to build this app the modern way, so we'll go ahead and import some hooks like use state, use ref, and use effect. Now including a script tag in React isn't quite as easy as it is in Angular, and we need to manually create the script and then append it to the Dom. So we have 2 different pieces of state. The first one paid for will tell us whether or not the product has been paid and then we'll have a loaded state that will tell us when the actual PayPal script has been loaded. And if you know of a better way to do this with React Hooks, let me know in the comments. Then we'll also use the useRef hook so we can set up a reference to a DOM element that the actual PayPal button can be mounted to. Now at this point, I'm going to jump into the JSX and build out the template. This follows the same general structure that we saw in Angular. If the item has been paid for, then we'll show the confirmation. Otherwise, we'll go ahead and show the actual product details and the payment button. And to grab an empty div from the dom for the button, we'll go ahead and use that reference that we defined with the use ref hook. Now the next thing we need to do is get the actual PayPal JS script into our code. We can do that imperatively in the useEffect hook and then we'll define the script source as the same source that we used in the Angular app. But this time we want to add an event listener to the load event and then when it's finished loading will set the loaded property to true on this React component. Once we know that the script's been loaded, we can then initialize our PayPal button. But for whatever reason, I had to wrap this in a set time out because there seems to be some weird issue between one of the dependencies in PayPal JS and React, but feel free to submit a pull request if you have a good workaround for this demo. Now at this point, we can access PayPal from the window object, and then we'll have the exact same code that we wrote previously in the Angular example. The only difference is that we're using React Hooks to update estate and to grab the DOM element to mount the actual button itself, and that's all it takes to get started with React. And if you check out the PayPal JS repo, you'll see an example for React in there as well, but it doesn't use hooks. But enough of React, let's go ahead and move on to Vue. We can start by generating a new Vue app with the Vue CLI, and then we'll start by defining the template because it's conveniently located at the top of the file. The template logic is very similar to Angular because Vue also uses directives. So again, we'll show the item details if the item is not paid for, and then if it is paid for, we'll show the order information. And then we'll also make a reference to an empty div with a ref of PayPal. The next thing we'll do is define the data for this component which is exactly the same as React, but instead of hooks, we use a data function that returns an object with the data that we use in this component, and Vue will react automatically if we change any of the properties on this object. The next thing we'll do is append the PayPal script to this application in the mounted life cycle hook. This is the exact same thing we did in the use effect hook with React. When the script is loaded, we'll have access to the global PayPal object, and then we'll mount it to that empty div that we made a reference to earlier. From there the callbacks will be the same as the previous examples where we first create the order and then we capture the order and handle any errors if necessary. And and that's all it takes to implement PayPal in a Vue app. Well, that was easy. Yeah, I guess it was. My goal with these three examples was to show you how easy it is to start monetizing your progressive web app, but if you want to learn more advanced techniques, consider becoming a pro member to enroll in the Stripe Payments Master Course. You'll learn how to build and test a reliable payment system that can work with any front end framework. Thanks for watching, and I will talk to you soon.
The PayPal API release allows for easy payments through the front end of an app and integrates with various platforms. Payment information is easily processed through a script tag and a component in the front end. The speaker provides instructions on how to access and process payment information and explains the use of a script tag and a component in the front end. They also provide instructions on how to use the app in React and explain how to access a reference for a referral. The speaker concludes by reminding the audience to consider becoming a pro member to enroll in the Stripe Payments Master Course.