PESAQR

A lightweight, framework-agnostic library for generating M-PESA Payment QR codes. Built using Web Components, PesaQR works seamlessly with any modern JavaScript framework or vanilla HTML.

Features

• 🎯 Generate Payment QR codes for Till Numbers
• 💳 Generate Payment QR codes for Paybill Numbers
• 📱 Generate Payment QR codes for Phone Numbers (Send Money)
• 🔌 Framework agnostic - works with React, Vue, Angular, or vanilla JavaScript
• 📱 Mobile-responsive
• 🔒 Offline support

Installation

npm install pesaqr

Usage

Basic HTML

<!-- Import the library -->
<script
  type="module"
  src="node_modules/pesaqr/dist/pesaqr.mjs"
></script>

<!-- Till Number Payment -->
<pesa-qr type="till" tillNumber="123456" amount="100" width="300"></pesa-qr>

<!-- Paybill Payment -->
<pesa-qr
  type="paybill"
  paybillNumber="888880"
  accountNumber="ACC123"
  amount="100"
  width="300"
></pesa-qr>

<!-- Phone Payment (Send Money) -->
<pesa-qr
  type="phone"
  phoneNumber="0712345678"
  amount="100"
  width="300"
></pesa-qr>

React

import "pesaqr";

function App() {
  return <pesa-qr type="till" tillNumber="123456" amount="100" width={300} />;
}

Vue

<template>
  <pesa-qr type="till" :tillNumber="'123456'" :amount="'100'" :width="300" />
</template>

<script>
import "pesaqr";

export default {
  name: "App",
};
</script>

Angular

// app.module.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import 'pesaqr';

@NgModule({
  // ...
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

// component template
<pesa-qr
  type="till"
  tillNumber="123456"
  amount="100"
  [width]="300"
></pesa-qr>

API Reference

Properties

Property	Type	Description	Required
type	string	Payment type: "till", "paybill", or "phone"	Yes
tillNumber	string	Till number for till payments	Yes (for type="till")
paybillNumber	string	Paybill number for paybill payments	Yes (for type="paybill")
accountNumber	string	Account number for paybill payments	Yes (for type="paybill")
phoneNumber	string	Phone number for send money payments	Yes (for type="phone")
amount	string	Payment amount	Yes
width	number	QR code width in pixels	No (default: 600)

Browser Support

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Opera (latest)

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT

Author

David Amunga

Feedback

If you have any feedback or questions, please reach out to me on Twitter.