VISVESVARAYA TECHNOLOGICAL UNIVERSITY

Jnana Sangama, Belgavi-590018

18CSI85
An Internship Report

on

“PAYMENT GATEWAY INTEGRATION”

01.09.2021 - 01.10.2021
Submitted in partial fulfillment of the requirement for award of degree
of

BACHELOR OF ENGINEERING
in
COMPUTER SCIENCE AND ENGINEERING
by

JANVEE DIXIT 1EP18CS037

Internal Guide, External Guide,

Dr. C Emilin Shyni, Mr. Pranav Dubey,
Professor & HOD, Mentor & Director,
Department of CSE,EPCET The Sparks Foundation

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

Jnana Prabha, Bidarahalli, Virgo Nagar Post, Bengaluru, Karnataka 560049
2021-2022
 DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
Jnana Prabha, Bidarahalli, Virgo Nagar Post, Bengaluru, Karnataka 560049

CERTIFICATE

This is to certify that the internship work entitled “PAYMENT GATEWAY INTEGRATION” is
a bonafide work carried out by JANVEE DIXIT [1EP18CS037],in the partial fulfillment of the
requirements of BACHELOR OF ENGINEERING in COMPUTER SCIENCE AND
ENGINEERING in VISVESVARAYA TECHNOLOGICAL
UNIVERSITY, Belagavi, during the year 2021-2022. It is certified that corrections/suggestions
indicated for internal assessment have been incorporated in the report.

Internal Guide, External Guide,

Dr. C Emilin Shyni, Mr. Pranav Dubey,
Professor & HOD, Mentor & Director,
Dept. of CSE, EPCET, Bangalore The Sparks Foundation

Signature of HOD. Signature of Principal,

Dr. C Emilin Shyni, Dr. T. K. Sateesh,
HOD, Dept. of CSE, Principal,
EPCET, Bangalore EPCET, Bangalore
 ACKNOWLEDGEMENT

Firstly, I thank the Management and Principal of East Point College of Engineering
and Technology, Bengaluru for providing an opportunity to do the internship work.

I would like to express my sincere thanks to Dr. C. Emilin Shyni, Professor and Head of
the Department of Computer Science and Engineering, EPCET for her valuable suggestions
and encouragement to do my best during the internship.

I would like to express my gratitude towards my guide Dr. C. Emilin Shyni, Head of
Department, Department of CSE and the Internship Coordinators Prof. Nithyananda CR,
Associate Professor, Department of CSE for his valuable guidance and constant supervision
in completing the technical seminar successfully.

I would like to extend my thanks to all the faculty members of CSE department fortheir
valuable inputs as reviewers during the course of the internship.

Finally, I would like to thank my parents and friends for their support and encouragement in
successful completion of the internship.

JANVEE DIXIT [1EP18CS037]

iii
CERTIFICATE OF COMPLETION

iv
 ABSTRACT

Payment Gateway is such a crucial part of an e-commerce platform. Security, is the top-most benefit
of a payment gateway where the entire flow of payment will be secured. This project is developed to
integrate a payment gateway in a website by learning the implementation of HTML and CSS. An
Integrated payment gateway is a responsive website, in which there is a donate button that redirects
the user to the payment gateway page. It collects basic details about the user in order to provide a well-
structured and secured transactions. While running a strict eCommerce site, where the processing of
payments takes place online, there’s no other way to accept online transaction through the internet
without a payment gateway. The project is user-friendly and requires basic human intervention.
Individuals just have to fill up the form that specifies personal questions from all required fields such
as name, phone number, address, etc. The answers provided by the users are stored and the system
automatically and proceeds with the transactions. The transaction mode can be chosen by the user
where at the end of successful transaction an invoice is generated and a well-structured email.

v
 TABLE OF CONTENTS
Chapter No. Title Page No.
1 Introduction 1
1.1 Project Introduction 1
1.2 Programming Languages Used 2
1.3 Objectives 2
2 Organizational Profile 3
2.1 Vision 3
2.2 Mission 4
3 Requirement Specification 5
3.1 Hardware Requirements 5
3.2 Software Requirements 5
4 Design and Implementation 6
4.1 Design 6
4.2 Implementation 8
4.2.1 HTML Code 8
4.2.2 CSS Code 11
5 Testing 13
5.1 Unit Testing 13
5.2 Integration Testing 13
5.3 Sub-System Testing 14
5.4 System Testing 14
5.5 Acceptance Testing 14
6 Snapshots 15
6.1 Home Page 15
6.2 About Page 16
6.3 Payment Details 16
6.4 User Detail Form 17
6.5 Payment Mode 17
6.6 Successful Transaction 18
6.7 Invoice and E-mail 18
7 Conclusion 19
References 20
vi
 LIST OF FIGURES

