Build a Paypal Payment Gateway in Node.js & Express to Sell Digital Goods as Attachment in Browser

uh hello guys welcome to this video so in this video we will try to integrate Paypal payment Gateway inside your

nodejs and express application right in the browser itself so we will try to sell digital Goods after the user has

made the payment and they will be automatically be redirected to the download page where you can download any

digital good let's suppose you're are downloading a PDF file image file any source code that you are selling so it's

still a complete tutorial so let me just start from scratch and if I open this inside incognito window and if I open

the homepage of the application Local Host

8,000 so now you will actually see the homepage of PayPal and here you will be

allow to the user to let me just open the zoomit application so that I can

show you so now you can see we have used tailin CSS this is our pay pay with

PayPal button and this is actually the homepage so as you click this button you

will be redirected to PayPal so here you need to enter the email address and

password so I'm here inside sandbox mode we are in testing mode so PayPal does

provide you with the test email accounts so one such email account you can create

inside ppal dash dashboard so I've already created this let me show

you how to pay so I basically providing a PayPal sandbox

account and then next and here you need to provide the password so I will simply

paste the password right here and log in so now it will have your virtual wallet

and you will basically see $1 the payment amount is that and it will translate this to your local currency

and it will simply continue to review order so once you make the payment you will be

redirected to the download page so here you will see we have this download page

and now the user can simply download their file so this is actually the PDF file that we are selling so once they do

this they can view the digital product which is actually a PDF file

so let's suppose the user

actually so let me show you the second scenario let's suppose the user pays and

uh once they make the payment let me just show you with the same email

address so once they make the payment they will be redirected to the download

page but before that if you want to directly go to that route if I go to this route I can't access it

download you can just see it will redirect me to the pay payment page I can't access without payment I can't go

to slash download that route is protected so once you make the payment

after that automatically you will be redirected to the download page where you can simply download your digital

product so now you can just see that now we are successfully redirected to the download page so here we can simply

download the file so let's suppose if you close the tab for some reason let's suppose accidentally the user closed

this tab you can even go to the same page if you open the homepage right here

it will detect that the user has made the payment it will store that information in the session variable and

you will be redirected to the login uh download page automatically so the application will automatically

redirected to so so this information is saved in the session variable so again

if you close it if you try to access it you will be redirected to the download page so this is really useful because we

don't want the user to access accidentally if they close the tab still

if they visit the website they will be redirected the application will detect that the user has made the payment and

that's why it will be showing the download page and I I'm just selling

this PDF file you can just sell anything you just need to move this in the public

folder so instead of this you can sell any digital good so now let me show you

the this one PayPal account from which we are actually buying it so this is actually a Sandbox account so you can

just see it actually tells you from which store you are buying so John do test store and $1 you can just click on

this transaction to get more additional information about this transaction such as uh which Visa card that you are using

which uh this is a seller information email address purchase details so everything is there and also if you want

to view the business account from which the merchant account you are selling it this is actually the sandbox account for

the merchant so here once you get that uh payment you will get a notification

that you got the payment from this person which is of $1 so let's suppose if I change the code here let me change

the price let me change the person name to show you so here you can customize

everything you can change the item name price as well let's suppose instead of $1 let me make it $100 and you can even

change a currency as well so PayPal supports I think 15 to 20 currencies around the world you

can uh do this change the currency as well and uh you can change the

description about the product you can change the let's suppose if I show

source code I change the name

here so so if I make this change right here and once again try to purchase it

and if I open the same route Local Host [Music] 8,000 click on this

button some error is there uh invalid

request okay whenever you are providing your or I think

this okay this needs to be item this is actually a name

property so whatever you are selling you need to change this

information I have just changed the price here from $1 to

$100 so here we need to go to the index. HTML file so whatever you are selling

here you need to change

it uh I think let me make this change right here

and refresh

uh guys I figured out the error the error was pretty simple so right here if you are changing the price let's suppose

I changed it from 1 to 100 so this will be the name here you can just change it

so source code of app so right here inside the amount object

