0% found this document useful (0 votes)
2 views9 pages

Add on CARD_WEB UD

Download as docx, pdf, or txt
Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1/ 9

Add on Card // Release 2

1/2/2024

SUBMITTED BY:
Harmeet Chhabra

CONFIDENTIAL
REVISION HISTORY

Version Number Last Modified By Modified Date

1.0 Harmeet Chhabra 5-01-2024

Ud –CONFIDENTIAL Page 1
TABLE OF CONTENTS

......................................................................................................................................................0

REVISION HISTORY................................................................................................................................................0

Objective:..............................................................................................................................................................0

Scope.....................................................................................................................................................................0

Your Account changes...........................................................................................................................................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

Your message :...............................................................................................................................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:

 ADD on card Activation


 Add on card details if activated

ADD ON CARD –CUSTOMER JOURNEY

We will display Add on card tile In my account and my relations

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

The title of Add on card will be fetched from AEM

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 details – title to be fetched from AEM

We will display below fields which will be fetched from API

 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

The header of each field to follow camel casing

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

OFFER FOR YOU

The section to be SQUARE like My account and offer to be static offers

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

The page will have below sections:

 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

There will be rectangular box with curve on the corners

Within the box we will display below details:

 Your details as title ( to be fetched from AEM)


 Name
 Date of birth
 Mobile number (unmasked )
 Relation type

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

BENEFITS OF ADD ON CARD

There will be rectangular box with curve on the corners and the complete data needs to be fetched from AEM

TERMS AND CONDITIONS

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

This is mandatory for activating the card

Ud –CONFIDENTIAL Page 7
PLEASE NOTE

The section needs to be fetched from AEM

ACTIVATE CTA

The Activate CTA by default needs to be enabled

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

You might also like