Figure No. Title Page No.

4.1 System Design 6

6.1.1 Home Page 14
6.1.2 Home Page 14
6.2 About Page 15
6.3 Payment Details 16
6.4 User Detail Form 17
6.5 Payment Mode 17
6.6 Successful Transaction 18
6.7 Invoice and E-mail 18

vii
Payment Gateway Integration

CHAPTER 1

INTRODUCTION

Full stack development refers to the development of both front end (client side) and backend (server
side) portions of web application. Full stack web developers have the ability to design complete web
applications and websites. They work on the frontend, backend, database and debugging of web
applications or websites. Frontend and Backend are the two most popular terms used in web
development. Each side needs to communicate and operate effectively with the other as a single unit to
improve the website’s functionality. Frontend is the part of a websitethat the user interacts with directly
is termed the front end. It is also referred to as the ‘client side’ of the application. It includes everything
that users experience directly: text colors and styles, images, graphs and tables, buttons, colors, and
navigation menu. HTML, CSS, and JavaScript are the languages used for Front End development.
Responsiveness and performanceare the two main objectives of the Front End. The developer must
ensure that the site is responsive.

Backend is the server-side of the website. It stores and arranges data, and also makes sure everything
on the client-side of the website works fine. It is the part of the website that you cannot see and interact
with. It is the portion of software that does not come in direct contact with the users. The parts and
characteristic developed by backend designers are indirectly accessed by users through a frontend
application.

1.1 Project introduction

This is a project which is based on Web Development and its Applications. This web page is anonline
payment service that is designed to make and receive payments which are coupled with a charity
platform. There will be a simple donate button on the homepage. On clicking the donatebutton, the user
will land on the payment page. The user must fill in some personal informationsuch as email id, name,
phone number, etc., for further processing. As a next step the user must choose a transaction mode and
then enter the required details depending on the transaction modee.g., credit card, PayPal, etc. The user
can then select the amount to be paid. The amount will then be transferred from the user’s account to
the authority’s account. Once the payment is donean invoice will be generated and an email will be sent
to the user for the payment received.

Dept of CSE, EPCET 2021-22 Page 1

Payment Gateway Integration
1.2 Programming Languages Used

This project is based on Web Development and its Applications. The main objective of this project
is to learn the implementation of HTML and CSS, and integration of payment gateway in a webpage.
The basic webpage of this project is created using HTML and styling of the webpage is done using
CSS. While Razorpay is used as a payment mode to perform secure transactions.

1.3 Objectives
• To learn the implementation of HTML and CSS.
• To create a simple website where payment gateway is integrated
• To implement a simple, donate button on homepage which on clicking will land the user on the
payment page.
• To design the payment page to select the amount to be paid and the payment type, e.g., credit
card, PayPal, etc.
• To generate the invoice and send email to the user for the payment received.

Dept. of CSE, EPCET 2021-22 Page 2

Payment Gateway Integration

CHAPTER 2
ORGANIZATIONAL PROFILE

The Sparks Foundation (or TSF) is a brand-new startup that was co-founded by people who believe
that every student should have a chance at greatness, and they have created multiple programs to help
students reach their maximum potential. The first program that they successfully put into play was in
the year 2018 which is their Graduate Rotational Internship Program, or GRIP. This internship program
is based completely online as a part-time internship for students to complete in the span of 1 month.
GRIP offers internships in the areas of tech, marketing, and human resources. This program has been
successfully running, and TSF is expanding its programs to include a wider variety of students from a
variety of different backgrounds.

One-on-one mentorship is the most effective strategy for aiding a student to achieve their maximum
potential. TSF aims to match mentors that are experts in their field to students who want to enter the
field. In their words, they want to, “Help them [the students] shape their dreams into reality.” They aim
to match personalities and careers that will work well together so that the student can achieve the
maximum amount of success when they enter their future field. The mentor is paired up with their
mentee and receives scheduled routine progress monitoring so that they do not fall behind. By receiving
direct attention, mentors are able to directly see their mentee’s strengths and weaknesses and work on
them accordingly. This is the fastest and most effective way to teach students how to succeed both with
their hard and soft skills. By working one-on-one, they are able to develop problem-solving skills and
a deeper understanding of their field at a much more rapid pace.

