SECURED PAYMENT SYSTEM USING FACE RECOGNITION
A PROJECT REPORT
Submitted by
Dani N
(21113004)
Niroshan R
(21113021)
Sooluru Hemaprasad (21113119)
Under the guidance of
Mr. V. Jothi Prasad
ASSISTANT PROFESSOR (SG), CSE
in partial fulfillment for the award of the degree of
BACHELOR OF TECHNOLOGY
IN
COMPUTER SCIENCE AND ENGINEERING
HINDUSTAN INSTITUTE OF TECHNOLOGY AND SCIENCE
CHENNAI – 603103
APRIL 2024
I
BONAFIDE CERTIFICATE
Certified that this project report Secured Payment System Using Face Recognition is the
bonafide work of N Dani(21113004) ,Niroshan R(21113021) and Hema Prasad(21113119) who
carried out the project work under my supervision during the academic year 2024-2025.
Dr. J. THANGAKUMAR, Ph.D.,
Mr. Jothi Prasad, M.Tech., (Ph.D).,
Head of the Department,
Supervisor,
Department of CSE.
Assistant Professor (SG)
INTERNAL EXAMINER
EXTERNAL EXAMINER
Name:
Name:
Designation:
Designation:
Project Viva-Voce conducted on
TABLE OF CONTENTS
ACKNOWLEDGEMENT
i
DEDICATION
ii
ABSTRACT
iii
LIST OF FIGURES
iv
LIST OF ABBREVIATIONS
v
1. INTRODUCTION
1
1.1
Overview
1.2
Motivation for the project
1.3
Problem definition & scenarios
1.4
Organization of the report
1.5
Summary
2. LITERATURE REVIEW
2.1
Introduction
2.2
Literature Review
2.3
Summary
3. PROJECT DESCRIPTION
3.1
Objective of the Project work
3.2
Existing System
3.3
Shortcomings of the Existing System
3.4
Proposed System
3.5
Benefits of Proposed System
4. SYSTEM DESIGN
4.1
Architecture Diagram
4.2
Usecase Diagram
4.3
Sequence Diagram
4.4
Activity Diagram
5. PROJECT REQUIREMENTS
5.1
Hardware And Software Specification
5.2
Technologies Used
5.3
Summary
6. MODULE DESCRIPTION
6.1
Modules
6.2
6.3
Data Utilization
Evaluation
4
7
9
14
18
7. IMPLEMENTATION
7.1
Introduction
7.2
Implementation of the Model
7.3
Summary
8. RESULT ANALYSIS
8.1
Introduction
8.2
Results Obtained
8.3
Performance Analysis
9. CONCLUSION AND FUTURE WORK
9.1
9.2
20
22
24
Conclusion
Future Work
10. INDIVIDUAL TEAM MEMBER’S REPORT
10.1
Individual Objective
10.2
Role of the Team Members
10.3
Contribution of the Team Members
26
REFERENCES
28
APPENDIX A
30
APPENDIX B
49
APPENDIX C
50
APPENDIX D
51
APPENDIX E
53
ACKNOWLEDGEMENT
First and foremost, we would like to thank ALMIGHTY who has provided us the strength to do justice
to our work and contribute our best to it.
We would like to extend our heartfelt gratitude to Dr. J. Thangakumar, Ph.D., Associate Professor &
Head, Department of Computer Science and Engineering for his valuable suggestions and support in
successfully completing the project.
We wish to express our deepest sense of gratitude from the bottom of our heart to our guide
Mr.V.Jothi Prasad,M.Tech, (Ph.D)., Assistant Professor (SG), Department of Computer Science and
Engineering, for his motivating discussions, overwhelming suggestions, ingenious encouragement,
invaluable supervision, and exemplary guidance throughout this project work.
We wish to thank our Project coordinator and Panel members for keeping our project in the right track.
We would like to thank all the teaching, technical and non-technical staff of Department of Computer
Science and Engineering for their courteous assistance.
We thank the management of HINDUSTAN INSTITUTE OF TECHNOLOGY AND SCIENCE for
providing us the necessary facilities and support required for the successful completion of the project
As a final word, we would like to thank each and every individual who have been a source of support and
encouragement and helped us to achieve our goal and complete our project work successfully.
DEDICATION
This project is dedicated to our beloved parents, for their love, endless support,
encouragement, and sacrifices.
ABSTRACT
Ensuring the security of financial transactions is more important than ever in the
modern digital environment. Our project fills this requirement by creating a cutting-edge
facial recognition system that allows users to conduct safe transactions using facial
recognition, doing away with the need for conventional passwords or PINs, which are
susceptible to loss, abuse, or illegal access. User registration and transaction authentication
are the two main stages of the system's operation. The user's face photograph is taken during
the registration process and safely saved in the database, with the option to change their profile
picture as needed. When a user starts a transaction, the system turns on the camera to take a
real-time picture of their face, which it then compares to the one that was saved when they
registered. If a match is found, the transaction is completed. If not, the procedure is stopped
right once to avoid possible fraud. Spoofing, in which an attacker poses as the user by using
a picture, video, or mask, is one of the main problems with facial recognition technology.
Strong anti- spoofing features like liveness detection, which examines minute cues like eye
blinks, facial movements, skin texture, and light reflections to confirm that the face being
scanned is that of a real person and not a fake, are built into our system to counteract this. To
further verify their physical presence, we have also included challenge-response techniques
that ask the user to carry out particular actions, including smiling, blinking, or turning their
head. Our system is made to support multi-modal biometric identification, combining facial
verification with complementing techniques like voice recognition and iris scanning to further
strengthen security. A highly dependable and impenetrable digital payment environment is
created by this layered security strategy, which also greatly increases the system's resistance
to fraudulent activity and guarantees that only legitimate users can access and authorize
transactions. The Face API is a robust facial recognition tool that allows you to recognize,
analyze, and detect human faces in digital photographs.
LIST OF FIGURES
FIGURE NO.
TITLE
PAGE NO.
Fig 4.1
Architecture Diagram
10
Fig 4.2
Activity Diagram
12
Fig 8.1
Output of Needle in Haystack Test
21
CHAPTER - 1
INTRODUCTION
1.1Overview
The "Secured Payment System Using Face Recognition" project is a cutting-edge digital
payment solution that uses biometric facial verification to improve convenience and security. This
technology reduces the danger of credential theft and fraud by enabling users to authenticate transactions
using their face features rather than more conventional credentials like passwords or PINs. User enrolment
and transaction verification are the two main pillars upon which the system is based. During the
registration step, customers utilize a webcam to record their facial data, which is then processed using
deep learning models like FaceLandmark68 and TinyFaceDetector and safely saved in a database with a
unique description. The user's live face is re-captured during a transaction and compared to the descriptor
that has been stored. The transaction is completed if a match is made; It's blocked.
It uses liveness detection and challenge-response mechanisms to further protect the system
against spoofing attacks (such as utilizing photographs, videos, or masks), guaranteeing that only active
users can use the service. Simple features like a secure money transfer form, real-time webcam capture,
face verification modals with feedback for success or failure, wallet balance display, transaction history
tracking, and user profile management (including image updates) improve the system. Future integration
with more biometric factors, such as voice and iris recognition, for multi- modal authentication is made
possible by the solution's scalability and flexibility. This method offers a safe, reliable, and easy-to-use
digital payment environment that is appropriate for contemporary financial ecosystems.
1.2Motivation for the project
Ensuring the security and convenience of financial transactions has become a primary
responsibility in an increasingly digital environment where they are carried out on an unprecedented scale.
In addition to being vulnerable to hacks and phishing attempts, traditional authentication techniques like
passwords, PINs, and OTPs also make using them difficult for consumers. Our research presents a facial
recognition-based payment system that allows users to complete transactions using their own biometric
identity—their face—driven by the desire to create a more intelligent and safe substitute.
This improves user experience and security by doing away with the need for credentials. In
addition to offering a smooth, contactless, and user-friendly verification method, facial recognition helps
to fortify the system against spoofing techniques like photographs and videos. The system will be able to
differentiate between an authentic individual and a fraudulent attempt at image- based access thanks to
1
additions. In addition to offering a smooth, contactless, and user-friendly verification method, facial
recognition helps to fortify the system against spoofing techniques like photographs and videos. The
system will be able to differentiate between an authentic individual and a fraudulent attempt at imagebased access thanks to these additions.
In addition to preventing unwanted access, our initiative lays the groundwork for future
advancements in biometric payments by integrating state-of-the-art technologies such as powerful antispoofing protocols, deep learning-based descriptor comparison, and real-time face detection. This system
seeks to redefine how users engage with digital financial services by offering a dependable, quick, and
secure payment experience. It is particularly helpful in situations where conventional techniques are
insufficient or dangerous.
1.3Problem definition & scenarios
Ensuring the security of online transactions is a top priority in today's digital environment. Conventional
techniques, such as PINs and passwords, are frequently susceptible to misuse, phishing, and theft. Our
research suggests a Secured Payment System Using Face Recognition, which authorizes transactions by
facial authentication in order to get over these problems. The system operates in two phases: transaction
authentication, which compares the user's current image with the recorded one, and user registration,
which involves taking and storing a face image. The transaction moves forward if it matches; if not, it is
blocked.
The system has anti-spoofing features to stop fraud like spoofing images or videos. such as challengeresponse techniques, such as requesting the user to turn their head, and liveness recognition, which looks
for natural face movements, eye blinks, and texture. For multi-layered security, it can also be expanded
to incorporate voice or iris recognition. This method makes sure that only the authorized user may safely
and conveniently conduct financial transactions, which is helpful in real- world situations like shared
household access, public device usage, or remote payments such as challenge-response techniques, such
as requesting the user to turn their head, and liveness recognition, which looks for natural face movements,
eye blinks, and texture.
For multi-layered security, it can also be expanded to incorporate voice or iris recognition. This
method makes sure that only the authorized user may safely and conveniently conduct financial
transactions, which is helpful in real-world situations like shared household access, public device usage,
or remote payments. A camera captures facial information during user registration, preprocesses it to
remove noise, and then encodes it using deep learning techniques. This encrypted data is stored in a secure,
encrypted database. A new facial image is captured during a transaction, and a similarity score is utilized
2
to compare it to the previously stored encoding. Real-time verification ensures a smooth user experience
while simultaneously.
1.4 Organization of the report
This report documents the process of delivering the ideas generated, concepts implemented, and tasks
accomplished. It is presented in 10 chapters:
Chapter-1, provides introduction to the project.
Chapter-2, provides the literature survey.
Chapter-3, provides the objective of the project and the proposed system.
Chapter-4, provides better understanding about project with system design and architecture.
Chapter-5, provides the hardware and software specifications for the project.
Chapter-6, provides the detailed explanation of each module used.
Chapter-7, provides the implementation of the project
Chapter-8, provides the analysis of the result
Chapter-9, provides conclusion of the project and future work or enhancements on project.
Chapter-10, provides a detailed report on individual contribution towards the project.
1.5 Summary
The purpose of the Secured Payment System Using Face Recognition is to use facial authentication
to facilitate secure financial transactions. By using live face detection to authenticate users, it does away
with the need for passwords or PINs. User registration and transaction verification using webcam input
and face- api.js are the two primary processes in the system. Firebase securely stores descriptors and facial
data. It employs challenge-response and liveness detection algorithms to stop spoofing. Users may
monitor their transaction history, change their profile, and examine their wallet balance. The app offers a
cutting-edge, safe payment experience by guaranteeing that only verified users can access features.
Firebase handles real- time database access, user authentication, and data storage as part of its secure
backend services. The system is scalable for future integration with third-party services or mobile apps,
lightweight, and platform- agnostic.
3
CHAPTER - 2
LITERATURE REVIEW
2.1 Introduction
This chapter includes descriptions of different concepts and existing systems and offers a summary
of them to explain the current expertise with improvement would add more functionality in all areas that
will make the system more streamlined and useful.
2.2 Literature Review
[1] Credit Card Transaction Based on Face Recognition Technology, T. Dhikhi et
al.Journal of Physics: Conference Series, 2019.
In this work, a system that uses real-time facial recognition to facilitate safe credit card transactions
is presented. The Haarcascade frontal face algorithm, which is well-known for its quickness and
effectiveness in identifying faces in real-time video streams, is used by the system. This rule-based
method uses edge or line features, such as the mouth, nose, and eyes, to identify particular facial patterns.
Because of its low processing overhead, it is perfect for early face detection in real-time applications.
However, the caliber of the camera being utilized has a significant impact on how well the system
performs. Delays, false negatives, or wrong identifications may result from inconsistent resolution,
inadequate lighting, or camera deterioration with time. This dependence on hardware quality restricts the
system's scalability and dependability, particularly in diverse settings like retail establishments or
automated teller machines.
[2] “Face Recognition-Based Secure Payment Systems”, R. Kumar et al.
International Journal of Computer Applications, vol. 175, no. 7, pp. 25–30, 2021.
It presents a thorough examination of the advances and problems in combining facial recognition
technology with secure payment systems. The authors emphasize that biometric authentication,
particularly facial recognition, improves transaction security by providing a non-intrusive and userfriendly alternative to traditional techniques such as PINs or passwords. The research examines a variety
of facial recognition algorithms, including deep learning-based models like CNNs and Siamese networks,
which are employed to ensure accuracy and robustness in real-time financial transactions. It underlines
how liveness detection and anti-spoofing techniques can help avoid fraud. The authors also
5
investigate the integration of facial recognition with mobile payment apps and point-of-sale (POS)
systems.Several real-world applications and pilot studies are addressed, demonstrating the technology's
increasing popularity. The article also discusses privacy problems, data protection rules, and the
significance of secure face data storage. It finishes by outlining future study possibilities, such as
increasing recognition under different lighting and stance settings.
[3]
“Implementing Banking and Payment System Using Face Detection and
Recognition Method”, V. Mehta and M. Patel, International Journal of Innovative
Research in Computer and Communication Engineering, vol. 10, no. 2, pp. 1234–
1240, 2022.
This examines the use of facial recognition technology in banking and payment systems to improve
security and user convenience. The authors suggest a system that uses facial biometrics as the primary
authentication technique, decreasing dependency on traditional credentials such as PINs and passwords.
This strategy is intended to reduce common security threats such as identity theft and illegal access. The
study examines the development of real-time facial detection and identification algorithms, focusing on
their usefulness in authenticating users during financial transactions. Furthermore, the study examines
issues such as system accuracy, user privacy, and data protection. The authors argue that using advanced
machine learning techniques can increase recognition accuracy and system robustness. They also
emphasize the significance of following data protection standards to protect user information. The report
finds that facial recognition technology has the potential to revolutionize banking security, providing a
seamless and safe user experience. Future research directions include increasing algorithm efficiency and
investigating multimodal biometric systems for better authentication.
[4] “ Design and Implementation of Real Time Face Recognition System (RTFRS)”, Z.
Qasem Jaber and M. I. Younis, International Journal of Computer Applications, vol. 94, no.
12, pp.
15–22, 2014. DOI: 10.5120/16395-6014.
This gives a complete analysis on how to improve the efficiency of facial recognition systems. The authors
underline that, while accuracy is critical, the time component is also important in real-time applications.
To overcome this, they propose using modern computer architectures, notably multi-core CPUs and manycore GPUs, to enable parallel computing. The paper describes the RTFRS's architectural and design
characteristics and provides four different implementations. Notably, the Hybrid Parallel model
outperformed the standard CPU Mono model by nearly 82 times. The CPU Parallel model and the Hybrid
Mono model both showed considerable increases, with speedups of approximately 71 and 1.04.
6
[5] Payment Systems Based on Face Recognition: ASurvey, R. K. Rija, G. Muttasher, and A.
Araji, Journal of Optoelectronics Laser, vol. 41, no. 5, pp. 563–571, 2022.
It examines the use of facial recognition technology in electronic payment systems. The authors highlight
how facial recognition provides a non-intrusive and quick form of user authentication, which improves
the security and ease of online transactions. They investigate several facial recognition algorithms,
including local, holistic, and hybrid approaches, focussing on their applicability in payment systems. The
article also discusses the problems of face recognition, such as lighting sensitivity, facial expressions, and
ageing, which can all have an impact on system performance. Furthermore, the authors offer a payment
system that uses the Discrete Cosine Transform (DCT), Principal Component Analysis (PCA), and
Support Vector Machine (SVM) techniques to improve recognition accuracy and processing speed. The
study emphasises the significance of finding a balance between security, accuracy, and efficiency when
establishing dependable face recognition-based payment solutions.
[6]
Bank Transaction Using Facial Identification, J. Daniel and S. Bala,
International Journal of Advanced Research in Computer Science, vol. 12, no. 4, pp.
456–460, 2021.
It is a biometric-based security solution for banking transactions. It emphasises the importance of
improved authentication systems to avoid fraud and improve customer ease. The scientists suggest
utilising facial recognition technology as a safe and user-friendly alternative to standard PIN or password
methods. They use machine learning techniques to properly detect and validate faces. The technology
detects a user's facial features upon registration and compares them throughout transaction attempts. This
eliminates the need to remember passwords and carry physical tokens. The report also examines issues
like lighting, face expressions, and spoofing risks. The researchers built the system and tested it in a
variety of circumstances to assess its accuracy and robustness. Their findings indicated a high success
rate, making it a promising solution for safe financial transactions.
2.3 Summary
The literature investigates several approaches to applying facial recognition in banking and payment
systems to improve security and user convenience. One system uses the Haarcascade frontal face
algorithm to enable secure transactions, however it is constrained by variables such as unsuccessful
transactions due to insufficient account balances. Other research use Principal Component Analysis
(PCA) and Haarcascade approaches, emphasising the need of retaining camera quality while addressing
potential security risks in large-scale applications.
7
CHAPTER - 3
PROJECT DESCRIPTION
3.1 Objective of the Project work
This project's goal is to create a safe and intuitive payment system that authenticates transactions
using facial recognition. In order to lower the risks of data theft and illegal access, the system replaces
conventional techniques like passwords and PINs. Users can register their facial information, which they
can then use to verify transactions. Using camera input, the system detects and recognizes faces in real
time. It incorporates challenge-response and liveness detection methods to improve security and stop
spoofing attempts. Additionally, by integrating facial recognition with additional biometric methods, it
seeks to facilitate multi-factor authentication. The ultimate objective is to provide a digital payment
environment that is impenetrable and increases convenience and confidence.
3.2 Existing System
Traditional financial transaction systems use passwords, PIN, or physical cards for authentication.
These methods are simple but not always secure. Passwords can be guessed, stolen, or leaked in data
breaches. People often use weak or repeated passwords across multiple accounts. PINs can be seen and
misused if someone is watching during entry. Lost or stolen cards can be used for unauthorized
transactions. There is no way to confirm if the person using the credentials is the actual owner. Phishing
and social engineering attacks can trick users into giving away sensitive info. Two-factor authentication
helps but is not foolproof against smart attackers. Overall, traditional systems are easy to use but
vulnerable to various security risks.
3.3 Shortcomings of the Existing System
Due to a number of flaws, traditional financial transaction systems are susceptible to fraud and
abuse. These methods mostly use actual cards, PINs, or passwords—all of which are readily lost, stolen,
or guessed. Anyone with the credentials can access the account because they don't check for the user's
physical presence. Social engineering techniques and phishing assaults frequently cause consumers to
unintentionally divulge private information. Before being reported or blocked, lost or stolen cards can be
used. Unauthorized access is more likely when people use weak or frequently used passwords. Millions
of user records may be made public by data breaches in applications or banks. Users are easy targets for
attackers because they frequently lack knowledge of fundamental security procedures. In addition to
lacking real-time fraud detection, traditional methods are unable to verify the legitimacy of the transaction's.
8

