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

Key Takeaways

version two of the paypal api was released earlier this year and it makes the 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 view in a single video dollar dollar bill y'all in today's video you'll learn the basics of the paypal version two API and how to 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 fire ship io now just a few days ago I implemented PayPal payments on fire ship and also added the ability to purchase individual courses so ironically you can now use PayPal to pay for my strength 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 standalone payment solution to accept credit cards venmo crypto and more well we'll be looking at today as 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 you'll want to do is create an application when you create this application it will give you two sets of API keys these sandbox keys are used to make mock payments and to test your integration and live keys are used for actual payments in your production app now each of these environments contains two 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 view apps the secret on the other hand should never be exposed in your front-end code or a public github repo a 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 backend 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 the trade-offs later in the video now we're going to implement the same basic payment spec in angular reactant view 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 XHTML file and include the script tag for paypal Jas when you include the script tag you'll also need to pass in your client ID and you want to 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 we're 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 view child decorator and then pass in the name of the template reference variable and we can make that reference in the HTML with a hash tag 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 products been paid for when the component is initialized 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 lifecycle the first thing that happens in the lifecycle is the user clicks on the PayPal button and we need to configure the order details to send a paypal so they can process the payment so we call actions or to 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 the call back 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 backend work after the payment has been captured we're just going to stick with the EZ wrap here and capture the payment directly an 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 catch 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 ng if 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 at 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 a user a confirmation 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 you state use ref and use a fact now including a script tag and react isn't quite as easy as it is an angular and we need to manually create the script and then append it to the Dom so we have two different pieces of state the first one paid for will tell us whether or not the product has been paid for 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 use ref hooks 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 fall is 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 J script into our code we can do that imperative Lee in the use effect 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 scripts been loaded we can then initialize our paypal button but for whatever reason I had to wrap this in a set timeout because there seems to be some weird issue between one of the dependencies in PayPal Jas 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 the state 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 J's 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 view we can start by generating a new view app with the view 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 view 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 confirmation 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 view 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 and they 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 that's all it takes to implement paypal in a view 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 [Music]