2.1 Vision
They are committed to going the extra mile to bring success to the clients consistently. They are
dedicated to delivering the right people, solutions, and services to the clients that they require to meet
their technology challenges and business goals. They aim in a world of enabled and connected little
minds, building future.

Dept. of CSE, EPCET 2021-22 Page 3

Payment Gateway Integration

2.2 Mission
Optimizing client satisfaction with quality services. Delivering the most efficient and the best solution
to our clients to every client leveraging leading technologies & industry best practices. To inspire
students, help them innovate and let them integrate to build the next generation humankind. Some of
the services include:

Development - They develop responsive, functional and super-fast websites. They keep User
Experience in mind while creating websites. A website should load quickly and should be accessible
even on a small view-port and slow internet connection.

Branding and Design - They offer professional Graphic design, Brochure design & Logo design. They
are experts in crafting visual content to convey the right message to the customers. They also design
custom wraps for your products (also known as package designing).

Search Engine Optimization - They help to manage the SEO campaign more efficiently and
effectively. They help to gain market share by leveraging the expertise. The holistic approach to
identify anything that may be hurting the traffic or rankings and show just how to outrank the
competition.

Content Writing - They provide content writing services for blogs and product descriptions; their
team helps to generate content to Increase your Brand Recall. They can amplify the marketing needs &
help to reach the potential customers.

Research - They equip business leaders with indispensable insights, advice and tools to achieve their
goals, their main area of research is in sentimental analysis, having published multiple papers on the
same, they are in the process of creating a virtual bot that is intended to use their sentimental analysis
data to provide real time replies.

Embedded System and IOT - CST works with Consumer Electronics, Lighting, Home Automation,
Metering, Sensor-Technology, Home Appliance and Medical Device companies to help them create
smart and connected products. Through its integrated Embedded and IoT services, they helps build
intelligent & connected devices that can be remotely monitored and controlled while leveraging edge
and cloud computing for a host of intelligent applications and analytics.

Dept. of CSE, EPCET 2021-22 Page 4

Payment Gateway Integration

CHAPTER 3

REQUIREMENT SPECIFICATION

3.1 Hardware Requirements

• Hard Disk : 2 GB RAM.
• Resolution : 1280 x 800 or higher
• System type : x64-based processor.
• Processor : Intel® Core™ i3-1005G1 CPU @ 1.20GHz 1.19 GHz

3.2 Software Requirements

• Tool : Visual Studio Code.
• Front End : HTML , CSS
• Back End : Razorpay.
• Operating System : Linux 7.1 or Windows XP/7/8/10 OS or Mac OS.

Dept. of CSE, EPCET 2021-22 Page 5

Payment Gateway Integration

CHAPTER 4

DESIGN AND IMPLEMENTATION

4.1 System Design

The system design defines the elements of a system such as the architecture, modules and
components, the different interfaces of the components and the data that goes through the system. It
is meant to satisfy specific needs and requirements through a coherent and well-running system.

Figure 4.1 : System Design

Figure 4.1 describes the different modules in which the required system is implemented.

• HOME PAGE : This page consists of three division namely, the home section, the about
section and the donate section, where each section consists of contents regarding the donation.
• DONATE : It is a button present on the home page through which payment process can be
initiated.
• DONATION AMOUNT : The user will be prompted to enter the amount.

• USER DETAIL FORM : The user will be asked to fill-in few basic details.

• PAYMENT MODE : The payment mode to perform transactions must be chosen by the user.

• SUCCESSFUL TRANSACTION : The user will be displayed with a successful transaction

message.
• GENERATE INVOICE AND E-MAIL : The invoice will be generated and an email will be
sent to the user’s mail regarding the amount paid.

Dept. of CSE, EPCET 2021-22 Page 6

Payment Gateway Integration

Hypertext Markup Language

Hypertext markup language (HTML) is the major markup language used to display Web pages on the
Internet. In other words, Web pages are composed of HTML, which is used to display text, images or
other resources through a Web browser. All HTML is plain text, meaning it is not compiled and may
be read by humans. The file extension for an HTML file is .htm or .html. HTML was never designed
for the Web that exists today, as it is just a markup language with severe limitations, in terms of control
and design. Numerous technologies have been used to work around this issue - the most significant
being cascading style sheet (CSS).

Cascading Style Sheets

Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the
process of making web pages presentable. CSS handles the look and feel part of a web page. Using
CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how
columns are sized and laid out, what background images or colors are used, as well as a variety of other
effects.

Razorpay