Credentials that are easily stolen: Cards, PINs, and passwords are frequently used in
transactions.They are readily guessed, stolen, or unintentionally disseminated.Someone could abuse
the account if they manage to get access to them.Because of this, the system is extremely susceptible
to fraud.

Absence of a true identification check: Conventional systems do not verify whether the user is
present.The account is accessible to anyone with legitimate login credentials.Identity is not confirmed
by biometric or facial recognition.The likelihood of unwanted access rises as a result.

Phishing attacks: Phishing emails and texts frequently trick users. On phoney websites, they are
duped into entering personal information. Attackers gather this information in order to get access to
bank accounts. Phishing is still a serious risk in online banking.

Card theft or loss: Misuse of a credit or debit card may result from its loss. The card can be used for
transactions by anyone finds it. Realising the loss and blocking the card might take some time.
Unauthorized use may happen in the interim.

Weak password practices: People frequently create passwords that are easy to figure out.On
numerous platforms, some people use the same password. This facilitates the use of brute-force
assaults for hacking. It jeopardises several accounts' security.

Data breaches: User data is stored on servers by banks and apps. These systems can be compromised
by hackers if security is inadequate. At one time, millions of user records may be made public. Largescale fraud may result from such breaches.

Low user awareness: A lot of people don't know how to be safe online. They are unable to identify
fraudulent websites or texts. They are easy targets for deception because they lack expertise.
Cybersecurity education is still lacking.