here also this Total Property needs to be changed so this is actually the price that you have said 100 you also need to

change it here also from 1 to 100 and right at the bottom side you have the

success call back here also the amount is there you need to change the total property so whatever the price that you

are setting you need to set the total property to be like this so now if you make this change and again if you try

to buy this if I open

this so click on that and here you again need to log in with your details so let

me copy the email address paste it and then if I paste the

password as well so now you will see instead of $1

we will be charging the user $100 you will see that price is changed and click on continue so once

you continue you will see you will be redirected to the download page and now

you can download your digital good save it so if you now see the

account right here if I show

you we again need to there is a personal account this is a business account so

you need to go to this URL sandbox

paypal.com so instead of for $1 it will be

charging you can log in with this details so

here so these are the different accounts are there let me log in with the business

account so after some time you will be log out automatically so you again need

to login with your details so this is actually the business account

here and uh I just need to paste the password right

here so you can just see you are currently in sandbox

mode

for e

so now if you see guys you will see you have been charged this is the business

account you have been getting this payment here of $100 from this user

joho so now if you see the price has been changed same goes with the personal

account as well if you log in with these details if you go to this uh URL

login with this email

address and this is actually the

password so now if you see $100 has been cut

so if you want to see more additional information about it is transaction so you will actually see the price you will

see the title of the app is product is been changed from source

code of app and we are charging 100 down so all this is customizable in the code

and I will be showing you in this video step by step on how to integrate PayPal inside your app to actually sell this

digital good so all the source code is given in the description of this video

you can go to my website Pro Cod store.com and directly purchase the full source code of this application so a zip

file will be there after you make the payment you will be getting the zip file from Google Drive so this will actually

have the nodejs express code and also the HTML code as well so full directory

structure will be available the link is given in the description so now let's get started by building this application

uh now to get started guys we are starting it from scratch if you see no file is present so first of all we do

need to initialize the the package.json file by npm n-y so simply execute this and you will

actually see a package.json file will be created with the default options now we

need to install some modules so first module we need to install is

Express which will be the backend server which we will be writing the application

Express and second we will need to install payal rest sdga so we are

integrating PayPal right here so this actually has PayPal functionality so just install

this module as well payal rest SDK and then we also need to

install Express session so Express session will handle

the session details for us so once the user makes the payment we will actually store all that information in the

session so that the user can download the digital product after that so this is required

that's all that is required for this application these three dependencies so simply install them so now we will

actually create a index.js file so this will actually be the

starting point of the application so we need to require the express you need to make a simple

Express app and start that application on port

number

5,000 server is listing on Port

5,000 now we also need to make a public directory where we will be storing all

the static assets so just make a index. HTML file right here which will be the

file that we will show to the user so also include the path module as well

which is a built-in module and now whenever the user goes to the homepage we will simply

say we will show the index. HTML file so you'll simply say response. send file

path.

join index. HTML so whenever users goes to the homepage we are showing this

index. HTML file so here we can simply sh payal login

page so if you need to start this application simply nodeb index.js it

will start this on Local Host 5000 if you try to go to it to look

something no such file or directory okay it is present in the public

directory so we do need to write here public and then index.

HTML in single codes because it is present in the public directory so we do

need to do this now you can see PayPal is showing so we are on the

homepage so now we need to construct this homepage and for this we will be

making use of Tailwind CSS so this will be really

simple instead of this H1 tag just delete this

and we will be including the CDN link for Tailwind CSS so we have

included this so after this we need to Simply say class Flex items Center

justify Center minimum height

screen and background color of gray

100 so inside the div we will have a background of

white padding will be six and it will be rounded it will have a shadow of medium

and it will be placed in the center position and we will have an H1 tag right

here text 2 XEL font bold margin bottom

four you will say that Pap payments page so if you refresh now it will look

something like this right in the center position so after this we will have a

simple paragraph

we'll simply say that click the button below to make a payment with

payal so after this we will have a simple anchor tag which will redirect

the user to the HTTP Local Host 5,000 SL

payment route and it will have a simple class of

