@sk-py/upi-qr/UPIQRComponent.jsx

Generate NPCI-compliant UPI QR codes for Indian digital payments. Supports payee VPA, amount, transaction note, and more.

// UPIQRComponent.js
import React from 'react';

/**
 * React Component to display UPI QR code
 * @param {Object} props
 * @param {string} props.qr - Base64 image string (from generateUPIQR)
 * @param {string} props.intent - UPI payment URL
 * @param {string} [props.alt] - Alt text for image
 * @param {string} [props.size] - Width in px (e.g., "200px")
 */
export default function UPIQRComponent({
  qr,
  intent,
  alt = "UPI QR Code",
  size = "200px",
}) {
  return (
    <div style={{ textAlign: "center" }}>
      <img src={qr} alt={alt} style={{ width: size, height: size }} />
      <div style={{ marginTop: "8px" }}>
        <a href={intent} style={{ color: "#007bff" }}>
          Pay Now via UPI
        </a>
      </div>
    </div>
  );
}