Razorpay is a payment mode founded by the group of IIT Roorkee alumni. It’s a kind of payment mode
that combines more than one banking system. It is an online payment system that can access the credit,
debit cards, UPI, and popular mobile wallets. It provides Standard Integration and Quick Integration to
integrate the Payment Gateway. The Razorpay Standard Checkout can be integrated to accept payments
in the application since it provides more control over the customization of the checkout compared to
Quick Integration. To integrate the Razorpay in website the following steps can be implemented:

• Create an account on Razorpay’s website by signing up with email and password and add some
basic information such as phone number, etc.
• Inside the setting screen, click on create a new key option and key will be generated. Key ID
and Key Secret will be generated.
• Currently the payments will be in “test mode” i.e., no real transaction would happen and the
payment options are also limited.
• Add an event listener to the payment button so the payment window gets opened once it is
clicked.

Dept. of CSE, EPCET 2021-22 Page 7

Payment Gateway Integration

4.2 Implementation

4.2.1 HTML Code

<!doctype html>
<html lang="en">
<head>
<title>The Spark Foundation Donation</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<img class="logo" src="logo.png" alt="logo" width="75" height="75">
<div class="container-fluid">
<a class="navbar-brand" href="/SparkDonations">Spark Donation</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/SparkDonations/index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/SparkDonations/about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/SparkDonations/contact.html">Contact Us</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
<div class="mx-2">
<button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#LoginModal">Login</button>

Dept. of CSE, EPCET 2021-22 Page 8

Payment Gateway Integration

<button class="btn btn-danger" data-bs-toggle="modal" data-bs-

target="#SignUpModal">SignUp</button>
</div>
</div>
</div>
</nav>
<!-- Donate Modal -->
<div class="modal fade" id="DonateModal" tabindex="-1" aria-labelledby="DonateModalLabel" aria-
hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="DonateModalLabel">Donate to Spark Donation</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form action="https://rzp.io/l/XTtn2J5jqv">
<div class="row my-4">
<label for="exampleFormControlInput1" class="form-label">Name</label>
<div class="col ">
<input type="text" class="form-control" placeholder="First name"
aria-label="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
</div>
<div class="row mb-3 my-4">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3">
</div>
</div>
<div class="row my-4">
<label for="phone" class="col-sm-2 col form-label">Phone Number</label>
<div class="col-sm-10">
<input type="tel" class="form-control" id="phone">
</div>
Dept. of CSE, EPCET 2021-22 Page 9
Payment Gateway Integration
</div>

<button type="submit" class="btn btn-primary">Donate Now</button>

</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<footer class="container">
<p class="float-end"><a href="#">Back to top</a></p>
<p>© 2019–2022 The Spark Foundation. · <a href="#">Privacy</a> · <a href="#">Terms</a></p>
</footer>
</body>
</html>

Dept. of CSE, EPCET 2021-22 Page 10

Payment Gateway Integration

4.2.2 CSS Code

body {
background: linear-gradient(to bottom, #ffcc66 0%, #ffffff 100%);
background-attachment: fixed;
overflow-x: hidden;
font-size: 25;
}
#menu {
height: 100px;
left: 1100px;
position: relative;
}
#bg {
background-image: url('charitybg.png');
background-size: cover;
height : 1000px;
}
.heading {
font-size : 60;
position : relative;
top : 200px;
right : 480px;
}
#pay {
position : absolute;
top : 400px;
left : 300px;
}
#home {
text-align : center;
position : relative;
top : 100px;
}

Dept. of CSE, EPCET 2021-22 Page 11

Payment Gateway Integration
#about {
text-align : center;
position : relative;
top : 300px;
}
#donate {
text-align: center;
position : relative;
top : 500px;
}
a{
padding-right : 80px;
font-size: 25;
color : blue;
}
p{
white-space:pre;
}
form {
position : absolute;
top : 250px;
left : 660px;
}
#terms {
position : absolute;
top : 300px;
left : 170px;
}
#btmmenu {
position : relative;
left : 560px;
top : 1200px;
}

Dept. of CSE, EPCET 2021-22 Page 12

Payment Gateway Integration

CHAPTER 5
TESTING

Testing is a dynamic technique of verification and validation. It involves executing an implementation

of the software with test data and examining the outputs of the software and its operational behavior
to check that it is performing as required.

The following statements serve as the objectives for testing:

▪ Testing is a process of executing a program with the intent of finding error.
▪ A good test case is one that has a high probability of finding an as-yet undiscovered error.
▪ A successful test is one that uncovers as-yet undiscovered error.