BG blue 500 text color will be white padding X

in the four padding in the y direction to rounded

Shadow so when we hover onto this the color will change BG blue 600

so we do need to actually add a label to it to this anchor tag we will simply say

pay with

payal so you can just see this is actually the homepage is ready now if I click this button I will be redirected

to this payment route so we do need to create this route so go to index.js so right here

we need to create this payment route but before creating it we do need to configure

payal so for configuring payal we do need to include this

dependency we need to require it which is payal rest s and uh this module expects a client ID

and a client secret right here we can simply say paypal. configure

and this takes an object first property is takes as a mode so if you are in live

mode of sandbox so we are on sandbox mode so you'll provide sandbox and then it takes the client

ID and the client secret so these two information you need to get this from

your payer dashboard I will show you how to get this it's very simple so now you

need to go to this address which is papal developer dashboard so just write

this on Google and just go to it and you will be redirected to so you

will be in sandbox mode by default so then you need to go to this option which

is apps and CR credentials and here you need to create a brand new app by

default this default application will be created so you can create a brand new app by clicking this button create app

so now you can create app so you can give a app name as well

but before creating an app you need to create a Sandbox account so right

here there is an option of testing tools right here and you will see this sandbox

accounts you do need a business account and a personal account here so go to the sandbox accounts and uh by default two

accounts will be created by default so if you want to create a brand new

Sandbox account click on this create account option and here you need to select either it can be personal or a business

account merchant account or buyer account so we need to create a business account so here you can select your

country as well so I will select the country and click

on create account so now it will create a business sandbox account you will see

it has been created successfully so this is my account right here

SP similarly we can create a personal account as

well just need to refresh

it now the personal account is selected

so now if you see uh a personal account is also been created so we have created

this now at time of creating an application you can give this anything let's suppose testing

app so by default this needs to be selected with is which is Merchant because you will be selling the digital

goods and now you can select the your

business account that you have created this is sp

spgw you need to refresh it for that to show

up so now if you see our account which we have created is showing up so you

need to select that business account and then give it a name testing app

click on create app and now it will give you that client ID and client

secret so make sure that you select the same business account that you have created in which you will be accepting

payments now it will give you this client ID and client secret this will be different for you so don't copy my

information so paste similarly this client secret as

well so after getting both this information now we can

actually write the code for the payment and also we do need to initialize the

session as well session if you want to store the

information of the payment so this package express session that we

installed so now to set up this it takes some options uh you need to pass it as a

middleware so once we initialize the express app you can after this we can use it as a middleware app.use function

so you can say that uh session you can see session variable

you're passing it and it takes some options first option is take is the secret key this can be anything any

value let me just type secret key the second option is take a resave this is a

Boolean parameter set it to false save uninitialized it's also a Boolean

parameter the default value is true and the cookie so this is actually how much seconds you

need to store it so secure fall simply means that

store this information unlimited number of time so this is actually the session is

initialized with these default options now we can actually write that uh

request SL payment so once the user clicks that button this

request will be executed it will be a get request SL

payment uh this will actually be a Asing function request

response and here we need to create a Json payment object so inside this

object we will have different details about the product such as the information the details so intent

property is actually sale because we do need to make a sale put a comma and then

we need to provide the information about the pairer so what payment method the user

will be selecting so we will simply be selecting the Paypal payment method the

third property will be the redirect URLs property so this property here you

need to set the two properties here return URL so this means that if the

payment is successful then payal redirect to which page so you can create

a success page so we can create a success route right here similarly if

the payment is for some reason is not completed in that case this will be

redirected to we can create a failed route

so this is really simple information so if the payment is successful it will be redirected to this route if the payment

is not successful this will be redirected to the failed route the next property is the information related to

transaction transaction object this needs to be in double quotes

because it's a Json object transactions this will be a array of

object this is also in double quotes just make sure it's a Json not

JavaScript so inside this you need to provide whichever item that you're

selling so item list object is

there and it will contain a items array each item has its own property

such as name quantity how much quantity that you're selling so I will simply say this is source code of app

