Add on CARD_WEB UD
Add on CARD_WEB UD
Add on CARD_WEB UD
1/2/2024
SUBMITTED BY:
Harmeet Chhabra
CONFIDENTIAL
REVISION HISTORY
Ud –CONFIDENTIAL Page 1
TABLE OF CONTENTS
......................................................................................................................................................0
REVISION HISTORY................................................................................................................................................0
Objective:..............................................................................................................................................................0
Scope.....................................................................................................................................................................0
Header...........................................................................................................................................0
Your account..................................................................................................................................0
Subscriptions..........................................................................................................................................0
...............................0
Bajaj PAY --- only two new field to be added : Gift card and Fast tag – ( field and their respective redirection to be fetched from AEM )
Message Center:...................................................................................................................................................0
Notifications..................................................................................................................................0
Communication Preference............................................................................................................0
Ud –CONFIDENTIAL Page 2
OBJECTIVE:
The objective of this document is to lay down all the functionalities and modules of Experia Reimagine (3-1
Web) w.r .t to ADD on card services
SCOPE
We will cover all types of customers (ETB/ PTB /NTB) journey for both mobile and desktop view.
Scope of work:
On click we will check if created date is less than current date or more than current date .
If the created date from API is less than created date , in that case we will show below
page
Ud –CONFIDENTIAL Page 3
The page will have below components:
Title
Dynamic Card
Card details
Note section
FAQ
Check your cibil score
Offer for you with view all
Quick Actions
TITLE
DYNAMIC CARD
Ud –CONFIDENTIAL Page 4
The card will be used as EMI CARD
Within the card we will display below
o The card no which will be masked --Only 1st four and last 4 digit to be displayed
o Member since and valid till (month and year)
o Customer full name
CARD DETAILS
Card number – which will be masked: only 1st 4 digit and last 4 digit to be displayed
Card status: as per API
Total loan limit with a tooltip in orange color – value to be fetched from API
o On click of tooltip, popup to be displayed with text as per AEM
First transaction loan limit with a tooltip in orange color – value to be fetched from API
o On click of tooltip, popup to be displayed with text as per AEM
Below the details there will be a text for viewing card number –this will be fetched from AEM
On click here –it should be redirected to app (either to download or open app ) –the url to be fetched from AEM
NOTE SECTION
The note section to be fetched from AEM and the background of component to be as per AEM
FAQ’S
Once the customer clicks on FAQ ; the customer will land to FAQ section being EMI Card section highlighted
Ud –CONFIDENTIAL Page 5
CIBIL
On clicking of know your Cibil; customer will be redirected to Cibil page of website with SSO
QUICK ACTIONS
The section will be AEM based and can have three sub sections
FAQ
Product information
Tools and tip
These will have separate page like other modules and content to be displayed as per AEM
If the created date from API is more than created date , in that case we will show
below page
Title
Details of customer
Benefits of Add on card
Terms and conditions
Note section
Activate Card CTA
TITLE
Ud –CONFIDENTIAL Page 6
The title and sub title of Add on card will be fetched from AEM
CUSTOMER DETAILS
All the above details will be fetched from API and also the header will not be camel casing – each header first letter only
needs to be in capital letter
There will be rectangular box with curve on the corners and the complete data needs to be fetched from AEM
There needs to be checkbox (by default unchecked ) with a text to be fetched from AEM , being terms and conditions
hyperlinked and on click url to be open in new tab
Ud –CONFIDENTIAL Page 7
PLEASE NOTE
ACTIVATE CTA
Once click on activate CTA , we need to ensure checkbox is clicked , if clicked then we need to display OTP screen and
post successful OTP authentication we need to display popup : stating you card will be activate shortly
If checkbox is not selected, then we need to show error message above Activate CTA with alert sign as below
OTP SCREENS :
1) The OTP screen should be opened in sanction letter screen only where in sanction letter is greyed out
2) The screen has cross icon where in on click the popup to get closed
3) There will be 6 rectangular input field and the first one to be blue shade inside and blue outline to be presend
with a line inside
4) As soon as user enter the in first box second box to get highlighted with blue shade inside and blue outline to be
presend with a line inside—this goes till 6th field is field
5) If all the value are filled then , grey outline to be converted to black ( color code to be as per figma ) , else it will
grey only
6) If there is error or OTP is invalid, all the 6 rectangular box to get highlighted with red and shade within the box
will be light red shade ( as per figma ) and value to be highlighted in red
Ud –CONFIDENTIAL Page 8