Verification and validation are intended to show that a system confirms to its specification and that the
system meets the expectations of the customer. Verification involves checking that the software
confirms to its specification. We should check that the system meets its specified functional and
nonfunctional requirements. Validation ensures that the software meets the expectations of the
customer. It goes beyond checking conformance of the system to its specification to showing that the
software does what the customer expects as distinct from what has been specified. The testing process
should proceed in stages where testing is carried out incrementally in conjunction with system
implementation. Finally, the system is tested with the customer’s data. The stages in the testing
process are:

5.1 Unit Testing

Individual components are tested to ensure that they operate correctly. Each component is tested
independently, without system components. Thus, the project has been successfully tested.

5.2 Integration Testing

Main function is design to call many sub functions, where different options are given in the sub
functions. Now, different functions are included in the main separately and tested for error. Compile
and tested the project without any error’s get the output.

Dept. of CSE, EPCET 2021-22 Page 13

Payment Gateway Integration

5.3 Sub-System Testing

This phase involves testing collections of modules which have been integrated into subsystems. The
sub-system test process should concentrate on the detection of module interface errors by rigorously
exercising these interfaces. Thus, the project has been successfully tested.

5.4 System Testing

The sub-systems are integrated to make up the system. This process is connected with finding errors
that result from unanticipated interaction between sub-systems and sub-system interface problems. It is
also concerned with validating that the system needs its functional and nonfunctional requirements and
testing the emergent system properties. Thus, the project has been successfully tested.

5.5 Acceptance Testing

This is the final stage in the testing process before the system is accepted for operational use. The system
is tested with data supplied by the system customer rather than simulated test data. Thus, the project has
been successfully tested.

Dept. of CSE, EPCET 2021-22 Page 14

Payment Gateway Integration

CHAPTER 6
SNAPSHOTS
6.1 Home Page

Figure 6.1.1 : Home Page

Figure 6.1.2 : Home Page

The Figure 6.1.1 and 6.1.2 shows the Home Page which displays the button for Signup, Login and to
donate.

Dept. of CSE, EPCET 2021-22 Page 15

Payment Gateway Integration

6.2 About Page

Figure 6.2 : About Page

The Figure 6.2 shows the About Page which displays about the company.

6.3 Payment Details

Figure 6.3 : Payment Details

The Figure 6.3 shows the prompt to enter the payment details.

Dept. of CSE, EPCET 2021-22 Page 16

Payment Gateway Integration

6.4 User Detail Form

Figure 6.4 : User Detail Form

The Figure 6.4 shows the form in which the user has to enter the details.

6.5 Payment Mode

Figure 6.5 : Payment Mode

The Figure 6.5 shows the different payment mode.

Dept. of CSE, EPCET 2021-22 Page 17

Payment Gateway Integration
6.5 Successful Transaction

Figure 6.6: Successful Transaction

The Figure 6.6 shows a confirmation page about successful transaction.

6.7 Invoice and E-mail

Figure 6.7 : Invoice and E-mail

The Figure 6.7 shows the receipt which is generated along with email during a successful transaction.

Dept. of CSE, EPCET 2021-22 Page 18

Payment Gateway Integration

CHAPTER 7
CONCLUSION

A payment gateway authorizes payments for retailers in all business categorizations. They ensure that
sensitive information, such as credit card numbers, entered into a virtual terminal or on an ECommerce
website, are passed securely from the customer to the merchant and from the merchant to the payment
processor through the use of encryption. The main aim of this project was to deliver a payment
integration gateway using different technologies and methods. The paper describes the process and
the required resources for the project, in this project a third-party platform called Razorpay is used.
The main reason for using the Razorpay is, it is popular for creating a payment gateway and it comes
with multiple features. In this project, multiple tags are used like HTML, CSS which is used to create
the webpage. Furthermore, the project is also focused on the secure transaction process, which includes
the all the service provider website. The paper also illustrates the proposed methodology required to
complete the project. The final goal of the project was to deliver the complete website for payment
Integration, with the help of a third-party vendor.

Dept. of CSE, EPCET 2021-22 Page 19

Payment Gateway Integration

REFERENCES

[1] "eCommerce: Payment Gateways". digitalbusiness.gov.au. Retrieved 20 November 2012.

[2] “PAYMENT INTEGRATION” A Capstone Project Proposal Report

[3] Articles and reports published on

i. CSS Tutorial (w3schools.com) - https://www.w3schools.com/css/

ii. CSS – GeeksforGeeks - https://www.geeksforgeeks.org/css/

iii. Razorpay - Best Payment Gateway for Online Payments – India. -

https://razorpay.com/

Dept. of CSE, EPCET 2021-22 Page 20