Generating PIX QR Code - Safefy Pay

The pix.copyAndPaste field returns the PIX BR Code (EMV string). Use this value to render a QR Code image in your 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>Or copy the code:</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 }}
    />
  );
}

The copyAndPaste value can also be copied and pasted directly into a banking app.