Pular para o conteúdo
Tutorial

Gere códigos QR com uma API REST: um POST, SVG instantâneo

| 5 min read

Gere códigos QR a partir de qualquer URL ou texto com uma solicitação POST. Retorna SVG em menos de 100ms. Nível gratuito, sem instalação de biblioteca, 6 parâmetros configuráveis.

QR code displayed on a phone screen
Photo by Markus Winkler on Unsplash

O checkout do seu e-commerce precisa exibir um código QR para o URL de rastreamento de cada pedido. Você poderia instalar uma biblioteca QR do lado do cliente, configurar um elemento de tela, lidar com o ciclo de vida de renderização, e adicione 30-40 KB ao seu pacote. Ou você pode enviar uma solicitação POST e receber um SVG.

O botoi /v1/qr/generate endpoint transforma qualquer string ou URL em um QR escaneável código. Ele retorna SVG bruto que você pode incorporar em HTML, salvar em um arquivo ou transmitir para um PDF. Sem npm pacote, sem dependência de canvas, sem etapa de construção.

A chamada da API

Envie uma solicitação POST com o texto que deseja codificar:

A resposta é uma imagem SVG bruta (Content-Type: image/svg+xml):

Esse SVG fica nítido em qualquer tamanho porque é baseado em vetores. Deixe-o cair em um <img> tag, incorporá-la em seu HTML ou canalizá-la para um arquivo. Sem análise JSON necessário; o corpo da resposta é o próprio SVG.

Parâmetros

O endpoint aceita seis parâmetros. Apenas text é necessário:

  • texto (string, obrigatório): O URL ou texto a ser codificado. Suporta até ~4.296 caracteres alfanuméricos.
  • tamanho (número, padrão 300): Largura e altura em pixels. Faixa: 50 a 2.000.
  • cor escura (string hexadecimal, padrão #000000): Cor de primeiro plano de os módulos QR.
  • cor clara (string hexadecimal, padrão #ffffff): Cor de fundo.
  • erroCorrectionLevel (string, padrão M): Um de L (7%), M (15%), Q (25%) ou H (30%). Níveis mais altos toleram mais danos, mas produzem códigos mais densos.
  • margem (número, padrão 4): Zona silenciosa ao redor do código QR em módulos. Faixa: 0 a 20.

Aqui está uma solicitação usando todos os seis parâmetros:

Exemplos práticos

Código QR do menu do restaurante

Imprima um código QR nas barracas de mesa para que os clientes possam acessar o menu completo em seus telefones. Erro correção H lida com arranhões e manchas de café.

Código QR do ingresso do evento

Codifique um ID de bilhete exclusivo em cada código QR. A equipe escaneia na porta com qualquer smartphone câmera. Error correction Q provides a good balance between density and damage tolerance para crachás impressos.

Código QR do link de pagamento

Gere um link de pagamento que pode ser escaneado para faturas, recibos ou displays de ponto de venda. O o cliente o escaneia e chega a uma página de checkout do Stripe.

Geração de lote em loop

Precisa de códigos QR para um catálogo de produtos? Percorra uma lista de URLs e salve cada SVG no disco. Este script bash gera quatro códigos QR em menos de um segundo:

Saída:

Exemplo Node.js: códigos QR para rastreamento de pedidos

Este servidor Express expõe um /orders/:id/qr ponto final. Quando seu check-out página ou modelo de e-mail de confirmação busca este URL, ele recebe de volta um código QR SVG apontando para a página de rastreamento do pedido.

Uso:

O endpoint define um cabeçalho de cache de 24 horas para que solicitações repetidas para o mesmo pedido não sejam atingidas a API novamente. Na produção, adicione Redis ou um CDN na frente desta rota para aumentar o tráfego.

Bibliotecas QR do lado do cliente vs API: quando usar quais

Use a API quando precisar de geração no servidor (e-mails, PDFs, recibos), quando quiser mantenha seu pacote de front-end pequeno ou ao gerar códigos QR em um fluxo de trabalho de back-end como processamento de pedidos ou emissão de tickets.

Use uma biblioteca do lado do cliente quando seu aplicativo precisar funcionar off-line, quando a latência for mais importante maior que o tamanho do pacote (renderizações abaixo de 5 ms) ou quando você está construindo uma ferramenta onde os usuários geram Códigos QR interativamente no navegador e você não quer depender de uma solicitação de rede para cada pressionamento de tecla.

Pontos-chave

O nível gratuito de 5 solicitações por minuto cobre desenvolvimento, prototipagem e baixo volume uso da produção. Para geração em lote ou aplicativos de alto tráfego, adicione sua chave de API no campo Authorization: Bearer cabeçalho. Verifique o Documentos da API para a referência completa do endpoint.

FAQ

Preciso de uma chave API para gerar códigos QR?
Não. O nível gratuito permite acesso anônimo a 5 solicitações por minuto com limitação de taxa baseada em IP. Para aplicativos de produção ou geração em lote, adicione uma chave de API no cabeçalho de autorização para remover o limite de taxa.
Posso obter um PNG em vez de SVG?
Defina o parâmetro format como "base64" para receber o código QR como um URI de dados que você pode incorporar em uma tag img. A API retorna saída baseada em SVG em todos os casos porque o SVG é independente da resolução e é renderizado com nitidez em qualquer tamanho. Converta para PNG do lado do cliente com um elemento canvas se precisar de um arquivo raster.
Qual é o comprimento máximo de dados para um código QR?
Os códigos QR suportam até cerca de 4.296 caracteres alfanuméricos ou 2.953 bytes de dados binários. A maioria dos URLs e strings curtas estão dentro desses limites. Se você atingir o teto, primeiro encurte seu URL usando um encurtador de link.
Qual nível de correção de erros devo usar?
Use M (15% de recuperação) para telas digitais e L (7%) quando a densidade do código for importante. Escolha Q (25%) ou H (30%) para materiais impressos que possam ficar arranhados, dobrados ou parcialmente cobertos por uma sobreposição de logotipo.
Posso personalizar as cores do código QR?
Sim. Passe darkColor e lightColor como valores hexadecimais (por exemplo, "#1a1a2e" e "#ffffff"). Certifique-se de que haja contraste suficiente entre as duas cores para que os scanners leiam o código de maneira confiável.

Comece a construir com botoi

150+ endpoints de API para consultas, processamento de texto, geração de imagens e utilitários para desenvolvedores. Plano gratuito, sem cartão de crédito.