iRecharge – Mobile Topup and Utility Bill Pay React JS Template

Introduction

iRecharge is a mobile topup and utility bill pay template built using React JS. This template provides a seamless and user-friendly experience for customers to recharge their mobile phones and pay their utility bills online. With this template, you can quickly set up a functional online recharge and bill pay platform without requiring extensive coding knowledge.

In this tutorial, we will guide you through the process of setting up and using the iRecharge template. We will cover the following topics:

1. Setting up the template
2. Configuring the template
3. Adding mobile operators and utility bill providers
4. Creating a recharge or bill pay request
5. Handling payment processing
6. Managing user accounts

Setting up the Template

To set up the iRecharge template, follow these steps:

1. Clone the template from GitHub: git clone https://github.com/react-template/irecharge.git
2. Install the required dependencies: npm install
3. Start the development server: npm start
4. Open the template in your web browser: http://localhost:3000

Configuring the Template

Before you can start using the template, you need to configure it to suit your needs. To do this, follow these steps:

1. Create a new file called config.js in the root directory of the project.
2. In the config.js file, add the following code:

   export const API_URL = 'https://your-api-url.com'; // Replace with your API URL
   export const MOBILE_OPERATORS = [
   { id: 1, name: 'Vodafone', slug: 'vodafone' },
   { id: 2, name: 'MTN', slug: 'mtn' },
   // Add more mobile operators as needed
   ];
   export const UTILITY_BILL_PROVIDERS = [
   { id: 1, name: 'Electricity', slug: 'electricity' },
   { id: 2, name: 'Water', slug: 'water' },
   // Add more utility bill providers as needed
   ];

   Replace https://your-api-url.com with the URL of your API server.

Adding Mobile Operators and Utility Bill Providers

To add more mobile operators and utility bill providers, follow these steps:

1. In the MOBILE_OPERATORS array in the config.js file, add a new object with the following properties:
   • id: a unique identifier for the mobile operator
   • name: the name of the mobile operator
   • slug: a unique slug for the mobile operator
2. In the UTILITY_BILL_PROVIDERS array in the config.js file, add a new object with the following properties:
   • id: a unique identifier for the utility bill provider
   • name: the name of the utility bill provider
   • slug: a unique slug for the utility bill provider

Creating a Recharge or Bill Pay Request

To create a recharge or bill pay request, follow these steps:

1. Open the template in your web browser.
2. Click on the "Recharge" or "Pay Bill" button.
3. Select the mobile operator or utility bill provider you want to recharge or pay.
4. Enter the phone number or account number for the recharge or bill pay request.
5. Select the payment method (e.g. credit card, PayPal).
6. Enter the payment details (e.g. credit card number, expiration date).
7. Click the "Pay" button to complete the transaction.

Handling Payment Processing

The iRecharge template uses a third-party payment gateway to process payments. To handle payment processing, follow these steps:

1. In the config.js file, add the following code:

   export const PAYMENT_GATEWAY = 'stripe'; // Replace with your payment gateway
   export const PAYMENT_GATEWAY_SECRET_KEY = 'your-secret-key'; // Replace with your payment gateway secret key

   Replace stripe with your payment gateway, and your-secret-key with your payment gateway secret key.

2. In the payment.js file, add the following code:

   
   import { API_URL } from '../config';

const paymentGateway = new Stripe(PAYMENT_GATEWAY_SECRET_KEY);

const handlePayment = async (amount, paymentMethod) => { const paymentIntent = await paymentGateway.createPaymentIntent({ amount, currency: 'usd', payment_method_types: ['card'], });

// Redirect the user to the payment gateway to complete the payment window.location.href = paymentIntent.url; };

This code creates a payment intent using the Stripe payment gateway, and redirects the user to the payment gateway to complete the payment.

**Managing User Accounts**

To manage user accounts, follow these steps:

1. Create a new file called `user.js` in the root directory of the project.
2. In the `user.js` file, add the following code:
```javascript
import { API_URL } from '../config';

const user = {
  id: 1,
  name: 'John Doe',
  email: 'johndoe@example.com',
  phoneNumbers: [
    { id: 1, number: '1234567890' },
  ],
};

const updateUser = async (newUser) => {
  const response = await fetch(`${API_URL}/users/${user.id}`, {
    method: 'PUT',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(newUser),
  });

  if (response.ok) {
    user = newUser;
  } else {
    console.error('Error updating user');
  }
};

const deleteUser = async () => {
  const response = await fetch(`${API_URL}/users/${user.id}`, {
    method: 'DELETE',
  });

  if (response.ok) {
    user = null;
  } else {
    console.error('Error deleting user');
  }
};

This code defines a user object with an ID, name, email, and phone numbers. It also defines two functions, updateUser and deleteUser, which update and delete the user object, respectively.

That's it! With these steps, you should now have a fully functional iRecharge template up and running.