and then we'll say SQ which is item and here is the price how much

price that you're selling so let me make it uh $500 US so here you need to provide the

currency as well USD and then the quantity so if you're selling more quantities you can just

select but we are selling only one quantity so quantity will be one

so after you do this put a

comma so this is the item list is complete and then it takes the amount

object so here also it basically have two properties first is

the currency property which will be USD same currency that you selected and a

total property so this total property will be 500 because we are only selecting one quantity right here let's

suppose if you have selling two quantities so the total will be $1,000 so that's why you just need to

make sure how much quantity that you're selling based upon that you need to select the total property

so last property is the description of short little description about the

product that you're selling so in double quotes so you can say say

this is the source code just make sure you put the double

codes right here also so this is actually the overall

object which is the in create payment Json now we can actually pass this

object to a method payle do payment.

create so this is a create method and here you can pass this uh Json preate

payment Json and this actually have a callback

function so this actually will be a call back

function the second property will be payment if the payment will be successful

so here you need to Simply have a if condition if any sort

of error take place then in that case we will console log

it and also we'll be redirecting the user to the failed route so if the payment is

not failed if the payment is successful in that case we will

use a simple for Loop

payment. links. length so there will be this property

payment. links. length which will be coming in this object so we just need to

redirect here we need to Simply compare Loop through all the links and

there is a property called as relative we need to only get this approval URL and approval uncore

URL if this URL is equal to that then we need to Simply redirect the user to this

uh like this so all these links will be relate

uh returning but here we are simply using a simple for Loop and a condition to Simply

only get the approval URL and redirect the user to that approval URL

so if you try to now execute this application at this moment of time if I go to Local Host 5,000 click this

button so now it will show me uh Local Host SL approval

URL so now we do need to make this because if you see we are having this slash approval URL we do need to make

this uh we are successfully getting

this app.get

payment uh guys I figured out the error this is showing because we actually

inside uh links. I we need to actually get the HF

property not real property just make this change this was the problem just we

need to get the HF property so now if you again go to Local Host 5,000 click on this button you will be

actually be redirected to the Paypal payment page so here you can see we are

having this we are on the sandbox environment so that's why sandbox. do.com we redirected to so here we do

need to go to we need to select our any personal

account that we created so let me select this where you need to

paste the email

address and then we need to paste the password as well so now it will actually go to your

wallet and you will charge 500 dollar you can see we are sorry this seller doesn't accept payment in your

currency you will see all these links will be coming this is actually the payment link right

here so this error which is uh this seller doesn't accept payments in your

currency so just make sure that you have selected a business account which uh

have uh United State USD dollar selected so if you see we have selected

this business account if you

see let me go to the apps right here uh

refresh let me select this app in which the account is

connected let me paste the client ID right here uh so just make sure the

currency that you are selecting is uh USD because pay uh PayPal only accepts

USD not your native currency

so just copy

this so let me again uh

so now you can see it is actually cutting $500 that we mentioned click on

continue so now it will have this error uh because we haven't written the route for the success you will see it will

have this success route the pay payment ID will be returned here all this information this is the actual token

which we will need all this information the payer ID so now we need to actually write this success URL that we actually

configured which is when the payment is successful this route will be hit so now we need to make this

route so when the payment is successful we now need to allow the user to

download the digital good so right here app do

get/ success so you'll be having the payer ID

which we can get request. cury [Music]

do the property payer ID the second property we do need to get

is the payment ID which we'll get request. query. payment ID these two

parameters now we need to Simply make a Json object which will have these

details this will be a simple object and here is the first property

pair underscore ID is equal to the pair ID that we got

the second property is the transactions object this will be a array

of object same thing we need to set the amount current see and the total

500 because the total if you say we have 500 right here so after you set this now

you need to execute PayPal do payment execute this is actual execute method

which will complete the payment with this payment ID and this execute payment Json and

this function will be returned error of payment this is actually call back

function if any sort of error take place we can again console

log we can set a session variable of error and we will simply say error.

