Gerando QR Code do PIX - Safefy Pay

O campo pix.copyAndPaste retorna o BR Code (EMV) do PIX. Use esse valor para gerar a imagem do QR Code no frontend.

JavaScript (qrcode.js)

<script src="https://cdn.jsdelivr.net/npm/qrcode/build/qrcode.min.js"></script>

<canvas id="qrcode"></canvas>

<script>
  const pixCode = "00020126580014br.gov.bcb.pix0136a1b2c3d4...";
  QRCode.toCanvas(document.getElementById('qrcode'), pixCode);
</script>

React (react-qr-code)

import QRCode from 'react-qr-code';

function PaymentPage({ transaction }) {
  return (
    <div>
      <QRCode value={transaction.pix.copyAndPaste} size={256} />
      <p>Ou copie o codigo:</p>
      <code>{transaction.pix.copyAndPaste}</code>
    </div>
  );
}

Next.js (next-qrcode)

import { useQRCode } from 'next-qrcode';

function PaymentPage({ transaction }) {
  const { Canvas } = useQRCode();

  return (
    <Canvas
      text={transaction.pix.copyAndPaste}
      options={{ width: 256, margin: 2 }}
    />
  );
}

O valor copyAndPaste tambem pode ser copiado e colado diretamente no app do banco.