Vue KHQR Generator

A Vue.js component for generating KHQR codes for payment in Cambodia. Supports both USD and KHR currencies.

Installation

npm install phorsz-vue-khqr-generator

Usage

Important: Required Imports

When using this component, you need to import BOTH the component AND its CSS:

// 1. First, import the component
import { KhqrGenerator } from 'phorsz-vue-khqr-generator'

// 2. Second, import the CSS (required for proper styling)
import 'phorsz-vue-khqr-generator/src/components/KhqrGenerator.css'

Global Registration

import { createApp } from 'vue'
import VueKhqrGenerator from 'phorsz-vue-khqr-generator'
import 'phorsz-vue-khqr-generator/src/components/KhqrGenerator.css' // Don't forget the CSS!

const app = createApp(App)
app.use(VueKhqrGenerator)
app.mount('#app')

Local Registration

import { KhqrGenerator } from 'phorsz-vue-khqr-generator'
import 'phorsz-vue-khqr-generator/src/components/KhqrGenerator.css' // Don't forget the CSS!

export default {
  components: {
    KhqrGenerator
  }
}

Template Usage

<template>
  <KhqrGenerator
   merchant-name="my store"
          :amount="100.00"
          currency="USD"
          merchant-id="test1"
          merchant-city="Battambang"
          country-code="KH"
          bill-number="#0001"
          mobile-number="85512345678"
          store-label="my store"
          terminal-label="store1"
          expireTime="3"
  />
</template>

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | merchantName | String | Yes | - | Name of the merchant | | merchantId | String | Yes | - | Merchant ID for KHQR | | amount | Number/String | Yes | - | Transaction amount | | currency | String | No | 'USD' | Currency code (USD or KHR) | | expireTime | Number | No | 5 | QR code expiration time in minutes | | merchantCity | String | No | 'Phnom Penh' | City of the merchant | | countryCode | String | No | 'KH' | Country code | | billNumber | String | No | '#0001' | Bill reference number | | mobileNumber | String | No | '' | Merchant mobile number | | storeLabel | String | No | '' | Store label | | terminalLabel | String | No | '' | Terminal label |

Features

• Generates KHQR codes following the Bakong specification
• Supports both USD and KHR currencies
• Dynamic QR code generation with expiration
• Fallback to EMVCo QR format
• Customizable styling with Tailwind CSS
• Currency symbol overlay on QR code
• Proper amount formatting (2 decimals for USD, whole numbers for KHR)

License

MIT