Skip to main content

User Flow & Backoffice Flow

This documentation will guide you through the process of adding a bill using the Paystack Application. To successfully add a bill, follow the steps outlined below:

User Flow​

Click here to watch the User Flow Video

User Flow Diagram - Data​

Bill Details :

Bill Name : Venkatesh
Provider Name :Acko Loans
Provider ID : 90191209109
Due Date :14-09-2023
Due Amount :2000

addTransaction Payload

{source: "world", destination: "+913434343434", currency: "INR", ledger: "bills_1.0.1", amount: "2000",...}
amount: "2000"
currency: "INR"
destination: "+913434343434"
ledger: "bills_1.0.1"
metadata: {bill_type: "Home", bill_name: "Venkatesh", provider_number: "90191209109",...}
bill_name: "Venkatesh"
bill_status: "submitted"
bill_type: "Home"
due_amount: "2000"
due_date: "14-09-2023"
provider_name: "Acko Loans"
provider_number: "90191209109"
source: "world"

Metadata

{
 "bill_name": "Venkatesh",
  "bill_status": "submitted",
  "bill_type": "Home",
  "due_amount": "2000",
  "due_date": "14-09-2023",
  "provider_name": "Acko Loans",
  "provider_number": "90191209109"
}

Slack Message for Bill added

Home bill added for account: pay9090990090
 ,ledger:bills_1.0.1
 ,transaction_id:162 ,bill_details:{bill_type: Home, bill_name: Harrison, provider_number: 74800 29399 0023, provider_name: Home Credit, due_date: 13-09-2023, due_amount: 4500, bill_status: submitted}
Review Bills here: https://paystack-backoffice.vercel.app/review_bills/bills_1.0.1/pay9090990090/162

  1. User Signup: Begin by signing up on the Paystack Application if you are not already registered.

  2. View Bill Categories: Once you are logged in, you can view the available bill categories. These categories include:

    • Home Loan
    • Vehicle Loan
    • Insurance
    • Utility
    • Phone
    • Medical

  3. Select a Bill Category: Choose the bill category that corresponds to your bill.

  4. Enter Bill Details: After selecting a bill category, enter the following bill details:

    • Bill Name
    • Provider Name
    • Provider ID
    • Due Date
    • Due Amount

  5. Submit the Bill: Click the "Submit" button to proceed.

Adding a Transaction​

Upon successful validation of the bill, the application will access the backoffice API to add a transaction. The API endpoint is as follows:

API Endpoint: https://pay-stack.devops-colakin.workers.dev/addTransaction

addTransaction Payload​

Here is the payload that will be sent to the addTransaction API:

  • amount: Due Amount
  • source: "world"
  • destination: "pay{phone_no}"
  • ledger: "bills_1.0.1"
  • metadata: All Bill Details
  • currency: Currency

Access Token​

To access the Lesdger complete the transaction, you will need an Access Token. If you do not have an Access Token, you can attempt to obtain a refresh token to create the transaction.

Creating a Transaction in the Bill Ledger​

In the Bill Ledger of Formance, a transaction will be created with the following details:

  • source: "world"
  • destination: "+913434343434"
  • currency: "INR"
  • ledger: "bills_1.0.1"
  • amount: "2000"
  • metadata:
    • bill_type: "Home"
    • bill_name: "Venkatesh"
    • provider_number: "90191209109"
    • ... (Other bill details)
  • bill_name: "Venkatesh"
  • bill_status: "submitted"
  • bill_type: "Home"
  • due_amount: "2000"
  • due_date: "14-09-2023"
  • provider_name: "Acko Loans"
  • provider_number: "90191209109"
  • source: "world"

Updating Airtable​

Once the transaction is successfully created, Paystack will update the Bills Table in Airtable with the following fields:

  • AccountName: pay9090990090
  • Ledger: bills_1.0.1
  • TransactionId: 162
  • BillName: Harrison
  • DueDate: 13-09-2023
  • DueAmount: 4500
  • BillType: Home
  • ProviderName: Home Credit
  • ProviderNumber: 74800 29399 0023
  • BillStatus: submitted

Sending a Slack Notification​

After updating Airtable, Paystack will send a notification message to the designated Slack Channel. The message will contain a link to review the bill. The notification message will appear as follows:

"Home bill added for account: pay9090990090, ledger: bills_1.0.1, transaction_id: 162, bill_details: {bill_type: Home, bill_name: Harrison, provider_number: 74800 29399 0023, provider_name: Home Credit, due_date: 13-09-2023, due_amount: 4500, bill_status: submitted} Review Bills here: Review Bills"

Displaying Submitted Bills in the User Interface​

Dashboard​

Tap on Date: On the application's dashboard, users can tap on a specific date to access their bills for that day.

Show Bills in Bills Tab: When a date is tapped, the application should show bills in "Bills" tab and display the bills that are due or scheduled for that selected date.

Bill Screen​

