Using Fincra's API and React to Create an Easy and Reliable Data Bill Payment Application

People in this day and age are still unaware that they can purchase or pay for data bills using a simple application.

If we're being honest, you'll agree that we've encountered situations where our Bank Application isn't working or when the POS agent has already left the house and we need to make an urgent payment. There aren't many payment options available late at night or on weekends, other than asking friends or family who may be experiencing the same issue. Whether it's recharging your phone with data, paying for electricity, or purchasing airtime, using Fincra's API to build your website allows you to pay utility bills with ease.

In this article, I will show you how to use the data bill payment fincra API to list transactions on the billing service, fetch wallet balance on the billing service, get the list of available telcos, get the telco name, get available data plan for telco, and make your secure data bill payment.

This blog will go over how I built the data bill payment aspect of my app using Fincra's API. I would guide you through the process so that you could achieve your goals as well.

Let's get this party started.

Prerequisites

Reactjs will be used to build this application. I'll walk you through the various Fincra API features that we'd use to accomplish that. Fincra also offers SDKs for other popular programming languages that you may wish to use.

• ES6 JavaScript

• Basic JavaScript knowledge

• financial management abilities

Getting Started

To communicate with Fincra, you'll need your secret key, which will authorize the use of the API we'll be using. If you don't have it, you'll get a 403 HTTP error code when you try to access the API, which means that the server understands the request but refuses to authorize it. Fincra uses your account's Secret key to authenticate API requests.

Keep in mind that your Secret Key should be kept private. It can make any API request to Fincra without limitation.

Follow these steps to obtain your API Key before making any requests: For Steps I and 2, use Fincra documentation authentication.

When developing this application, you should create a platform where users can:

• See a list of service providers on your website or mobile app.
• From the list, the customer selects a service provider.
• Your website displays a list of required fields that a customer must fill out to access the service provider.
• The customer fills in the fields.
• Your website displays the amount owed by the customer to the service provider.
• Your customer agrees to pay the displayed amount to the service provider.
• Your website's backend requests Fincra to send the customer's payment to the service provider.
• Fincra facilitates the payment to the service provider.

Get a list of available telcos.

To get the complete list of telcos, we must make an API request to the Fetch Telcos endpoint. If this request is successful, you will receive a JSON snippet containing information about every telco Fincra has access to, which you can then add to your website so that users can see which telcos they can purchase.

To get the API, we'd use a function that gets the API and returns it in JSON format. Remember to include your API key. To get the API, use the following function:

     const options = {method: 'GET',
     headers: {accept: 'application/json', 'api-key': ''}};

     fetch('https://billing-staging.bytestacks.io/api/v1/telcos', options)
     .then(response => response.json())
      .then(response => console.log(response))
       .catch(err => console.error(err));

If your request is successful, you will receive a response in JSON format, but yours will have more available telcos because you used your api-key:

  {
    "success": true,
    "data": [
    {
        "name": "Smile",
        "shortname": "smile",
         "plan": {
          "service_type": "smile",
          "shortname": "smile",
          "biller_id": 23,
          "product_id": 37,
          "name": "Smile",
          "plan": [
          "prepaid"
         ]
      }
    },
 ],
   "message": "Action was successful"
}

Obtain the telco's name.

You must be able to display the telco name on your website so that users can learn about the available telcos. You can use an array filter method to search for the telco you want to use in the JSON response that contains all of the telcos available on Fincra. The name attribute in the JSON response is a unique identifier, implying that there is only one unique name value. This name attribute identifies the telco that provides the airtime bills. To get the names of available telcos, use the function I provided above for getting the List of telcos. Our preferred telco biller is 9Mobile, based on the filtered response. This telco's key details are:

  {
     "name": "9 Mobile",
     "shortname": "9mobile",
      "plan": {
       "service_type": "9mobile",
      "shortname": "9mobile",
      "biller_id": 14,
      "product_id": 41,
      "name": "9 Mobile",
      "plan": [
        "prepaid"
      ]
    }
  },

Obtain the telco's available data plan.

You must make an API request to obtain a list of available data plans from a telco. If this is successful, you will receive a JSON snippet containing information about each data plan offered by the telco.

Don't forget to include your secret key, which is the required api-key for this request to be successful.

To get the API, use the following function:

 const options = {
  method: 'POST',
 headers: {
   accept: 'application/json',
   'content-type': 'application/json',
   'api-key': ''
 }
};

fetch('https://billing-staging.bytestacks.io/api/v1/bundles', options)
.then(response => response.json())
 .then(response => console.log(response))
 .catch(err => console.error(err));

If your request is successful, a JSON response containing information about your available data plans will be returned as follows:

  {
     "name": "500MB for 1 day",
    "allowance": "500MB",
    "price": 50,
    "validity": "1 day",
    "datacode": "DATA-30"
  },

It should be noted that :

• name indicates the data plan name
• allowance indicates the amount of data available for that plan
• price This is the price of the data plan
• validity How long the plan is valid
• data_code The unique identifier of the data plan

Making a payment on your data bill

After you've researched all of the available telcos, know the name of the telco, and understand the data plan, the next step is to pay your bill. This can be accomplished by using a function that accepts a post method. This function also requires you to enter the amount of data you want to buy, the destination phone number, the telco name, and the data code, which is the unique identifier of the data plan to which you want to subscribe.

const options = {
  method: 'POST',
  headers: {
    accept: 'application/json',
    'content-type': 'application/json',
    'api-key': ''
  },
  body: JSON.stringify({amount: '100', phone_no: '07011182345', telco: 'mtn', data_code: '100'})
 };

fetch('https://billing-staging.bytestacks.io/api/v1/vend_data', options)
  .then(response => response.json())
  .then(response => console.log(response))
  .catch(err => console.error(err));

If your request is successful, a JSON response containing information about your bill payment will be returned as follows:

 {
  "success": true,
  "data": {
   "message": "Data bundle successful on 07011182345",
    "amount": "100",
    "net_amount": 100,
    "commission": 0,
     "charge_back": 0,
    "status": "success",
    "customer_reference": null,
    "reference": "836e81bae7200ef6",
   "business_id": "62ff4d5212fac9417403a7bb",
   "created_at": "2022-09-22T06:02:05.000000Z"
 },
  "message": "Action was successful"
}

Important information: The customer_reference in the JSON response refers to the unique reference of the transaction on your system, while the reference refers to the reference generated for this transaction on the Fincra system.

Other incredible features of the application include:

• Buying Airtime with Fincra's API
• using Fincra's API to pay a Cable TV bill
• Using Fincra's API to pay your energy bills.
• Recommending new available telcos to users.

Conclusion

Using Fincra's APIs, you can create a seamless and quick bill payment application. It aids in scalability throughout Africa and the rest of the world.

If you have any problems implementing your own bill payment application using this article as a guide, please let me know in the comments section below.