Générez des codes QR avec une API REST : un POST, un SVG instantané

Votre paiement en ligne doit afficher un code QR pour l'URL de suivi de chaque commande. Tu pourrais installer une bibliothèque QR côté client, configurer un élément de canevas, gérer le cycle de vie du rendu, et ajoutez 30 à 40 Ko à votre forfait. Ou vous pouvez envoyer une requête POST et récupérer un SVG.

Le botoï /v1/qr/generate le point de terminaison transforme n'importe quelle chaîne ou URL en un QR analysable code. Il renvoie du SVG brut que vous pouvez intégrer au format HTML, enregistrer dans un fichier ou diffuser au format PDF. Pas de npm package, pas de dépendance de canevas, pas d’étape de construction.

L'appel API

Envoyez une requête POST avec le texte que vous souhaitez encoder :

La réponse est une image SVG brute (Content-Type : image/svg+xml) :

Ce SVG est rendu net quelle que soit la taille car il est vectoriel. Déposez-le dans un <img> balisez-le, insérez-le dans votre code HTML ou dirigez-le vers un fichier. Pas d'analyse JSON nécessaire ; le corps de la réponse est le SVG lui-même.

Paramètres

Le point de terminaison accepte six paramètres. Seulement text est requis :

• texte (chaîne, obligatoire) : L'URL ou le texte à encoder. Prend en charge jusqu'à ~4 296 caractères alphanumériques.
• taille (nombre, 300 par défaut) : Largeur et hauteur en pixels. Plage : 50 à 2000.
• couleur foncée (chaîne hexadécimale, par défaut #000000) : Couleur de premier plan de les modules QR.
• couleurlumière (chaîne hexadécimale, par défaut #ffffff) : Couleur de fond.
• niveau de correction d'erreur (chaîne, par défaut M) : Un des L (7%), M (15 %), Q (25 %) ou H (30 %). Des niveaux plus élevés tolèrent plus de dégâts mais produisent des codes plus denses.
• marge (numéro, par défaut 4) : Zone calme autour du QR code dans les modules. Plage : 0 à 20.

Voici une requête utilisant les six paramètres :

Exemples pratiques

Code QR de la carte du restaurant

Imprimez un code QR sur les tentes de table afin que les convives puissent afficher le menu complet sur leur téléphone. Erreur la correction H gère les éraflures et les taches de café.

Code QR du billet d'événement

Encodez un identifiant de ticket unique dans chaque code QR. Le personnel le scanne à la porte avec n'importe quel smartphone caméra. La correction d'erreur Q offre un bon équilibre entre densité et tolérance aux dommages pour les badges imprimés.

Code QR du lien de paiement

Générez un lien de paiement numérisable pour les factures, les reçus ou les affichages de point de vente. Le le client le scanne et arrive sur une page de paiement Stripe.

Génération de lots en boucle

Besoin de codes QR pour un catalogue de produits ? Parcourez une liste d’URL et enregistrez chaque SVG sur le disque. Ce script bash génère quatre codes QR en moins d'une seconde :

Sortir:

Exemple Node.js : codes QR pour le suivi des commandes

Ce serveur Express expose un /orders/:id/qr point final. Lors de votre paiement la page ou le modèle d'e-mail de confirmation récupère cette URL, il récupère un code QR SVG pointant vers vers la page de suivi de la commande.

Usage:

Le point de terminaison définit un en-tête de cache de 24 heures afin que les demandes répétées pour la même commande ne soient pas exécutées. l'API à nouveau. En production, ajoutez Redis ou un CDN devant cette route pour un trafic plus élevé.

Bibliothèques QR côté client vs API : quand utiliser laquelle

Utilisez l'API lorsque vous avez besoin d'une génération côté serveur (e-mails, PDF, reçus), lorsque vous souhaitez gardez votre package frontend petit, ou lorsque vous générez des codes QR dans un flux de travail backend comme le traitement des commandes ou l'émission de billets.

Utilisez une bibliothèque côté client lorsque votre application doit fonctionner hors ligne, lorsque la latence est plus importante que la taille du bundle (rendus inférieurs à 5 ms), ou lorsque vous créez un outil dans lequel les utilisateurs génèrent Codes QR de manière interactive dans le navigateur et vous ne voulez pas dépendre d'une requête réseau pour chaque frappe.

Points clés

Le niveau gratuit à 5 requêtes par minute couvre le développement, le prototypage et les faibles volumes utilisation en production. Pour la génération par lots ou les applications à fort trafic, ajoutez votre clé API dans le Authorization: Bearer en-tête. Vérifiez le Documents sur l'API pour la référence complète du point final.