Bill Details on the Bill Screen​

Upcoming Bills: On the bill screen, display the details of the upcoming bills. This includes:

  • Bill Name
  • Due Date
  • Due Amount
  • Bill Type
  • Bill Status

Paid Bills: On the bill screen, display the details of the paid bills. This includes:

  • Bill Name
  • Due Date
  • Due Amount
  • Bill Type
  • Bill Status

Notification Screen​

Accessing Notifications​

Notification Icon: Users can view their bills notifications by tapping on the notification icon.

Backoffice Flow​

This detailed documentation outlines the workflow for approving or denying bills in the Backoffice of the Paystack Application. The process involves Slack notifications, Backoffice UI, Formance Ledger integration, and Airtable updates.

Click here to watch the Backoffice Flow Video Demo

Backoffice Flow Diagram - Data​

Bill Details :

Bill Name : Venkatesh
Provider Name :Acko Loans
Provider ID : 90191209109
Due Date :14-09-2023
Due Amount :2000

addTransaction Payload

{source: "world", destination: "+913434343434", currency: "INR", ledger: "bills_1.0.1", amount: "2000",...}
amount: "2000"
currency: "INR"
destination: "+913434343434"
ledger: "bills_1.0.1"
metadata: {bill_type: "Home", bill_name: "Venkatesh", provider_number: "90191209109",...}
bill_name: "Venkatesh"
bill_status: "submitted"
bill_type: "Home"
due_amount: "2000"
due_date: "14-09-2023"
provider_name: "Acko Loans"
provider_number: "90191209109"
source: "world"

Metadata

{
 "bill_name": "Venkatesh",
  "bill_status": "submitted",
  "bill_type": "Home",
  "due_amount": "2000",
  "due_date": "14-09-2023",
  "provider_name": "Acko Loans",
  "provider_number": "90191209109"
}

Slack Message for Bill added

Home bill added for account: pay9090990090
 ,ledger:bills_1.0.1
 ,transaction_id:162 ,bill_details:{bill_type: Home, bill_name: Harrison, provider_number: 74800 29399 0023, provider_name: Home Credit, due_date: 13-09-2023, due_amount: 4500, bill_status: submitted}
Review Bills here: https://paystack-backoffice.vercel.app/review_bills/bills_1.0.1/pay9090990090/162

Slack Notification Process​

Bill Added Notification in Slack​

Notification Message: Initially, a Slack channel receives a notification message with the bill details in the following format:

```
Home bill added for account: pay9090990090, ledger: bills_1.0.1, transaction_id: 162, bill_details: {bill_type: Home, bill_name: Harrison, provider_number: 74800 29399 0023, provider_name: Home Credit, due_date: 13-09-2023, due_amount: 4500, bill_status: submitted}

Review Bills here: [Review Bills](https://paystack-backoffice.vercel.app/review_bills/bills_1.0.1/pay9090990090/162)
```

BA Team Verification​

Manual Verification: The Business Analyst (BA) team manually verifies the bill details received in the Slack notification.

Review Link: The BA team selects the review link for the respective bill in the Slack notification. This link redirects them to the Backoffice UI.

Backoffice UI​

Fetching Transaction Details​

Fetch Transaction Details: In the Backoffice UI, the system fetches transaction details from the Formance Ledger using the "Get Transaction" API.

Display Bill Details: The Backoffice UI displays the bill details for review, including all relevant information.

Reviewing Bills​

Review Bills Page: On the "Review Bills" page, the BA team can update the status of the bill to either "approved" or "not_approved."

Updating Bill Status: When the BA team selects the respective button for approval or denial, the Backoffice UI calls the Backoffice API to update the metadata of the Formance Ledger Transaction. If approved, the bill_status is set to "approved," and if denied, the bill_status is set to "not_approved."

Success Confirmation: Upon successful update, the API returns a 200 Status Code, and the Backoffice UI displays the message "Bill Updated Successfully."

Slack Notification​

Notification to Slack (Approval): If the bill is approved, the Backoffice sends a notification message to the Slack channel with the following message:

```
Bill approved successfully for 162 in bills_1.0.1
```

Notification to Slack (Denied): If the bill is not approved, the Backoffice sends a notification message to the Slack channel with the following message:

```
Bill not_approved successfully for 162 in bills_1.0.1
```

Airtable Update​

Update in Airtable: In Airtable, the respective bill's status is updated to "Approved" or "Not Approved" based on the decision made by the BA team in the Backoffice UI.

User Interface Updates​

Displaying Approved Bills in UI​

  • Dashboard: On the dashboard, users can view bills by tapping on a specific date. The bills for that date are displayed in the "Bills" tab.

  • Bill Screen: The bill screen displays upcoming bill details, including bill name, due date, due amount, bill type, provider name, provider number, and bill status.

  • Notification Screen: Users can access their notifications by tapping on the notification icon. In the notification screen, users can view all their notifications, including those related to bill approved or denied statys.