Svelte Example Integration

<script>
  import { onMount } from 'svelte';

  let vpa = '';
  let name = '';
  let amount = '';
  let result = null;
  let loading = false;
  let upiqrcodeLib = null;

  onMount(async () => {
    try {
      const mod = await import('https://cdn.jsdelivr.net/npm/upiqrcode@1.5.5/upiqrcode.js');
      await mod.default(); // Initialize WASM
      upiqrcodeLib = mod;
    } catch (err) {
      console.error('Failed to load upiqrcode library', err);
    }
  });

  async function handleGenerate(e) {
    e.preventDefault();
    if (!vpa || !name) return;
    loading = true;
    try {
      const params = {
        payeeVPA: vpa,
        payeeName: name,
        currency: 'INR',
      };
      if (amount) params.amount = parseFloat(amount).toFixed(2);

      result = await upiqrcodeLib.upiqrcode(params);
    } catch (err) {
      console.error(err);
    } finally {
      loading = false;
    }
  }
</script>

<form on:submit={handleGenerate}>...</form>

<!-- Render raw SVG string using Svelte {@html ...} -->
{#if result}
  <div class="qr-svg-container">
    {@html result.qr}
  </div>
{/if}

<style>
  :global(.qr-svg-container svg) {
    width: 200px !important;
    height: 200px !important;
  }
</style>