Quick Pay
With this feature a citizen can quickly view/pay all his pending bills for Property Tax ( or any other supported business Service) , by clicking links directly from Digit-UI home screen.
Digit UI Home screen:
By clicking Property Tax link in the Quick Pay section, if a user is logged in, he is taken directly to My Bills Screen, otherwise he is asked to login by his mobile number and OTP sent to the number, then he is taken to My Bills screen.
On My Bills screen user is displayed all his pending property Tax bills (as cards) for all properties, which are registered to user’s logged in mobile Number. He can click View Details button of the corresponding card to check the detailed bill summary which takes him to bill details page. There is also a link for case when the user is unable to find the property tax bills.
My Bills Screen :
On arriving on Bill Details screen user can see a list of various categories of taxes that are present. After checking user can select to pay full amount or custom amount, which can be not less than the ₹100, and not be more than the total tax, these restriction however can be changed through MDMS.
Bill Details Screen:
After clicking Proceed To Pay button you get to the pay screen. Where the user is asked to select the payment gateway from a bunch of radio buttons, and then after clicking pay, the user is redirected to bank payment gateway.
Payment Screen:
After making a successful payment through bank’s gateway the user is redirected to the response screen which shows the details of the payment and other bill details.
Response Screen (Successful):
in case payment fails for any reason the response screen shows the message, that payment failed.
Response Screen (Failure):
Case When user wants to pay for Property for different mobile number:
My Bills page only displays the properties with pending Taxes, which are associated with the mobile number which is logged in. But if user wants to search for any other property then he can click on the link below the My Bills screen which will take the user to the search screen.
Search Screen:
On Search screen user can search a property by mobile Number, a unique property ID, or an existing property ID. After mentioning the parameters the search performed will take user to the search results screen. Where user can see all the properties with the matching criteria, whether or not they have pending taxes.
Search Results Screen:
From Here on clicking view Details a user is redirected to the bill-details Screen, for the property, just as in case of My Bills Screen.
Technical Details
My Bills Screen
For My Bills screen the starting file is located at the link :-
on this page an MDMS call is made which is to fetches all the restrictions that are put on bill payment such as whether partial payment is allowed or not, advance payment allowed or not, minimum payable amount etc. for the particular business Service which is supplied into URL.
the MDMS criteria used here for fetching MDMS details is:
{
"MdmsCriteria": {
"tenantId": "pb",
"moduleDetails": [
{
"moduleName": "BillingService",
"masterDetails": [
{
"name": "BusinessService"
},
{
"name": "TaxHeadMaster"
},
{
"name": "TaxPeriod"
}
]
}
]
}
}
Also the pending bills are fetched for the citizen for the specific business service using the custom hook, that fetches bill for logged in mobile number.
The bill is rendered using a keynoteConfig file which can be located using the following link:-
On this page for each business service there is a configuration stored to define what part of the bill is to be displayed.
the configuration returns an object of structure
{
"my-bill": [
{
keyValue: "CS_COMMON_AMOUNT_DUE",
keyPath: [
(d) => {
const overdueBy = new Date().getTime() - new Date(d.billDetails[0]?.toPeriod).getTime();
const days = Math.floor(overdueBy / (86400 * 1000));
return (
<React.Fragment>
{"₹" + d["totalAmount"]}
{days >= 0 ? (
<span className={"card-label-error"} style={{ fontSize: "16px", fontWeight: "normal" }}>{` ( ${t(
"CS_PAYMENT_OVERDUE"
)} ${days} ${t(days === 1 ? "CS_COMMON_DAY" : "CS_COMMON_DAYS")})`}</span>
) : null}
</React.Fragment>
);
},
],
fallback: "N/A",
noteStyle: { fontWeight: "bold", fontSize: "24px", paddingTop: "5px" },
},
{
keyValue: "PT_PROPERTY_ID",
keyPath: ["propertyId"],
fallback: "",
}
]
}
Here my-bill key has config for my-bills screen, this configuration decides what details to show on the card for each service from the bill object returned through fetchBill API.
It is an array of objects, where each object puts the bill detail on the My-Bills bill card.
each object contains 4 properties ie keyValue, keyPath, fallback, noteStyle
the keynote config is added into the Digit component Registry as getBillDetailsConfigWithBusinessService
The implementation of the config can be found in the link :-
Bill Details Screen
The bill details screen can be found in the link :-
It checks for various payment restrictions which are fetched from the MDMS on above mentioned MY Bills description, and also all the tax heads that are to be displayed in the summary are also fetched from the same MDMS.
The structure for payment rule response from the MDMS is :-
{
"businessService": "PropertyTax",
"code": "PT",
"collectionModesNotAllowed": [
"DD",
"OFFLINE_NEFT",
"OFFLINE_RTGS",
"POSTAL_ORDER"
],
"partPaymentAllowed": true,
"minAmountPayable": 100,
"isAdvanceAllowed": false,
"demandUpdateTime": 86400000,
"isVoucherCreationEnabled": true,
"billGineiURL": "egov-searcher/bill-genie/billswithaddranduser/_g
}
partPaymentAllowed key when true allows payment less than bill details to be payed otherwise the user can pay only bill Amount.
minAmountPayable is the minimum bill amount a user can pay.
isAdvanceAllowed if true user can enter the amount more than the specified.
The link for the MDMS can be found at :-
https://github.com/egovernments/egov-mdms-data/blob/DEV/data/pb/BillingService/BusinessService.json
Payment Screen
The payment screen fetches the payment gateways from an MDMS call.
{
"MdmsCriteria": {
"tenantId": "pb",
"moduleDetails": [
{
"moduleName": "DIGIT-UI",
"masterDetails": [
{
"name": "PaymentGateway"
}
]
}
]
}
}
The code can be found here
Response Screen
The response page code can be found here:-
Search Screen
The search screen is a part of PT module and it’s code can be found in
Search Result Screen
The Search Result screen code can be referred from
Adding a new Bill detail for the business Service
The keynote config is responsible for adding the new bill UI for adding a new Bill for a business Service.
The whole function is exposed within the component Registry as getBillDetailsConfigWithBusinessService
and can be redefined from there.
Add Comment