Hi Friends Welcome back to Angular - Hero to Super Hero
series. If you are a beginner, trying to learn angular,
there is another series, Angular - Zero to Hero. In which, I have explained all the basic concepts. You can find the link in the description. In this Angular series - Hero to Super Hero,
I am focusing on advanced concepts. In this video, I am going to show you how
we can integrate a payment gateway in Angular. Let's start. To explain this, I have created a simple angular
application, in which I have created a cart page. Here I have hardcoded two products. But, I have made this part dynamic. So, if I increase the quantity, based on that
and the unit price, the subtotal and the total amount changes. And on clicking this, user can proceed to
the payment page. In the payment page, total amount to pay will
be displayed and then a message. After that, we need to show a payment button. That is what we are going to implement. And then, a cancel button. On clicking this, the user can go back to
the cart page. Ideally, I need to maintain this changed quantities
in some kind of state and retrieve that on init of this component, but as this is a demo
for payment integration, I am not maintaining that. So every time, when I come to this page, the
quantities will be re-initialized. And, when the user transaction is completed
successfully, we need to route the user to this confirmation page. Here we need to show the transaction Id. Ok, let's start integrating the payment gateway. And, for this demo, we are going to integrate
paypal. To integrate paypal in angular, we have third
party libraries like ngx paypal. But I would suggest you to implement on your
own without third party libraries. It is easy to implement. As a first step, we need to go to developer
dot paypal dot com. Here we need to click this login to dashboard
button. And then sign up. We need to register for a business account. Just follow the onscreen information to register. First you need to register for an account. You may be asked to complete the email verification
also. After that, you can come back here and login. Ok. I have already created an account and so let
me login. Here, you can see you will be provided with
two sandbox accounts. One is personal account and another one is
business account. Now, you can click this apps and credentials
link. Here, you can create an app. Give a name for the app and then choose merchant. The sandbox business account should be selected
and we can create the app. App is getting created. And it is created now. Here we can see the client ID. This is what we need. Let's copy this. Now, let's go to our index dot html. Here, let's create a script tag in which the
source is going to be https colon double slash www dot paypal dot com slash sdk slash js
question mark currency equal to we can give any currency supported by paypal. You can find the supported currency list in
the paypal developer website. For now, let me give USD and then ampersand
client hyphen id equal to, here we can paste our client id. That's it. Now, paypal is integrated. We need to write the codes to interact with
paypal. Let's do that. We need to show the paypal payment button
in between this message and cancel button. For that, let's create a div. And, we need to access this div in the ts
file. For that, let me add a template reference
variable. And in the ts file, let me use ViewChild to
access this template reference variable. This is going to be an elementRef. Now comes the important part. While loading this page, we need to load the
paypal payment button inside this div and also we need to define what should happen
when the button is clicked and what should happen when the transaction is approved or
rejected. We have already integrated paypal and so this
is going to give us a global variable paypal through which we can access the paypal button
functionality. But to access this global variable, we need
to create a typescript declaration file called global dot d dot ts. We need to create this file inside the source
folder. And in this file, lets declare paypal globally. Now, we can access paypal from window, like
this. Here, we can see there is a buttons constructor. Let's call that and then let's use the render
method to render this button inside this div element, that means this dot payment ref dot
native element. Like this. Now, we can see the paypal buttons are showing
up. Let's pass a style object to change the styles
of the buttons. Ok, this is what we want. Now, we can click this to go to the paypal
payment page. Here we can click the pay with credit or debit
card button to go to this page. Here we can see the amount is not correct
and also, we haven't written any code to handle the result of the transaction. Let's do that. First let's make use of the create order function,
which accepts two parameters data and action and then it returns actions dot order dot
create, to this function, we need to pass an object which has a purchase units object
array. Each purchase unit should have an amount object
with a value and currency code properties. For value, let me give this dot amount dot
to string, because this value is going to a string and then currency code is going to
be USD. And then, let me handle what should we do
when the transaction is approved. For that, let me have the onApprove function,
which also accepts two parameters, data and actions and then it returns actions dot order
dot capture function which is going to return a promise. Let me resolve that and let me print the response
for now. Let me also handle what should we do on transaction
failure or error. Actually, we can route the user to an error
page saying the transaction is declined. But for now, let me just console log the error. Ok, let's test this. Now, we can see the amount is reflecting here
correctly. And, to test this, we can generate a dummy
credit card. For that, we can use the option provided by
paypal. Let's go to tools and then credit card generator. And, let me click generate credit card. And let me use this credit card details. Let me change the country. Let me give an email and a dummy mobile number
and then the credit card details. Let me give the address too. I can give a dummy address. And, we don't want to save this information
and so let me toggle this and let me click this button. We can see the payment is in progress. Ok, it is done. Now, if I open the console, we can see the
transaction id and the status. So, instead of printing this, let me check
whether the status is completed, if so, let me get the id and store that in the payment
service. For that let me inject the payment service
first and then let me store this. And then, let me also navigate the user to
the confirmation page. And in the confirmation page, let me inject
the payment service and in onInit, let me get the transaction id and assign it to this
variable. Ok, let's test now. This time, let me generate a new credit card. Ok, now we can see after successful transaction,
we are redirected to this confirmation page and here we can see the transaction Id. And so, our payment integration is working. This is how we can integrate paypal payment
in an angular application. That's all for today. Please like this video, subscribe to my channel
and support me. I will be back with another concept soon. Thank you. Bye.