response and then we can simply return back to the failed

route if the payment is successful in the else block we will simply say a

request or session do payment is equal to the payment object that we got

request. session do we will basically make this variable allow download to be

true so this variable will keep track of whether the user has made the payment or not based upon that we will set it to

true or false so now after the payment is successful we will set it to true now we'll redirect the user to the

homepage like this now we do need to make change in this uh homepage we just

need to make a simple middleware so that this middle Weare

function will actually check that if the user can download the file or not check

download access so request next this will be a simple function in

this function we'll simply check that if that session variable is set or not allow download if this is true in that

case we will actually be redirecting the user to the download page SL download

route else we'll simply say next now we need to pass this middleware

just pass to the Home Route like this now this is actually a protected route

because we will be checking this session variable if this if this is true then only go to the download route if this is

not true then simply show the login page

and now we need to actually write this uh download

route so inside this route we just need to have a if

condition that if that session variable of allow download is true in that case

only we need to show

the download page so inside the download page it will be very simple download

page it will be present in the public

directory download. HTML so we do need to create inside

public folder just create download. HTML you can just customize accordingly

download page so inside this

uh you will get all the source code in the description so for saving the time I'm just pasting it so right here it has

using Tailwind CSS to actually have a download button and if you click this download button you will be redirected

to this route which is download Dash file and we are simply storing it inside

local storage local storage. set item allow download variable to be true

now we need to make this route which is download

file so now to download the file slash download

file so here we again need to check if that session variable

is set to true then only we need to download

the file so now to actually download the file it's very

simple file

path so it is actually present will be present in the public folder and uh I

think I named it as sample.pdf

and then response. download of Express function to actually download the

file like this so just move your digital good whichever thing that you are

selling so I'm just selling this simple PDF file so I will simply paste it and

rename this to sample. PDF you can even sell a zip file as well

which will contain multiple files we are set setting the simple sample.pdf file

so here we are providing this path and now if you refresh here uh Local

Host you can just see the inside your download file uh just

change this to file 5,000 because we are running this application of 5,000 port

number click the

button so now you it 500 if I

click so now if you see after the payment it is redirecting me to this

page Local Host 8,000 uh I think let me open

this uh Local Host oh sorry you can just see we have put 8,000 here needs to be

5,000 because the app is running on Local Host

5,000 so now if you see uh it will if you click the payment button and you

will see failed route is showing us what is

the error let me check request Source ID was not found

invalid resource

ID uh let me see guys what is the in the success call

back what I will do uh this is actually the route here which

is a

success I think I made some kind of typo mistake right here so what I will do I will copy this and don't waste the

time this is the thing let me paste

it if I based once

again if you are stuck at a problem guys you can make use of chat GPD just tell

the problem invalid resource ID is the code correct

so in this way you can ask questions to chat GPT so it will tell you the problem the error message invalid resource ID

typically indicates an issue with the payment

ID make sure the total amount in that's so it is giving you the correct

code by correcting it

the total amount in the execute payment Json does not match the amount specified

in the payment creation if the price is 500 the total should also be

5,000 uh let me see if the okay you will see that guys the total is not

matching it needs to be 5,000 so we do need to change it to 5,000

now if you see uh the it is successfully completed now it has redirected to me

this download page now you can simply download your digital

good you will see the file has been successfully download loed if you open it this is the actual file you can view

it so the thing is that uh if you let's suppose if you close this for some

reason and Vis again visit it let's suppose Local Host 5,000 it will

redirect you to the download page if you see so once you make the payment this

route will be accessible to you so now let's suppose if I restart

the application now if you try to go to it this

route SL download not before not ping

it so if you see you can't go to this route SL

download so you can't go to this route directly you do need to make the

payment so you can't go directly SL download if you see you

can't go to it so you do need to make the payment

first of all so this is actually the system so after you make the payment you

will be redirected to the

this is actually the tutorial guys if you are interested the link is given in the

description you will get all this source

code and the link is given you can directly purchase it from

my website Pro Cod store.com so I will be seeing you guys in the next one