veritas-qr

TypeScript SDK for generating CBE-compatible EMV payment QR payloads and QR code images, providing a simple way to request CBE payments programmatically with QR codes.

Install

pnpm add veritas-qr

Overview

• Generates CBE-compatible EMV payloads locally in your app.
• Can render QR codes as SVG strings or data URLs.
• city is optional and defaults to Addis Ababa.

Basic Usage

import { buildCbePayload, createCbeQrSvg } from "veritas-qr";

const payload = buildCbePayload({
  name: "Veritas Cafe",
  account: "1000123456789",
  amount: "150.50",
  additionalData: {
    purpose: "Invoice 42",
  },
});

const svg = await createCbeQrSvg({
  name: "Veritas Cafe",
  account: "1000123456789",
  amount: "150.50",
  additionalData: {
    purpose: "Invoice 42",
  },
});

Next.js Example

This is the recommended way to show the QR code in a Next.js app: generate the SVG in a server component and render it directly in the UI.

import { createCbeQrSvg } from "veritas-qr";

export default async function PaymentPage() {
  const qrSvg = await createCbeQrSvg(
    {
      name: "Veritas Cafe",
      account: "1000123456789",
      amount: "150.50",
      additionalData: {
        purpose: "Invoice 42",
      },
    },
    {
      width: 280,
    },
  );

  return (
    <main style={{ padding: 24 }}>
      <h1>Pay with CBE</h1>
      <div
        style={{ width: 280, height: 280 }}
        dangerouslySetInnerHTML={{ __html: qrSvg }}
      />
    </main>
  );
}

Notes

• Use amount to generate a dynamic payment QR.
• Use additionalData.purpose to include a payment reason.
• Use buildCbePayload(...) when you want the raw EMV payload string.
• Use createCbeQrSvg(...) or createCbeQrDataUrl(...) when you want something ready to render in the UI.