Generate Mpesa Payment QRCode in NextJS 14: A 5-Minute Guide

In less than 5 mins we will generate a QR Code that people will scan to pay to your till or pay bill number. You will be surprised how easy it is.

Install the react-daraja library

React daraja is a library I built to simplify interactions with the Safaricom daraja API. It is a bunch of utility functions and typescript types to help developers work with that monstrosity of documentation.

So install that

npm install react-daraja

Create the environment variables

Just copy and paste the below code to your .env file.

ENVIRONMENT='development' # Set the environment to either "production" or "development."
MPESA_CONSUMER_KEY='' # Consumer Key obtained from Safaricom Daraja.
MPESA_CONSUMER_SECRET='' # Consumer Secret obtained from Safaricom Daraja
MPESA_BUSINESS_SHORT_CODE='174379' # Your M-Pesa business short code. For Sandbox use the code 174379
MPESA_TRANSACTION_TYPE='CustomerPayBillOnline' # Set the transaction type, either "CustomerPayBillOnline" or "CustomerBuyGoodsOnline."
MPESA_API_PASS_KEY='bfb279f9aa9bdbcf158e97dd71a467cd2e0c893059b10f78e6b72ada1ed2c919' # Your M-Pesa API pass key. For sandbox use bfb279f9aa9bdbcf158e97dd71a467cd2e0c893059b10f78e6b72ada1ed2c919

The consumer key and secret can be obtained by creating an app in the Safaricom developer portal.

Import and use the QR code react server component

import React from "react";
import {
  BUSINESS_SHORT_CODE,
  QRCodeDisplay,
  ScannableQrParams,
} from "react-daraja";

export const QrCode = () => {
  const qrCodeParams: ScannableQrParams = {
    Amount: 100,
    CPI: BUSINESS_SHORT_CODE,
    MerchantName: "React daraja docs",
    RefNo: "REF100",
    Size: "100",
    TrxCode: "PB",
  };

  return (
    <div className="w-[100px] aspect-square mt-5 mx-auto">
      <QRCodeDisplay scannableQRParams={qrCodeParams} />
    </div>
  );
};

Be careful though

The component is a react server component so don't call it inside a client component.

Boom you are done. If you want any explanation of the fields in that qrCodeParams object hover over the field you will find an accurate description.

Thanks for reading through. Leave the library a star here.