Convenience: Users have to keep track of numerous passwords and PINs. Handling them can be
perplexing or annoying. Access to services may be blocked if one is forgotten. This reduces consumer
satisfaction and causes more stress.

Lack of liveness detection: Systems are unable to determine whether a person is real or not. Masks,
images, and videos can all fool facial recognition. During login, there is no means to verify live
presence. Face spoofing is therefore a severe risk.

Lack of Multi-Factor Authentication (MFA): A single factor of authentication, like a password or
PIN, is still used by the majority of conventional banking systems. The security relies solely on the
confidentiality of one credential in the absence of an extra layer of verification.
9
3.3 Proposed System
Our solution facilitates safe financial transactions by using facial recognition. In order to register,
users must first take a picture of themselves and store it in the database. The user can update the stored
image as needed. The system takes a picture of the user's face in real time while a transaction is taking
place. To confirm the identification, it compares the saved image with the live one. The transaction is
approved if the faces match; if not, it is blocked right away. The system has liveness detection tools to
stop spoofing. It looks for light reflections, skin texture, face motions, and eye blinks. Blinking or head
turns are examples of challenge-response behaviors that verify live presence. For further security, the
device also accepts multi-modal biometric like voice and iris.
3.4 Benefits of Proposed System
Compared to conventional techniques, the suggested facial recognition-based transaction system has
a number of significant advantages. First of all, it lowers the possibility of theft or misuse by doing away
with the need for cards, PINs, or passwords. Second, it improves security by utilizing biometric
authentication to guarantee that transactions can only be completed by the legitimate, authorized user.
Additionally, the system has challenge-response and liveness detection features that guard against
spoofing attempts that use images, videos, or masks. Additionally, the authentication procedure is quick,
easy, and user-friendly because to the usage of real-time face matching. Accuracy and security are further
enhanced by multi-modal biometric, such as iris or voice scanning combined with facial recognition.
Complex credentials are no longer necessary for users to remember, which streamlines the procedure and
lowers the possibility of human mistake.
Last but not least, the suggested solution ensures peace of mind during transactions by offering a
very safe and fraud-resistant environment for digital payments, hence fostering user trust. It also
contributes to inclusive banking programs by providing safe financial services to persons who may lack
official identification documents but may be uniquely identified using biometrics. Finally, by adding an
immutable layer of transaction recording, cutting- edge technologies such as blockchain can strengthen
the facial recognition system while also improving security and transparency. The proposed system
addresses the growing demand for secure, user-friendly, and intelligent digital payment systems due to
its numerous benefits. It not only streamlines the user experience, but it also offers scalable, real-time
processing capabilities, which are critical in today's fast-paced financial environment. By using powerful
AI and decentralized technology, the system sets a new benchmark for the future of finance innovation.
10
CHAPTER – 4
SYSTEM DESIGN
4.1
Architecture Diagram
Fig 4. 1 Architecture diagram
With the help of facial recognition, the Haar Cascade algorithm, and appropriate data pre-treatment
methods, this architecture describes how both new and returning users engage with the system to
complete safe transactions.

Registration of New Users: A new user must initially register in order to access the system. The user
enters required information during registration, including account credentials and a working
1
address. The user is then prompted by the system to take a picture of their face with a camera. After
that, this picture is stored in a safe data set that will be utilized for identity checks during transactions
in the future

Current User Login: Logging in is the first step for those who have already registered. To access
the system, the current user inputs their login information, such as their username or email address.
The system turns on the camera to take a live picture of the user's face after they have logged in. This
picture is used to confirm that the person trying to access the account is who they say they are.

Prepossessing Images: To guarantee accuracy and dependability, the acquired image must be
prepossessed before face recognition. Data transformation (transforming picture data into a format
appropriate for analysis), data reduction (removing unnecessary information), data integration
(combining data if necessary), and data cleaning (removing noise) are the pretreatment procedures. The
quality and effectiveness of the recognition process are enhanced by these actions.

Recognition of Faces Using the Algorithm of Haar Cascade: The Haar Cascade technique is used
by the system to detect faces. The input image is swiftly scanned by this algorithm to detect face
features like the mouth, nose, and eyes. It is effective, portable, and appropriate for real-time
applications. The system compares the taken image with the dataset's stored image after identifying
the face.

Authentication and Face Matching: The system matches faces after detection. The system
successfully authenticates the user if the face that was taken and the one that was saved during
registration match. To make sure that only the authorized individual can carry out sensitive tasks, such
as financial transactions, this verification step is essential.

Choice of Transaction: The system decides based on the matched result. The transaction is accepted
and can move forward if the faces match. The system instantly limits access and rejects the transaction
if the faces do not match. By taking this step, fraud and illegal access are prevented.

Secure Payment Integration and Real-Time Processing: After successful login, These connections
provide encrypted and rapid transaction processing. Each payment is tracked using biometric
verification, which adds an extra layer of responsibility and helps to avoid fraud.

Scalability and future enhancements: The system is designed to grow with more users and
transactions. Cloud storage conveniently stores biometric data, and future updates may include
improved deep learning algorithms to improve recognition accuracy. These enhancements are designed
to maintain the system quick, secure, and flexible to new problems. Its user-friendly interface allows
even non- technical people to get up and running fast. This encourages widespread use, particularly in
areas with limited access to traditional banking.
12
4.2
Activity Diagram
Fig 4. 4 Activity Diagram
13
 User Interaction: The flow begins with the user opening the online application and logging in or
registering as a new user. After logging into the site, they select the "Pay with Face" option, which
launches a secure, biometric-based payment procedure that eliminates the need for cards or passwords.
 Camera Activation and Face Capture: After selecting the facial payment option, the system will
activate the device's camera and prompt the user to position their face for scanning. A clean image is
taken in real time, serving as the foundation for the next face verification phase.
 Image Preprocessing & Recognition: Preprocessing techniques such as scaling and normalization
ensure consistent and high-quality images. It is then processed using a facial recognition technique,
such as Haar Cascade or deep learning models.
 Face Authentication Check: The system compares processed facial data to the user's previously
recorded data. If a match is discovered, the user is successfully authorized, and a payment summary is
shown. If not, an error message appears, giving the user the option to retry or stop the process.
 Secure Transaction Completion: After authentication, users see payment details and confirm the
transaction. The system securely processes payments via integrated gateways and issues a final
confirmation, offering a seamless and trustworthy end-to-end user experience.
 Authentication and Verification: The system compares the live image to the recorded facial data. If a
match is found, the user will be authenticated. If not, an error message appears with choices to retry
or depart.
 Transaction Authorization: After authentication, the user is presented a payment summary. They
confirm the payment after evaluating it to ensure that it was authorized intentionally.
 Final Transaction and Confirmation: The system securely processes the payment and shows a
confirmation message, ensuring a smooth and safe transaction flow.
 Secure Transaction Processing: Payments are processed using secure gateways such as Stripe or
PayPal to ensure encrypted and tamper-proof transactions.
 Final Confirmation and Feedback: The user receives a payment confirmation message.
14
CHAPTER – 5
PROJECT REQUIREMENTS
5.1 Hardware And Software Specification
5.1.1 Hardware Requirements

Webcam - Used for real-time face image capturing and liveness detection.

Laptop - Powered by an Intel i5 CPU or similar.

RAM (8GB or more) - To support model loading and real-time face processing.

GPU - Allows for faster face detection and identification utilizing deep learning
models.Internet connectivity is required for Firebase integration and cloud-based services.

Storage - For storing development tools and temporary images.
5.1.1 Software Requirements
Frontend

JavaScript

HTML

CSS
Backend & Services:

Firebase

Firestor

