13 |
16 | {children}
17 |
18 | );
19 | };
20 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import path from 'path';
2 | import { defineConfig, loadEnv } from 'vite';
3 |
4 | export default defineConfig(({ mode }) => {
5 | const env = loadEnv(mode, '.', '');
6 | return {
7 | define: {
8 | 'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
9 | 'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
10 | },
11 | resolve: {
12 | alias: {
13 | '@': path.resolve(__dirname, '.'),
14 | }
15 | }
16 | };
17 | });
18 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2020",
4 | "experimentalDecorators": true,
5 | "useDefineForClassFields": false,
6 | "module": "ESNext",
7 | "lib": ["ES2020", "DOM", "DOM.Iterable"],
8 | "skipLibCheck": true,
9 |
10 | /* Bundler mode */
11 | "moduleResolution": "bundler",
12 | "allowImportingTsExtensions": true,
13 | "isolatedModules": true,
14 | "moduleDetection": "force",
15 | "noEmit": true,
16 | "allowJs": true,
17 | "jsx": "react-jsx",
18 |
19 | /* Linting */
20 | "strict": true,
21 | "noUnusedLocals": true,
22 | "noUnusedParameters": true,
23 | "noFallthroughCasesInSwitch": true,
24 | "noUncheckedSideEffectImports": true,
25 |
26 | "paths": {
27 | "@/*" : ["./*"]
28 | }
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/components/Header.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { ChevronLeftIcon, GithubIcon } from './icons';
3 |
4 | interface HeaderProps {
5 | title: string;
6 | onBack?: () => void;
7 | }
8 |
9 | export const Header: React.FC{title}
20 | {onBack ? ( 21 | // Placeholder for spacing 22 | ) : ( 23 | 30 |
25 |
50 |
51 | {countdown}
52 |
53 |
54 | );
55 | };
56 |
--------------------------------------------------------------------------------
/components/icons.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | interface IconProps {
4 | className?: string;
5 | }
6 |
7 | export const ChevronLeftIcon: React.FC
51 |
66 |
67 | );
68 | };
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # QRIS Dynamic Generator
2 |
3 | This is a web-based tool to convert a static QRIS (Quick Response Code Indonesian Standard) into a dynamic one. Users can upload a static QRIS image, specify a payment amount and an optional transaction fee, and the application will generate a new, dynamic QRIS code ready for payment. The app also conveniently saves your previously used QRIS codes for quick access.
4 |
5 | ## ✨ Features
6 |
7 | * **Static to Dynamic QRIS Conversion**: The core feature is to generate a dynamic QRIS from a static one by embedding the payment amount.
8 | * **QR Code Scanning**: Upload a QRIS code image (PNG, JPG, GIF) to automatically scan its data.
9 | * **Custom Amount & Fee**: Set a specific payment amount for the dynamic QRIS.
10 | * **Flexible Transaction Fees**: Add a transaction fee, calculated either as a fixed amount (Rupiah) or a percentage.
11 | * **QRIS History**: The app saves up to 5 of your most recently used QRIS codes in your browser's local storage for easy reuse.
12 | * **Payment-Ready Display**: Shows the generated dynamic QRIS on a clean payment screen, complete with the merchant's name and the total amount.
13 | * **Responsive Design**: A mobile-first design that works smoothly on both desktop and mobile browsers.
14 |
15 | ## 🚀 How It Works
16 |
17 | 1. **Upload & Scan**: The user uploads an image of a static QRIS code. The `jsQR` library is used to read the QR code from the image and extract the static QRIS string data.
18 | 2. **Input Data**: The user enters the desired payment amount and, optionally, a transaction fee on the main form.
19 | 3. **Generate Dynamic QRIS**: The application takes the static QRIS data and injects new tags for the payment amount (`54`) and transaction fee (`55`, `56`, or `57`). It then replaces the static QRIS indicator (`010211`) with the dynamic one (`010212`).
20 | 4. **Recalculate CRC**: A new CRC-16 checksum is calculated for the modified QRIS string to ensure its validity.
21 | 5. **Render QR Code**: The final dynamic QRIS string is rendered as a new QR code image on the payment page using the `qrcode-generator` library.
22 |
23 | ## 🛠️ Technologies Used
24 |
25 | * **Frontend**: React 19, TypeScript
26 | * **Build Tool**: Vite
27 | * **Styling**: Tailwind CSS
28 | * **QR Code Reading**: `jsQR`
29 | * **QR Code Generation**: `qrcode-generator`
30 | * **Icons**: Font Awesome
31 |
32 | ## ⚙️ Setup and Run Locally
33 |
34 | **Prerequisites:** [Node.js](https://nodejs.org/)
35 |
36 | 1. **Clone the repository:**
37 | ```bash
38 | git clone https://github.com/your-username/qris-dinamis-generator.git
39 | cd qris-dinamis-generator
40 | ```
41 |
42 | 2. **Install dependencies:**
43 | ```bash
44 | npm install
45 | ```
46 |
47 |
48 | 3. **Run the development server:**
49 | ```bash
50 | npm run dev
51 | ```
52 |
53 | The application will be running at `http://localhost:5173` (or another port if 5173 is busy).
54 |
--------------------------------------------------------------------------------
/components/ImageUploader.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useRef, useCallback } from 'react';
2 | import { ImagePlusIcon } from './icons';
3 |
4 | // Make jsQR and qrcode available from the global scope (window)
5 | declare var jsQR: any;
6 |
7 | interface ImageUploaderProps {
8 | onQrDecode: (data: string | null, error?: string) => void;
9 | }
10 |
11 | export const ImageUploader: React.FC{paymentData.merchantName}
52 |53 | Payment of Rp{formatCurrency(paymentData.amount)} 54 |
55 | 56 |
57 |
61 |
62 |
58 | {/* QR Code is injected here */}
59 |
60 | 63 | E-Wallet transaction cannot be refunded 64 |
65 |
76 |
83 | {imagePreview ? (
84 | 
85 | ) : (
86 |
92 |
93 |
94 | );
95 | };
--------------------------------------------------------------------------------
/App.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { HomePage } from './pages/HomePage';
3 | import { PaymentPage } from './pages/PaymentPage';
4 | import type { PaymentData } from './types';
5 |
6 | // Make qrcode available from the global scope (window)
7 | declare var qrcode: any;
8 |
9 | // Utility function to calculate CRC16 checksum, ported from the PHP example
10 | const crc16 = (str: string): string => {
11 | let crc = 0xFFFF;
12 | const strlen = str.length;
13 | for (let c = 0; c < strlen; c++) {
14 | crc ^= str.charCodeAt(c) << 8;
15 | for (let i = 0; i < 8; i++) {
16 | if (crc & 0x8000) {
17 | crc = (crc << 1) ^ 0x1021;
18 | } else {
19 | crc = crc << 1;
20 | }
21 | }
22 | }
23 | const hex = (crc & 0xFFFF).toString(16).toUpperCase();
24 | return hex.padStart(4, '0');
25 | };
26 |
27 | // Extracts the merchant name (Tag 59) from the static QRIS string.
28 | const parseMerchantName = (qrisData: string): string => {
29 | const tag = '59';
30 | const tagIndex = qrisData.indexOf(tag);
31 | if (tagIndex === -1) {
32 | return 'Merchant'; // Default name if tag not found
33 | }
34 |
35 | try {
36 | const lengthIndex = tagIndex + tag.length;
37 | const lengthStr = qrisData.substring(lengthIndex, lengthIndex + 2);
38 | const length = parseInt(lengthStr, 10);
39 |
40 | if (isNaN(length) || length <= 0) {
41 | return 'Merchant';
42 | }
43 |
44 | const valueIndex = lengthIndex + 2;
45 | const merchantName = qrisData.substring(valueIndex, valueIndex + length);
46 | return merchantName.trim() || 'Merchant';
47 | } catch (e) {
48 | console.error("Failed to parse merchant name:", e);
49 | return 'Merchant';
50 | }
51 | };
52 |
53 | // Main logic to generate dynamic QRIS string, ported from PHP
54 | const generateDynamicQris = (
55 | staticQris: string,
56 | amount: string,
57 | feeType: 'Persentase' | 'Rupiah',
58 | feeValue: string
59 | ): string => {
60 | if (staticQris.length < 4) {
61 | throw new Error('Invalid static QRIS data.');
62 | }
63 |
64 | const qrisWithoutCrc = staticQris.substring(0, staticQris.length - 4);
65 | const step1 = qrisWithoutCrc.replace("010211", "010212");
66 |
67 | const parts = step1.split("5802ID");
68 | if (parts.length !== 2) {
69 | throw new Error("QRIS data is not in the expected format (missing '5802ID').");
70 | }
71 |
72 | const amountStr = String(parseInt(amount, 10)); // Remove leading zeros and decimals
73 | const amountTag = "54" + String(amountStr.length).padStart(2, '0') + amountStr;
74 |
75 | let feeTag = "";
76 | if (feeValue && parseFloat(feeValue) > 0) {
77 | if (feeType === 'Rupiah') {
78 | const feeValueStr = String(parseInt(feeValue, 10));
79 | feeTag = "55020256" + String(feeValueStr.length).padStart(2, '0') + feeValueStr;
80 | } else { // Persentase
81 | const feeValueStr = feeValue;
82 | feeTag = "55020357" + String(feeValueStr.length).padStart(2, '0') + feeValueStr;
83 | }
84 | }
85 |
86 | const payload = [parts[0], amountTag, feeTag, "5802ID", parts[1]].join('');
87 |
88 | const finalCrc = crc16(payload);
89 | return payload + finalCrc;
90 | };
91 |
92 |
93 | const App: React.FC = () => {
94 | const [route, setRoute] = useState<'home' | 'payment'>('home');
95 | const [paymentData, setPaymentData] = useState
87 |
90 | )}
91 |
116 |
126 | );
127 | };
128 |
129 | export default App;
--------------------------------------------------------------------------------
/pages/HomePage.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 | import { Header } from '../components/Header';
3 | import { FormField } from '../components/FormField';
4 | import { ImageUploader } from '../components/ImageUploader';
5 | import { ChevronDownIcon, TrashIcon } from '../components/icons';
6 | import type { DynamicQrisFormData, SavedQrisItem } from '../types';
7 |
8 | const MAX_SAVED_QRIS = 5;
9 |
10 | interface HomePageProps {
11 | onGenerate: (
12 | staticQris: string,
13 | amount: string,
14 | feeType: 'Persentase' | 'Rupiah',
15 | feeValue: string
16 | ) => void;
17 | parseMerchantName: (qrisData: string) => string;
18 | }
19 |
20 | export const HomePage: React.FC
117 |
118 | {route === 'home' &&
121 |
124 |
125 |