npm package: @nutrline.era/qris-dynamic
Description: Nutrline utility to convert static QRIS into dynamic QRIS and generate QR images.
Author: Nutrline Era
Latest version: 1.1.0

# 🧾 Nutrline QRIS Dynamic

A lightweight Node.js module to convert **static QRIS** (Indonesian standard payment QR)  
into **dynamic QRIS** — complete with transaction amount and optional convenience fee — and generate a **QR image (PNG)**.

Built and maintained by **Nutrline Era** 💚  
Perfect for developers, merchants, and payment gateway integrators who want to automate QRIS generation.

---

## ✨ Features

- ✅ Convert *static* QRIS → *dynamic* (Tag 01 → "12")
- 💰 Add **Transaction Amount** (Tag 54)
- ⚙️ Add **Fee Type & Value** (Tag 55–57)
- 🔒 Auto-calculate **CRC16 (Tag 63)** checksum
- 🖼️ Generate **QR Image (PNG DataURL)** using `qrcode` library
- 🚀 100% Node.js ESM (no dependencies on external QRIS SDKs)
- 💡 Ready for frontend display or integration with web apps

---

## 📦 Installation

```bash
npm i @nutrline.era/qris-dynamic
```

Or install from local folder (for development):

```bash
npm install ../nutrline-qris-dynamic
```

---

## 🧠 Usage Example

```js
import {
  makeDynamicQris,
  generateQrisPngDataUrl,
} from "@nutrline.era/qris-dynamic";

// Example: your static QRIS from merchant
const staticQris = "00020101021126680012ID.CO.GPN....6304A1B2";

// Convert to dynamic with amount Rp15,000 + fixed fee Rp1,000
const dynamicQris = makeDynamicQris(staticQris, 15000, 2, 1000);

// Generate PNG DataURL for frontend display
const qrPngData = await generateQrisPngDataUrl(dynamicQris);

// Output result
console.log("Dynamic QRIS Payload:", dynamicQris);
console.log("QR Image (DataURL):", qrPngData);
```

---

## 🖼️ Frontend Implementation Example

Once you get the `qrPngData` (a base64 DataURL string),  
you can directly display it on a webpage using `<img src>`:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>QRIS Payment Preview</title>
  </head>
  <body style="font-family: sans-serif; text-align: center; margin-top: 40px;">
    <h2>QRIS Payment</h2>
    <img
      id="qris"
      alt="QRIS"
      style="width: 260px; image-rendering: pixelated; border-radius: 10px; border: 1px solid #ddd; padding: 8px;"
    />

    <script type="module">
      // Example QR image base64 from your backend
      const qrBase64 =
        "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...";
      document.getElementById("qris").src = qrBase64;
    </script>
  </body>
</html>
```

> 💡 **Tip:** The base64 string already includes the header (`data:image/png;base64,...`)  
> so it can be used directly in `<img src>` or frameworks like React / Vue.

---

## 🧩 API Reference

### `makeDynamicQris(qrisStatic, amount, feeType?, feeAmount?)`

| Parameter   | Type     | Description                                      |
|--------------|----------|--------------------------------------------------|
| `qrisStatic` | `string` | Original static QRIS string                      |
| `amount`     | `number` | Transaction amount (in Rupiah)                   |
| `feeType`    | `number` | Optional — 2 = fixed, 3 = percentage             |
| `feeAmount`  | `number` | Optional — fee amount (depending on feeType)     |

**Returns:**  
Dynamic QRIS string with recalculated CRC16 (Tag 63).

---

### `generateQrisPngDataUrl(qrisPayload, options?)`

| Parameter        | Type     | Description                                  |
|------------------|----------|----------------------------------------------|
| `qrisPayload`    | `string` | The QRIS string to render                    |
| `options.margin` | `number` | Optional white border size (default `2`)     |
| `options.scale`  | `number` | QR image scale (default `6`)                 |

**Returns:**  
Promise → PNG `data:image/png;base64,...` string

---

## 📁 Project Structure

```text
index.js
src/
 ├─ qrisDynamic.js   → Generate dynamic QRIS
 ├─ qrisImage.js     → Generate QR image (DataURL)
 ├─ tlv.js           → TLV helper (parse & build)
 └─ crc16.js         → CRC16 calculation
```

---

## 🧾 License

MIT License © 2025 **Nutrline Era**  
Built by Nutrline Era 💚  
“Empowering small developers with open-source automation tools.”