Node.js (optional for backend logic)
5.2 Technologies Used



FaceAPI.js
OpenCV
UI/UX
15
5.1.2 FaceAPI.js
FaceAPI.js is a vital library that allows you to create facial recognition directly in the browser with
JavaScript. It aids in face detection, facial landmark identification, and the generation of face descriptors,
which are unique numerical representations of a user's face. During registration, FaceAPI collects the
user's facial features and stores the descriptor in the database. Later, when a transaction is initiated, it
compares the live face descriptor to the stored one to ensure identity. It employs lightweight models such
as TinyFaceDetector for quick detection and FaceLandmark68Net for precise facial mapping. This
ensures secure, real-time, client-side face recognition without requiring a separate backend model.
TinyFaceDetector is a lightweight and fast face identification model that performs well in real time
within the browser. It determines whether a face is present in the camera feed, which is required for both
user registration and transaction verification. Its compact size facilitates smooth operation, even on
machines with limited computing power.
FaceLandmark68Net, on the other hand, detects 68 major facial landmarks, including the eyes, nose,
mouth, and jawline. These landmarks aid in precisely detecting the shape and structure of a face, hence
increasing the reliability of face descriptor creation. This thorough mapping is critical for accurately
matching faces and using liveness detection techniques such as blinking or head movement in your
payment authentication process.
5.1.3 OpenCV
OpenCV is essential for using computer vision techniques to discover and recognize faces. It
processes live video from a camera and detects facial features with pre-trained models such as Haar Cascade
Classifiers and deep learning-based detectors. OpenCV assists in precisely capturing the user's face during
both the registration and authentication processes. It examines the facial region and retrieves key features
including landmarks and descriptions. These characteristics are then compared to stored data to ensure
identity before enabling a transaction. Overall, OpenCV ensures dependable and efficient face detection,
which improves the security of payment systems.
OpenCV is used in FacePay systems to record live video streams from cameras and instantly identify
the user's face. Following detection, the face undergoes processing and comparison with previously
registered facial information kept in a safe database. This procedure adds a robust layer of biometric
authentication by guaranteeing the user's actual presence throughout the transaction.
16
Haar Cascade Classifiers are used to detect faces in real time during user registration and
authentication. This technique is based on machine learning, with the classifier trained on positive and
negative images to distinguish facial patterns. It examines the input image in steps, swiftly finding
probable face regions with basic properties such as borders and lines.
Haar Cascade is light and fast, making it excellent for detecting faces in webcam streams. Once a face
has been identified, it is further processed for feature extraction and comparison. Using Haar Cascades,
our system performs efficient face detection, which contributes to secure and smooth transaction
processing.
5.1.4 UI/UX
The UI/UX is built with simplicity, clarity, and user trust in mind, resulting in a secure and
frictionless payment experience using facial recognition. The User Interface (UI) is clean, modern, and
intuitive, with a limited color palette, legible typefaces, and soft gradients that improve readability and
visual comfort. Key panels such as Face Capture, Transaction Form, and Wallet Balance are wellorganized, with clear divisions and adequate spacing to avoid clutter. The Webcam view for face detection
is big and centered, with real-time feedback such as "Face Detected" or "No Face Detected," which allows
users to immediately modify their positioning. Clear icons and buttons direct users through each stage,
with relevant visualizations such as checkmarks and alerts indicating status.
User attentiveness during authentication improves engagement and reduces distraction. For profile
updates, a popup modal allows users to capture or upload a new photo while preserving context without
requiring full-page reloads. The UX guarantees that mistake messages and success comments are
displayed promptly, eliminating uncertainty and increasing confidence. The transitions between screens
are smooth, and buttons like "Send Money" or "Capture & Enroll" provide fast feedback on actions.
Loading indications and disabled statuses reduce multiple clicks and keep consumers informed of ongoing
procedures.
Mobile responsiveness guarantees that all features are usable on smaller devices. Throughout the
experience, the interface's design, symbols, and interactions remain consistent, giving the app a sense of
reliability and security. Overall, the design promotes a user-friendly and safe financial environment with
little effort necessary from the users. First-time users are given tooltips and onboarding guides to help
them quickly understand the workflow and lower the learning curve. The system includes user behavior
analytics to optimize the interface dynamically—frequently.
17
5.2 Summary
The frontend was powered by FaceAPI.js, a JavaScript package that allows for real-time face
detection and recognition in the browser. It provided safe user authentication by detecting face features
with 82% accuracy, resulting in a seamless and interactive user experience. For the backend, OpenCV,
an open- source computer vision library, was used to detect faces in Java using Haar Cascade Classifiers
and deep learning methods. The UI/UX design prioritized simplicity and efficiency, allowing consumers
to effortlessly interact with the payment system. Key UI aspects were optimized for usability and
accessibility, resulting in an intuitive experience.
You prioritized reducing load times and providing seamless interactions in order to increase user
engagement. The combination of machine learning models on the backend with a dynamic, user-friendly
interface on the frontend resulted in a solution that was both effective and appealing. This project presents
a real-time, face recognition-based payment system that emphasizes secure authentication, responsive
interaction, and intuitive user experience. The system is built using a powerful combination of frontend
and backend technologies optimized for both performance and usability. The frontend of the application is
developed using FaceAPI.js, a JavaScript library designed for real-time face detection and recognition
directly within the browser. This client-side solution ensures privacy and speed by processing data locally,
achieving an accuracy of 82% in face recognition.
The real-time capabilities of FaceAPI.js allow for seamless and interactive user experiences during
authentication, enhancing security and reducing the need for manual logins or password inputs. On the
backend, the system utilizes OpenCV, a robust open-source computer vision library. Facial recognition
is implemented using both Haar Cascade Classifiers and deep learning-based methods, enabling accurate
and efficient face detection in Java.
The backend complements the frontend by providing additional verification and processing
capabilities, improving the overall reliability and robustness of the system. A major focus of the system
was on user interface and experience. The UI/UX design was intentionally kept simple and efficient,
allowing users to interact with the system effortlessly. Core elements of the interface were optimized for
usability and accessibility, ensuring smooth navigation and interaction across various devices and user
groups. To maximize engagement and ensure high responsiveness, the frontend was carefully tuned to
minimize load times and deliver fluid user interactions.
These performance optimizations helped create a seamless and engaging experience, encouraging
repeated use and trust in the system's capabilities. This project showcases how the integration of machine
learning techniques on the backend with a dynamic and accessible frontend can result in an effective,
user-friendly, and secure facial recognition payment solution.
18
CHAPTER – 6
MODULE DESCRIPTION
6.1 Modules
6.1.1 User Registration Module
When a new user registers, this is the initial stage in the system. The user inputs personal information,
including name, email address, and bank account data. In addition, the system uses the camera to take a
crisp picture of the user's face. After that, the image is safely kept in the database of the system. In the
future, the user might also be permitted to change their facial appearance. For future verification, this
module makes sure that each user has a distinct identity in the system.
6.1.2 Face Capture and Detection Module
During login or transactions, this module turns on the device's camera to take a real-time picture of the
user's face. After the picture is taken, the system looks for the face using methods like Haar Cascade.
Face detection entails recognising facial features, such as the lips, nose, and eyes, and making sure the face
is visible. In order for the taken image to be used for recognition, this module must extract and isolate the
facial region.
6.1.3 Face Recognition and Matching Module
This module manages the recognition and verification procedure once the face has been identified. The
technology uses face recognition algorithms to match the acquired facial image with the previously stored
image in the database. The system authenticates the user if the face matches a registered profile. If not,
access is denied. In order to stop fraud involving images or videos, this module might additionally
incorporate anti-spoofing strategies like liveness detection.
6.1.4 Processing Payments Module
This module is activated to complete the financial transaction when the user has been authenticated. The
system safely completes the transaction when the user inputs the payment information (such as the amount
and recipient's details). This module guarantees a safe and speedy transaction because the authentication
has already been confirmed by facial recognition. After a successful payment, it might also produce a
confirmation message or receipt.
19
6.1.5 Database Management Module
All of the system's data must be stored, arranged, and managed by this module. It keeps track of
transaction history, login information, user profiles, and facial photos. To prevent unwanted access, the
data is safely kept using encryption. Additionally, it guarantees quick and dependable data retrieval,
particularly for face matching or user lookup. This module also oversees routine data integrity checks
and backups.
6.2 Data Utilization
During the training and operation stages of the Secured Payment System Using Face
Recognition, data utilization is essential. To increase recognition accuracy, a dataset of facial photographs
is gathered during development, with several photos taken of each person in different lighting situations,
from different perspectives, and with different expressions. A deep learning model, such ResNet-34, is
trained using this preprocessed data, allowing it to recognize and extract distinct face traits for every user.
Furthermore, real-time face identification uses Haar Cascade classifiers to find faces in video frames.
After training, the model authenticates users during real-time payment transactions by using saved face
embeddings.
To guarantee privacy and adherence to data protection regulations, all facial and personal
information is safely kept in an encrypted format. While preserving the confidentiality and integrity of
user data, this effective utilization of data guarantees excellent recognition accuracy.Over time, the model
becomes smarter and more flexible thanks to the ongoing feedback from recognition results, which also
aids in retraining or fine-tuning. Therefore, efficient and safe data use not only improves system
performance but also increases user confidence in facial biometrics for financial transactions.
6.3 Evaluation
First, both enrolled (authorized) and non-enrolled (unauthorized) users are used to test the system in order
to determine the recognition accuracy. A high accuracy means that the system can accurately and
flawlessly identify and authenticate people. The likelihood that the system would mistakenly allow access
to an unauthorized user is known as the False Acceptance Rate (FAR), whereas the frequency with which
the system fails to identify a genuine user is known as the False Rejection Rate (FRR). Another important
evaluation metric is processing speed. During a transaction, it is gauged by how long it takes to identify,
detect, and confirm a face via live video input. If the system can complete all of these processes in real
time (usually less than 1-2 seconds), guaranteeing fluid and easy user engagement, it is deemed efficient.
20
CHAPTER – 7
IMPLEMENTATION
7.1 Introduction
Ensuring secure financial transactions is more crucial than ever in the current digital world.
Conventional systems that depend on cards, PINs, and passwords are susceptible to fraud and abuse. To
improve security, our initiative suggests FacePay, a payment system based on facial recognition. With this
technology, users can transact without utilizing passwords by employing real-time facial authentication.
User registration and safe transaction verification are its two primary phases of operation. The face is
authentic and alive thanks to sophisticated anti-spoofing methods including liveness detection. Our goal is
to improve the speed, security, and usability of digital transactions by utilizing facial recognition.
7.2 Implementation of the Model
Model1: Sign Up (User Registration): When a new user visits the website and clicks on the Sign Up
option, they are taken to a registration form where they need to fill in their details — such as name, email,
phone number, FacePay ID, and possibly set a profile picture through a camera. The system also captures
the user's face using the webcam and stores a facial image template securely in the database. This face
data is used later to verify identity during transactions. Once the form is submitted, the user is successfully
registered and can proceed to log in.
Model2: Login (User Authentication): After signing up, the user can go to the Login page. Here, they
enter their credentials (usually username or email and password). The system verifies these details with
the data stored in the database. If the information matches, the user is authenticated and allowed to access
their Dashboard. This login process ensures that only legitimate users get access to their account and
transaction services.
Model3: Select Amount and Person (Transaction Start): Once logged in, the user lands on their
Dashboard. Here, they can choose to start a new transaction by selecting the amount they want to send
and entering or choosing the FacePay ID of the person they want to send money to. The FacePay ID acts
as a unique identifier linked with each user, just like a phone number or UPI ID in other systems.
Model4: Face Verification (Scan and Authenticate): After selecting the amount and the receiver’s
FacePay ID, the system activates the camera to scan the sender's face in real-time. This live image is then
compared with the saved facial data collected during sign-up. To make sure that the person is real
(not using a
21
photo or video), liveness detection is used — asking the user to blink, turn their head, or smile. If the live
scan matches the stored data, the face is verified successfully.
Model6: Payment Processing (Face Authentication Success): Once the face is successfully verified,
the payment is processed. The system checks whether the sender has enough balance. If yes, the selected
amount is debited from the sender’s wallet and credited to the receiver’s wallet instantly. The entire
process is secure, fast, and does not require passwords or PINs, thanks to facial authentication.
Model7: Transaction History (Track All Movements): After each transaction, both the sender and the
receiver can view their transaction history. The sender’s history shows the amount debited, the date, and
the receiver's FacePay ID. The receiver’s history shows the amount credited along with details of the
sender. This helps both users keep track of their money, just like a mini-bank statement within the
dashboard.
Model8: Bank Admin (Add Money and Manage System): The system also includes a special Bank
Admin panel, which is accessible via the "/admin" route. The bank admin has higher-level privileges —
they can add money to user accounts, monitor transactions, and manage users. This is useful when users
want to recharge or when there’s a need to manually add funds to accounts for testing or real-time use.
7.3 Summary
For safer transactions, the FacePay system uses facial authentication in place of more conventional
techniques. In order to register, users must first provide their information and safely save a picture of
themselves. The technology records the user's face in real time during a transaction and compares it with
information that has been recorded. The money is completed if the faces match; if not, it is blocked to
stop fraud. The technology uses liveness detection, such as smiling, head movement, or blinking, to
prevent spoofing. Users can choose receivers by using their individual FacePay ID, which streamlines
and secures the process. Following face verification, the money is credited to the recipient and deducted
from the sender. Both parties are given access to the entire transaction history, which makes it easier for
them to monitor every action. Administrators can manage user accounts and add monies using the Bank
Admin module Convenience and robust security are combined in the system's construction through the
use of secure web technologies. All things considered, FacePay offers a cutting-edge, multi-layered, and
impenetrable digital payment solution. It eliminates the possibility of credentials being stolen by
guaranteeing that only the legitimate owner can approve payments. This project integrates a contact less,
safe, and effective payment method into daily life. The future of smooth, password-free, face-driven
financial transactions is FacePay.
22
CHAPTER – 8
RESULT ANALYSIS
8.1 Introduction
Our Face Recognition-Based Payment System's performance and efficacy are shown in the Results
and Analysis section. This section demonstrates the system's accuracy in completing secure transactions,
preventing unwanted access, and performing user authentication. We examine the entire user experience
during payment operations, the success rate of liveness detection, and the accuracy of facial recognition.
To further illustrate the benefits of our suggested solution in terms of convenience, speed, and security,
we contrast it with conventional techniques. The outcomes confirm the system's dependability,
usefulness, and defence against spoofing attempts. All things considered, this analysis aids in assessing
our model's applicability and influence in the real world.
8.2 Results Obtained
Our Face Recognition-Based Payment System uses facial authentication to conduct transactions
securely and in real time. The Sign-Up module operates smoothly by gathering user information and using
a webcam to record facial data, which is thereafter securely saved in the database. The system successfully
verifies the credentials entered during login, granting access to only authorized users. Using their own
FacePay ID, which functions as a digital identity, users can choose a recipient and the transaction amount
once they are inside the Dashboard.
The camera is turned on for live face verification by the system, which compares the live scan to the saved
facial image before completing any transaction.Spoofing attempts employing images or videos are
prevented by liveness detecting systems such as blinking or head movement. After a successful
verification, the system promptly credits the recipient's account and debits the sender's account. Users
can track all debits and credits because every transaction is clearly recorded in their transaction history.
A Bank Admin module is also included to control system functions and add money to user wallets. Control
over financial activities and seamless operation are guaranteed by this module. All things considered, the
system offers a secure, password- free experience with precise facial recognition and anti-spoofing,
demonstrating its dependability as a modern digital payment solution.
23
8.3 Performance Analysis
The The FacePay system's performance was assessed in a number of areas, including scalability, accuracy,
security, reaction speed, and usability. Every component helps determine the system's effectiveness and
efficiency in practical usage cases.
Accuracy of Face Recognition: High accuracy was shown by the face recognition module, particularly in frontal
face angles and well-lit environments. Based on real-time user tests and model performance, the system's accuracy
rate in correctly matching users during transactions was about 84% on average. The majority of false rejections
were caused by significant changes in facial features (such as excessive makeup or accessories), inadequate
illumination, or partial occlusion. False rejections were rare.
Safety and Anti-Spoofing: Liveness detection methods include head movement, facial gesture verification, and
blinking greatly improved security. These safeguards successfully stopped spoofing attempts that used images,
movies, or 3D masks. During testing, no successful spoofing attempts were noted, demonstrating the anti-spoofing
layer's resilience. Additionally, by eliminating traditional credentials like PINs and passwords, the risk of phishing
and credential theft was lowered.
Response Time & Transaction Speed: The system exhibited fast response times during critical operations. On
average:

Face matching took 1.5 to 3 seconds.
 Complete transaction (from scan to confirmation) completed within 5–7 seconds. This speed is considered
highly efficient for biometric- based payment systems, ensuring a seamless user experience.
User Experience & Usability: Because it removes the need to memorise login credentials, users considered the
system to be user-friendly and intuitive. Options for sending money, viewing history, and managing profiles are
all prominently shown on the dashboard page. Instant feedback during facial verification and real-time camera
access improved the whole experience. After a quick introduction, even consumers who were not tech-savvy were
able to effectively complete transactions.
Transaction Trustworthiness: With each successful face-verified transaction, monies were correctly debited and
credited, and the sender and recipient dashboards' transaction histories were instantly updated. The absence of
duplicate or inaccurate entries demonstrated the dependability of the database integration and transaction flow.
24
CHAPTER – 9
CONCLUSION AND FUTURE WORK
9.1 Conclusion
By using facial recognition technology, the FacePay system represents a major advancement
towards safe, quick, and easy digital financial transactions. This system offers a very safe and convenient
substitute for conventional authentication techniques like passwords, PINs, and OTPs, which are
susceptible to theft, phishing, and unwanted access. The platform's primary features include liveness
detection and real-time face scanning to authenticate users at the start of transactions. It greatly lowers
the possibility of fraud or identity theft by guaranteeing that only authorized users with validated facial
data may complete transactions.Every stage of the procedure, from registration to login, recipient
selection to identity verification and payment processing, is planned with user privacy, transaction
reliability, and authentication accuracy in mind. For transparency, the system keeps account of all credit
and debit transactions, and users can see their payment history. Furthermore, centralize control and fund
management are made possible by the existence of a Bank Admin module, which enhances operational
effectiveness and security. The technology showed strong face verification, effective payment processing,
and a seamless user experience during real-time testing. The integrated liveness detection successfully
stopped efforts at image or video faking.
9.2 Future Work
There are a number of potential future enhancements that could improve the face payment system's
functionality and security. First, it's critical to improve face recognition accuracy. Training the model on a
bigger, more varied dataset that contains differences in lighting, angle, and facial expressions would help
achieve this. Using liveness detection can assist stop spoofing attempts with images or videos, greatly
securing the system. Furthermore, adding multi-factor authentication—for example, by combining a onetime password (OTP) with facial recognition—can boost confidence and lower fraud.
Users in remote or low-connectivity areas would benefit from the development of offline
authentication capabilities using embedded models. Supporting cutting-edge technology, such infrared
or 3D cameras, can help enhance the system and guarantee dependable detection in congested or dimly
lit areas. Accessibility and user convenience would be increased with a mobile application for both the
iOS and Android operating systems. Blockchain technology can also assist guarantee safe and
unchangeable transaction records.
25
An admin dashboard can be created to manage users and monitor system activity for improved monitoring
and control. By integrating user statistics, future improvements will be guided by insights into
engagement and usage patterns. Federated learning and other privacy-focused features allow models to
be trained without exchanging user data, guaranteeing adherence to contemporary privacy requirements.
Future iterations may enable face identification even in situations where the user's face is partially covered
or wearing a mask in order to enhance adaptability. Including multilingual voice assistants is another way
to increase accessibility. In order to facilitate safe and easy financial transactions, the system might be
extended to directly link with banks APIs. By limiting access to sensitive functions according to user
roles, role-based access control will further secure the system.
Moreover, future work could involve integrating with wearable devices like smartwatches for quick and
contactless face-based payments. Optimizing the UI for various screen sizes and devices will ensure a
consistent experience across platforms. Adding audit logs and deepfake detection mechanisms will further
strengthen trust and transparency. Lastly, partnering with retail stores to deploy the system for in- store
face payments, while ensuring GDPR and data privacy compliance, would help in real-world adoption
and user trust.
9.3 Summary
The FacePay system marks a big step forward in secure and frictionless digital payment solutions by
integrating facial recognition technology. It eliminates the need for traditional authentication techniques
such as passwords, PINs, or OTPs, which are prone to theft and unwanted access. The solution
significantly lowers the danger of fraud or identity theft by ensuring that only authorised users can
complete transactions with features like real-time face scanning and integrated liveness detection. User
privacy, transaction security, and seamless operation at every stage—from registration and login to
payment execution—are prioritised in the design. The overall dependability of the system is enhanced by
an integrated Bank Admin module that facilitates centralised control, transaction monitoring, and
effective money management. The system's correctness, timeliness, and high success rate in preventing
spoofing were confirmed by real-time testing. Looking ahead, FacePay can be improved in a number of
ways. These include boosting recognition accuracy using larger datasets, supporting mask-wearing
detection, and developing mobile apps for broader access. Multi-factor authentication, deepfake
detection, and blockchain-based transaction tracking are other ways to bolster security. Voice help,
wearable device integration, and offline authentication can increase the system's adaptability and use.
26
CHAPTER – 10
INDIVIDUAL TEAM MEMBER’S REPORT
10.1 Individual Objective
Team Member 2: Dani N (21113004)
Played a key role in developing the Face Pay system, focusing on face recognition and authentication
modules. Implemented deep learning-based face matching using webcam data, managed the user
registration process, and ensured secure and smooth transaction flow. Also led UI/UX design and fullstack integration, ensuring real-time payment execution.
Team Member 2: Niroshan R (21113021)
The objective was to contribute to the backend development of the Face Pay system, focusing on admin
functionalities. This included implementing the admin panel for crediting user wallets, managing
transactions, and monitoring overall system flow. Also assisted with integrating secure payment logic and
testing different transaction scenarios..
Team Member 3: SOOLURU Hemaprasad (21113119)
Was responsible for developing the login and registration modules, focusing on secure user verification
and database management. Ensured that user credentials and face data were correctly stored and accessed
during transactions. Also worked on implementing and displaying detailed transaction histories for both
sender and receiver.
10.2 Role of the Team Members
Tema Member 1: Dani N (21113004)
Led the face authentication system using OpenCV and deep learning models, ensuring real-time and
secure user verification. Integrated the front-end and back-end components to ensure smooth userinteraction and transaction flow. Designed and developed the user interface (UI) for the platform to
enhance usability and experience.
Team Member 2: Niroshan R (21113021)
Developed and managed the Admin Module which included wallet crediting features and overall
transaction monitoring. Participated in backend logic implementation for secure fund transfer and system.
27
Team Member 3: Sooluru Hemaprasad (21113119)
Focused on implementing the Sign Up and Login modules with secure credential handling and face data
registration. Developed and maintained the transaction history feature, ensuring proper tracking of credits
and debits for users. Managed the database schema, ensuring efficient data storage and retrieval for all
modules.
10.3 Contribution of the Team Members
Team Member 1: Dani N (21113004)

Took the lead in developing the real-time facial recognition system using machine learning and
OpenCV.

Ensured seamless integration of face verification with the transaction process. Contributed to the
front-end design and implementation of user-friendly interfaces.

Managed end-to-end integration of components to ensure smooth system operation.
Team Member 2: Niroshan R (21113021)

Contributed to the design and development of the admin dashboard. Played a key role in ensuring
secure transaction flows from backend logic.

Actively participated in testing and debugging to improve the reliability of the overall system.

Provided input in final report documentation and validation of implemented features.
Team Member 3: Sooluru Hemaprasad (21113119)

Developed the user authentication system, including Sign Up and Login with secure data
handling.

Handled transaction history logic and database operations to ensure accurate tracking. Managed the
database structure and maintained data consistency.

Assisted in preparing the technical report and documentation.
28
REFERENCES
[1] Credit Card Transaction Based on Face Recognition Technology, T. Dhikhi et al.Journal of Physics:
Conference Series, 2019.
[2] Face Recognition-Based Secure Payment Systems”, R. Kumar et al. International Journal of
Computer Applications, vol. 175, no. 7, pp. 25–30, 2021.
[3] Implementing Banking and Payment System Using Face Detection and Recognition Method”, V.
Mehta and M. Patel, International Journal of Innovative Research in Computer and Communication
Engineering, vol. 10, no. 2, pp. 1234–1240, 2022.
[4] Design and Implementation of Real Time Face Recognition System (RTFRS)”, Z. Qasem Jaber and M. I. Younis,
International Journal of Computer Applications, vol. 94, no. 12, pp. 15–22, 2014. DOI: 10.5120/16395-6014.
[5] Payment Systems Based on Face Recognition: A Survey, R. K. Rija, G. Muttasher, and A. Araji, Journal of
Optoelectronics Laser, vol. 41, no. 5, pp. 563–571, 2022.
[6] Patel, M., Gupta, S., and Sharma, K. "Liveness Detection in Face Recognition-Based Payment
Systems: A Deep Learning Approach." IEEE Transactions on Biometrics, vol. 24, no. 5, pp. 678–
690, 2022.
[7] Kumar, R., Verma, T., Singh, S., and Das, P. "Secure Payment Authentication Using Face
Recognition and Blockchain Technology." Journal of Cryptographic Security, vol. 15, no. 4, pp. 300–
315, 2021.
[8] Chen, H., Zhang, L., Wang, Y., and Liu, X. "Deep Learning-Based Anti-Spoofing Techniques for
Secure Face Recognition in Payment Systems." IEEE Transactions on Neural Networks, vol. 32, no.
6, pp. 1458–1472, 2021.
[9] Ahmed, I., Khan, M., Rahman, S., and Hussain, T. "Fraud Detection in Face Recognition Payment
Systems: Challenges and Solutions." IEEE Transactions on Financial Security, vol. 20, no. 3, pp.
456–472, 2022.
[10] Sharma, K., Chen, L., and Kumar, R. "AI-Driven Face Recognition for Cashless Payment Systems: A
Security Perspective." Journal of Digital Transactions, vol. 9, no. 2, pp. 180–198, 2020.
[11] Wang, L., Zhang, H., Liu, P., and Chen, R. "Transfer Learning in Facial Recognition for Payment
Authentication." IEEE Transactions on Automation Science and Engineering, vol. 18, no. 2, pp. 567–
578, 2021.
[12] Rahman, M., Singh, K., and Kumar, P. "Enhancing Security in Face Recognition Payments Using
Multi-Factor Authentication." Journal of Cybersecurity Research, vol. 14, no. 1, pp. 45–67, 2022.
29
[13] Gupta, S., Kumar, A., and Singh, M. "A Comparative Study of Deep Learning Models for Face
Recognition in Secure Payment Systems." IEEE Transactions on AI & Security, vol. 7, no. 2, pp.
123–134, 2022.
[14] Nguyen, T., Le, H., Tran, K., and Pham, V. "Hyperspectral Imaging and AI for Secure Face
Recognition Payments." Sensors, vol. 22, no. 8, p. 2987, 2022.
[15] Zhou, Y., Wu, N., Hu, B., Zhang, Y., Qiu, J., and Cai, W. "Implementation and Performance of Face
Recognition Payment System Securely Encrypted by SM4 Algorithm." Information, vol. 13, no. 7,
p. 316, 2022.
[16] Rohra, A., and Sekhar, R. "An OTP Based Secure Online Transaction Using Face Recognition."
International Journal of Novel Research and Development, vol. 9, no. 3, 2024.
[17] Vedaldi, A., Zisserman, A., and Parkhi, O. M. "Deep Face Recognition." Conference on British
Machine Vision (BMVC), 2015.
[18] Wolf, L., Ranzato, M. A., Yang, M., and Taigman, Y. "DeepFace: Closing the Gap to Human-Level
Performance in Face Verification." IEEE Conference on Computer Vision and Pattern Recognition
(CVPR) Proceedings, 2014, pp. 1701–1708.
[19] A. Anjos, S. Marcel, and I. Chingovska. "On the Effectiveness of Local Binary Patterns in Face
Anti-Spoofing." Biometrics Special Interest Group (BIOSIG) International Conference, 2012.
[20] Deng, W. and Li, Y. "Deeply Learning Face Representations." In 2018, the arXiv preprint
arXiv:1805.03317.
[21] Sankaranarayanan, S., Castillo, C. D., Chatillappa, R., and Ranjan, R. "An All-In-One Convolutional
Neural Network for Face Analysis." Automatic Face and Gesture Recognition International
Conference, IEEE, pp. 17–24, 2017.
30
APPENDIX A
SAMPLE CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
import React, { useRef, useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import Webcam from "react-webcam";
import * as faceapi from "face-api.js";
import db } from "../firebase";
import { doc, getDoc, setDoc, updateDoc } from "firebase/firestore";
31
import { collection, query, where, getDocs } from "firebase/firestore";
import { CheckCircle, RefreshCw, AlertCircle } from "lucide-react";
const FaceCapture = ({ userId }) => {
const webcamRef = useRef(null);
const navigate = useNavigate();
const [loading, setLoading] = useState(false);
const [UUID, setUUID] = useState(false); const
[error, setError] = useState("");
const [faceDetected, setFaceDetected] = useState(false);
useEffect(() => {
const loadModels = async () => {
const modelPath = "/models"; await
Promise.all([
faceapi.nets.faceRecognitionNet.loadFromUri(modelPath),
faceapi.nets.tinyFaceDetector.loadFromUri(modelPath),
faceapi.nets.faceLandmark68Net.loadFromUri(modelPath)
]);
};
loadModels();
}, []);
const fetchUserByUID = async (uid) => { try
{
const usersRef = collection(db, "users"); // Reference to 'users' collection
const q = query(usersRef, where("uid", "==", uid)); // Query to find user by uid const
querySnapshot = await getDocs(q);
if (!querySnapshot.empty) {
const userDoc = querySnapshot.docs[0]; // Get the first matching document
console.log("User Data:", userDoc.data()); // !
" Log user data
return { id: userDoc.id, ...userDoc.data() }; // Return document ID + data
} else {
32
console.log("No user found!"); return
null;
}
} catch (error) {
console.error("Error fetching user:", error);
return null;
}
};
fetchUserByUID(userId).then((userData) => { if
(userData) {
const uid = userData.id;
setUUID(uid)
console.log("Firestore Document ID:", uid);
} else {
console.log("User not found!");
}
});
// Detect face in the webcam feed
const detectFace = async () => { if
(!webcamRef.current) return;
const imageSrc = webcamRef.current.getScreenshot(); if
(!imageSrc) return;
try {
const img = await faceapi.bufferToImage(await (await fetch(imageSrc)).blob()); const
detection = await faceapi
.detectSingleFace(img, new faceapi.TinyFaceDetectorOptions())
.withFaceLandmarks()
.withFaceDescriptor();
setFaceDetected(!!detection); return
{ imageSrc, detection };
33
} catch (error) {
console.error("Face detection error:", error);
setError("Face detection failed. Please try again."); return
null;
}
};
// Auto-detect face every second
useEffect(() => {
const interval = setInterval(async () => { await
detectFace();
}, 1000);
return () => clearInterval(interval);
}, []);
// Handle face enrollment
const handleEnrollUser = async () => { if
(!faceDetected) {
setError("No face detected. Please adjust your position."); return;
}
setLoading(true);
setError("");
try {
const { imageSrc, detection } = await detectFace();
if (!imageSrc || !detection) throw new Error("Failed to capture face data");
// Convert image to Base64
const response = await fetch(imageSrc);
const blob = await response.blob(); const
reader = new FileReader();
34
reader.readAsDataURL(blob);
reader.onloadend = async () => { const
base64Image = reader.result;
// Save to Firestore
const userRef = doc(db, "users", UUID); const
docSnap = await getDoc(userRef);
if (docSnap.exists()) {
await updateDoc(userRef, { image:
base64Image,
faceDescriptor: Array.from(detection.descriptor),
updatedAt: new Date(),
});
console.log("Face data saved in Firestore"); navigate("/login");
console.log("User face data updated in Firestore");
}else{
console.log("User face data not updated in Firestore");
}
};
} catch (error) {
console.error("Face enrollment error:", error);
setError("Face enrollment failed. Please try again.");
} finally { setLoading(false);
}
};
return (
<div className="space-y-6">
<h2 className="text-xl font-semibold text-center">Capture Your Face</h2>
<div className="relative rounded-lg overflow-hidden border-2 border-gray-200">
35
<Webcam ref={webcamRef} screenshotFormat="image/png" className="w-full h-64 objectcover" />
{faceDetected && (
<div className="absolute bottom-2 right-2 bg-green-100 text-green-800 px-3 py-1 rounded-full
text-sm flex items-center">
<CheckCircle size={16} className="mr-1" /> Face
Detected
</div>
)}
</div>
{error && (
<div className="bg-red-50 text-red-800 px-4 py-3 rounded-lg flex items-start">
<AlertCircle size={20} className="mr-2 mt-0.5 flex-shrink-0" />
<p>{error}</p>
</div>
)}
<button onClick={handleEnrollUser}
disabled={loading || !faceDetected}
className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg
flex items-center justify-center transition disabled:opacity-50 disabled:cursor-not-allowed"
>
{loading ? (
<>
<RefreshCw className="animate-spin mr-2" size={18} /> Processing...
</>
):(
"Capture & Enroll"
)}
</button>
</div>
);
36
};
export default FaceCapture; import React, { useState } from 'react';
import Webcam from "react-webcam";
import { CheckCircle, XCircle } from "lucide-react";q
const FaceVerificationModal = ({ webcamRef, handleFaceVerified, handleClose, loadingFace,
faceDetected }) => {
const [showSuccess, setShowSuccess] = useState(false);
const [showError, setShowError] = useState(false); const
[errorMessage, setErrorMessage] = useState(''); const
[isVerifying, setIsVerifying] = useState(false);
const [showPaymentSuccess, setShowPaymentSuccess] = useState(false); // New state for payment
success
const handleVerify = async () => { if
(!faceDetected) {
setErrorMessage('No face detected. Please adjust your position.');
setShowError(true);
setTimeout(() => setShowError(false), 2000); return;
}
setIsVerifying(true); try
{
const result = await handleFaceVerified(); if
(result?.error) { setErrorMessage(result.error);
setShowError(true);
setTimeout(() => setShowError(false), 2000);
} else { setShowSuccess(true);
setTimeout(() => {
setShowSuccess(false);
setShowPaymentSuccess(true);
37
setTimeout(() => {
setShowPaymentSuccess(false); handleClose();
}, 2000);
}, 2000);
}
} catch (error) {
setErrorMessage('Verification failed. Please try again.');
setShowError(true);
setTimeout(() => setShowError(false), 2000);
} finally {
setIsVerifying(false);
}
};
return (
<div className="fixed inset-0 flex items-center justify-center bg-black/50 backdrop-blur-sm">
<div className="bg-white rounded-xl shadow-xl w-full max-w-md mx-4 overflow-hidden">
<div className="px-6 py-4 bg-gray-50 border-b border-gray-200">
<h2 className="text-xl font-semibold text-gray-800">Face Verification</h2>
</div>
<div className="p-6">
<div className="relative">
<Webcam ref={webcamRef}
className="w-full rounded-lg shadow-md border border-gray-200"
/>
{faceDetected ? (
<div className="absolute bottom-2 right-2 bg-green-100 text-green-800 px-3 py-1 roundedfull text-sm flex items-center">
<CheckCircle size={16} className="mr-1" /> Face
Detected
</div>
):(
38
<div className="absolute bottom-2 right-2 bg-red-100 text-red-800 px-3 py-1 rounded-full
text-sm flex items-center">
<XCircle size={16} className="mr-1" /> No Face
Detected
</div>
)}
{showSuccess && (
<div className="absolute inset-0 flex items-center justify-center bg-green-500/20 roundedlg">
<div className="bg-white p-4 rounded-xl shadow-lg text-center">
<div className="bg-green-100 p-2 rounded-full inline-block mb-2">
<CheckCircle className="w-8 h-8 text-green-500" />
</div>
<p className="text-green-700 font-medium">Verification Successful</p>
</div>
</div>
)}
{showError && (
<div className="absolute inset-0 flex items-center justify-center bg-red-500/20 rounded-lg">
<div className="bg-white p-4 rounded-xl shadow-lg text-center">
<div className="bg-red-100 p-2 rounded-full inline-block mb-2">
<XCircle className="w-8 h-8 text-red-500" />
</div>
<p className="text-red-700 font-medium">{errorMessage}</p>
</div>
</div>
)}
</div>
<div className="mt-6 space-y-3">
<button
onClick={handleVerify}
disabled={loadingFace || isVerifying}
39
className={`w-full py-3 px-4 rounded-lg font-medium text-white transition-colors
${loadingFace || isVerifying
? 'bg-green-400 cursor-not-allowed'
: 'bg-green-500 hover:bg-green-600'
}`}
>
{loadingFace || isVerifying ? (
<span className="flex items-center justify-center">
<svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" fill="none" viewBox="0 0
24 24">
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
strokeWidth="4"/>
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0
5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"/>
</svg> Verifying...
</span>
):(
'Verify Face'
)}
</button>
<button onClick={handleClose}
className="w-full py-3 px-4 rounded-lg font-medium text-gray-700 bg-gray-100 hover:bggray-200 transition-colors"
>
Cancel
</button>
</div>
</div>
</div>
{/* Payment Success Popup */}
{showPaymentSuccess && (
40
<div className="fixed inset-0 flex items-center justify-center bg-black/50 backdrop-blur-sm">
<div className="bg-white p-6 rounded-xl shadow-lg text-center">
<div className="bg-green-100 p-4 rounded-full inline-block mb-4">
<CheckCircle className="w-10 h-10 text-green-500" />
</div>
<p className="text-green-700 font-medium text-xl">Payment Sent Successfully</p>
</div>
</div>
)}
</div>
);
};
export default FaceVerificationModal;
import React, { useState, useRef } from "react";
import { doc, onSnapshot, updateDoc } from "firebase/firestore";
import Webcam from "react-webcam";
import { Camera, Upload, X, Edit, CheckCircle, AlertCircle } from "lucide-react";
const UserProfile = ({ user, userImage, db, uid }) => {
const [showImageUpdatePopup, setShowImageUpdatePopup] = useState(false); const
[newImage, setNewImage] = useState(null);
const [isWebcamActive, setIsWebcamActive] = useState(false);
const [errorMessage, setErrorMessage] = useState("");
const [successMessage, setSuccessMessage] = useState(""); const
webcamRef = useRef(null);
const handleImageUpdate = async () => { if
(!newImage) {
setErrorMessage("Please select or capture an image.");
setTimeout(() => setErrorMessage(""), 3000); // Clear error after 3 seconds
return;
}
try {
41
const userRef = doc(db, "users", uid);
await updateDoc(userRef, { image: newImage });
setSuccessMessage("Profile image updated successfully!");
setTimeout(() => {
setSuccessMessage(""); setShowImageUpdatePopup(false);
setNewImage(null);
}, 3000); // Clear success message and close popup after 3 seconds
} catch (error) {
setErrorMessage("Failed to update profile image. Please try again.");
setTimeout(() => setErrorMessage(""), 3000); // Clear error after 3 seconds
}
};
const handleFileUpload = (event) => { const
file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onloadend = () => {
setNewImage(reader.result);
};
reader.readAsDataURL(file);
}
};
const capturePhoto = () => {
const imageSrc = webcamRef.current.getScreenshot();
setNewImage(imageSrc);
};
return (
<div className="max-w-lg mx-auto mt-10 p-6 bg-white shadow-lg rounded-lg">
{user && (
<div className="flex items-center space-x-4 p-4 bg-gray-100 rounded-lg mb-6">
{userImage && (
42
<div className="relative">
<img src={userImage}
alt="User"
className="w-16 h-16 rounded-full border cursor-pointer" onClick={()
=> setShowImageUpdatePopup(true)}
/>
<div
className="absolute bottom-0 right-0 bg-white rounded-full p-1 border shadow-sm cursorpointer"
onClick={() => setShowImageUpdatePopup(true)}
>
<Edit size={14} className="text-gray-600" />
</div>
</div>
)}
<div>
<h2 className="text-lg font-semibold">{user.fullName || "User"}</h2>
<p className="text-gray-500">FacePay ID: {user.facePayId}</p>
</div>
</div>
)}
{/* Image Update Popup */}
{showImageUpdatePopup && (
<div className="fixed inset-0 flex items-center justify-center bg-black/50 backdrop-blur-sm">
<div className="bg-white rounded-xl shadow-lg w-full max-w-md mx-4 overflow-hidden">
<div className="px-6 py-4 bg-gray-50 border-b border-gray-200 flex justify-between itemscenter">
<h2 className="text-xl font-semibold text-gray-800">Update Profile Image</h2>
<button onClick={() => {
setShowImageUpdatePopup(false);
setNewImage(null); setIsWebcamActive(false);
43
}}
className="p-2 rounded-full hover:bg-gray-200 transition-colors"
>
<X size={20} />
</button>
</div>
<div className="p-6">
{newImage ? (
<div className="flex flex-col items-center">
<img src={newImage}
alt="New Profile"
className="w-32 h-32 rounded-full border mb-4"
/>
<button onClick={handleImageUpdate}
className="w-full py-2 px-4 bg-green-500 text-white rounded-lg hover:bg-green-600
transition-colors"
>
Save Changes
</button>
</div>
):(
<div className="space-y-4">
<button
onClick={() => setIsWebcamActive(true)}
className="w-full py-2 px-4 bg-blue-500 text-white rounded-lg hover:bg-blue-600
transition-colors flex items-center justify-center"
>
<Camera size={18} className="mr-2" /> Take a New
Photo
</button>
<label className="w-full py-2 px-4 bg-gray-500 text-white rounded-lg hover:bg-gray-600
44
transition-colors flex items-center justify-center cursor-pointer">
<Upload size={18} className="mr-2" /> Upload Image
<input type="file"
accept="image/*" className="hidden"
onChange={handleFileUpload}
/>
</label>
</div>
)}
{isWebcamActive && (
<div className="mt-6">
<Webcam ref={webcamRef}
screenshotFormat="image/jpeg"
className="w-full rounded-lg shadow-md border border-gray-200"
/>
<button onClick={capturePhoto}
className="w-full py-2 px-4 bg-blue-500 text-white rounded-lg hover:bg-blue-600
transition-colors mt-4"
>
Capture Photo
</button>
</div>
)}
{/* Error Message */}
{errorMessage && (
<div className="mt-4 p-3 bg-red-100 text-red-700 rounded-lg flex items-center">
<AlertCircle size={16} className="mr-2" />
{errorMessage}
45
</div>
)}
{/* Success Message */}
{successMessage && (
<div className="mt-4 p-3 bg-green-100 text-green-700 rounded-lg flex items-center">
<CheckCircle size={16} className="mr-2" />
{successMessage}
</div>
)}
</div>
</div>
</div>
)}
</div>
);
};
export default UserProfile;
import React, { useState,useEffect } from "react";
import { db } from "../firebase";
import { doc, getDoc, updateDoc, collection, query, where, getDocs } from "firebase/firestore";
const BankAdmin = () => {
const [facePayId, setFacePayId] = useState("");
const [amount, setAmount] = useState(""); const
[loading, setLoading] = useState(false); const
[message, setMessage] = useState(""); const
[users, setUsers] = useState([]);
const fetchUserByFacepayID = async (facePayId) => { try
{
const usersRef = collection(db, "users");
const q = query(usersRef, where("facePayId", "==", facePayId)); const
querySnapshot = await getDocs(q);
46
if (!querySnapshot.empty) {
const userDoc = querySnapshot.docs[0]; return
{ id: userDoc.id, ...userDoc.data() };
}
} catch (error) {
console.error("Error fetching user:", error);
}
return null;
};
useEffect(() => {
const fetchUsers = async () => {
const usersRef = collection(db, "users"); const
snapshot = await getDocs(usersRef);
const usersList = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
setUsers(usersList);
};
fetchUsers();
})
const copyFaceId = (facePayId) => {
navigator.clipboard.writeText(facePayId);
alert(`Face ID copied: ${facePayId}`);
};
const handleAddMoney = async () => {
if (!facePayId || !amount || isNaN(amount) || amount <= 0) {
setMessage("Please enter a valid FacePay ID and positive amount.");
return;
}
setLoading(true);
setMessage("");
47
try {
const userData = await fetchUserByFacepayID(facePayId); if
(!userData) throw new Error("User not found!");
const userRef = doc(db, "users", userData.id); const
userSnap = await getDoc(userRef);
if (!userSnap.exists()) throw new Error("User not found!");
const newBalance = (userSnap.data().walletBalance || 0) + parseFloat(amount); await
updateDoc(userRef, { walletBalance: newBalance });
setMessage(`Successfully added ₹${amount} to user ${facePayId}. New Balance:
₹${newBalance}`);
setFacePayId("");
setAmount("");
} catch (error) {
console.error("Error adding money:", error); setMessage(error.message ||
"Failed to add money.");
} finally { setLoading(false);
}
};
return (
<div className="max-w-md mx-auto mt-10 p-6 bg-white shadow-lg rounded-lg">
<h2 className="text-2xl font-bold text-center mb-4">Bank Admin - Add Money</h2>
<div className="space-y-4">
<input type="text"
placeholder="Enter Facepay ID"
value={facePayId}
onChange={(e) => setFacePayId(e.target.value)}
className="w-full px-4 py-2 border rounded-md"
/>
<input
48
type="number" placeholder="Enter
Amount (₹)" value={amount}
onChange={(e) => setAmount(e.target.value)}
className="w-full px-4 py-2 border rounded-md"
/>
<button onClick={handleAddMoney}
disabled={loading}
className="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-md
transition disabled:opacity-50"
>
{loading ? "Processing..." : "Add Money"}
</button>
{message && <p className="text-center mt-4 text-gray-700">{message}</p>}
</div>
<div className="mt-6 flex space-x-4">
{users
.map(({ id, image, facePayId, fullName }) => (
<div key={id} className="flex flex-col items-center">
<img src={image}
alt={fullName}
className="w-12 h-12 rounded-full cursor-pointer border-2 border-gray-300 hover:borderblue-500 transition"
onClick={() => copyFaceId(facePayId)}
/>
<p className="text-xs mt-1">{fullName.split(" ")[0]}</p>
</div>
))}
</div>
</div>
);
49
APPENDIX B
SAMPLE SCREEN
FIG.1. HOME PAGE
FIG.2. TRANSACTION DETAILS
50
FIG.3. FACE VERIFICATION
FIG.4. PAYMENT SUCCESS PAGE
51
APPENDIX C
PLAGARISM REPORT
52
APPENDIX D
PUBLICATION DETAILS
53
APPENDIX E
TEAM DETAILS
NAME
: Dani N
ROLL NO
21113004
EMAIL
: 21113004@student.hindustanuniv.ac.in
CONTACT NO : 9791197021
NAME
: Niroshan R
ROLL NO
21113021
EMAIL
: 21113021@student.hindustanuniv.ac.in
CONTACT NO : 6369056993
NAME
: HemaPrasad S
ROLL NO
21113119
EMAIL
: 21113119@student.hindustanuniv.ac.in
CONTACT NO : 7396840237
54