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

<script
  type="module"
  src="https://github.com/davidamunga/pesaqr/raw/v1.0.3/node_modules/pesaqr/dist/pesaqr.mjs"
></script>


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


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


<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

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.