JavaScript / Node.js Guide

Complete guide to using QR Code API with JavaScript and Node.js.

Installation

Using npm (Node.js)

npm install @qrcodeapi/sdk

Browser (CDN)

<script src="https://cdn.jsdelivr.net/npm/@qrcodeapi/sdk"></script>

No SDK Required

You can also use the API directly with fetch:

const response = await fetch(
  'https://www.qrcodeapi.io/api/generate?data=hello',
  { headers: { 'Authorization': 'Bearer YOUR_API_KEY' } }
);

Quick Start

Node.js

const fs = require('fs');

const API_KEY = process.env.QRCODE_API_KEY;

async function generateQR(data, filename = 'qr.png') {
  const response = await fetch(
    `https://www.qrcodeapi.io/api/generate?data=${encodeURIComponent(data)}`,
    {
      headers: {
        'Authorization': `Bearer ${API_KEY}`
      }
    }
  );

  if (!response.ok) {
    const error = await response.json();
    throw new Error(error.message);
  }

  const buffer = Buffer.from(await response.arrayBuffer());
  fs.writeFileSync(filename, buffer);
  console.log(`Saved to ${filename}`);
}

generateQR('https://example.com');

Browser

const API_KEY = 'YOUR_API_KEY'; // ⚠️ Use backend proxy in production

async function generateQR(data) {
  const response = await fetch(
    `https://www.qrcodeapi.io/api/generate?data=${encodeURIComponent(data)}`,
    {
      headers: {
        'Authorization': `Bearer ${API_KEY}`
      }
    }
  );

  if (!response.ok) {
    throw new Error('Failed to generate QR code');
  }

  const blob = await response.blob();
  const url = URL.createObjectURL(blob);
  
  const img = document.createElement('img');
  img.src = url;
  document.body.appendChild(img);
}

generateQR('https://example.com');

Complete Examples

Generate with Custom Options

async function generateCustomQR(data, options = {}) {
  const params = new URLSearchParams({
    data,
    size: options.size || 300,
    format: options.format || 'png',
    color: options.color || '000000',
    background: options.background || 'ffffff',
    errorCorrection: options.errorCorrection || 'M',
    margin: options.margin || 4
  });

  const response = await fetch(
    `https://www.qrcodeapi.io/api/generate?${params}`,
    {
      headers: {
        'Authorization': `Bearer ${API_KEY}`
      }
    }
  );

  if (!response.ok) {
    const error = await response.json();
    throw new Error(error.message);
  }

  return response.blob();
}

// Usage
const qr = await generateCustomQR('https://example.com', {
  size: 500,
  color: '22c55e',
  format: 'svg'
});

Create Dynamic Link

async function createDynamicLink(name, targetUrl) {
  const response = await fetch('https://www.qrcodeapi.io/api/links', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${API_KEY}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ name, targetUrl })
  });

  if (!response.ok) {
    const error = await response.json();
    throw new Error(error.message);
  }

  return response.json();
}

// Usage
const link = await createDynamicLink('My Campaign', 'https://example.com');
console.log(`Short URL: https://www.qrcodeapi.io/r/${link.shortCode}`);

Get Analytics

async function getAnalytics(linkId) {
  const response = await fetch(
    `https://www.qrcodeapi.io/api/analytics?linkId=${linkId}`,
    {
      headers: {
        'Authorization': `Bearer ${API_KEY}`
      }
    }
  );

  if (!response.ok) {
    const error = await response.json();
    throw new Error(error.message);
  }

  return response.json();
}

// Usage
const analytics = await getAnalytics('your-link-id');
console.log(`Total scans: ${analytics.analytics.totalScans}`);

Batch Generation

async function generateBatch(items, defaults = {}) {
  const response = await fetch('https://www.qrcodeapi.io/api/batch', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${API_KEY}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ items, defaults })
  });

  if (!response.ok) {
    const error = await response.json();
    throw new Error(error.message);
  }

  return response.blob();
}

// Usage - Generate QR codes for multiple URLs
const items = [
  { data: 'https://example.com/1', filename: 'qr1.png' },
  { data: 'https://example.com/2', filename: 'qr2.png' },
  { data: 'https://example.com/3', filename: 'qr3.png' }
];

const zipBlob = await generateBatch(items, { size: 400 });

Express.js Server Example

Proxy API calls through your backend to hide your API key:

const express = require('express');
const app = express();

const API_KEY = process.env.QRCODE_API_KEY;

app.get('/api/qr', async (req, res) => {
  const { data, size, color } = req.query;

  if (!data) {
    return res.status(400).json({ error: 'data parameter required' });
  }

  const params = new URLSearchParams({
    data,
    size: size || 300,
    color: color || '000000'
  });

  try {
    const response = await fetch(
      `https://www.qrcodeapi.io/api/generate?${params}`,
      {
        headers: {
          'Authorization': `Bearer ${API_KEY}`
        }
      }
    );

    if (!response.ok) {
      const error = await response.json();
      return res.status(response.status).json(error);
    }

    const buffer = Buffer.from(await response.arrayBuffer());
    res.set('Content-Type', 'image/png');
    res.send(buffer);
  } catch (error) {
    res.status(500).json({ error: 'Failed to generate QR code' });
  }
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

Error Handling

async function safeGenerateQR(data) {
  try {
    const response = await fetch(
      `https://www.qrcodeapi.io/api/generate?data=${encodeURIComponent(data)}`,
      {
        headers: { 'Authorization': `Bearer ${API_KEY}` }
      }
    );

    if (response.status === 429) {
      const error = await response.json();
      console.log(`Rate limited. Retry after ${error.retryAfter} seconds`);
      await new Promise(r => setTimeout(r, error.retryAfter * 1000));
      return safeGenerateQR(data); // Retry
    }

    if (!response.ok) {
      const error = await response.json();
      throw new Error(error.message);
    }

    return response.blob();
  } catch (error) {
    console.error('Error generating QR:', error.message);
    throw error;
  }
}

TypeScript Types

interface QROptions {
  size?: number;
  format?: 'png' | 'svg';
  color?: string;
  background?: string;
  errorCorrection?: 'L' | 'M' | 'Q' | 'H';
  margin?: number;
}

interface DynamicLink {
  id: string;
  name: string;
  shortCode: string;
  targetUrl: string;
  scanCount: number;
  createdAt: string;
  updatedAt: string;
}

interface Analytics {
  totalScans: number;
  uniqueScans: number;
  scansByDay: { date: string; scans: number }[];
  scansByCountry: { country: string; scans: number }[];
  scansByDevice: { device: string; scans: number }[];
}

async function generateQR(data: string, options?: QROptions): Promise<Blob> {
  // Implementation
}

Related

• React Integration - Use with React
• TypeScript SDK - Full SDK with types
• API Reference - Complete API docs