Solana Pay SDK (problem with createQR function)

Question

import { encodeURL, createQR, createQROptions } from "@solana/pay";
import {  PublicKey } from "@solana/web3.js";
import BigNumber from "bignumber.js";

const recipient = new PublicKey("2V4TiQYA4EdN7xrsUFHc5phvU1ozKZVHEtxbKVA8WPFv");
const amount = new BigNumber(1);
const label = "Michael";
const message = "Thanks for all the fish";

const url = encodeURL({
  recipient,
  amount,
  label,
  message,
});

const options = createQROptions(url);
const qrcode = createQR(url)

When i run the code i get this error :

webpack://QRCodeStyling/./src/core/QRSVG.ts:48
    this._element = document.createElementNS("http://www.w3.org/2000/svg", "svg");
                    ^
ReferenceError: document is not defined
    at new t (webpack://QRCodeStyling/./src/core/QRSVG.ts:48:21)
    at t._setupSvg (webpack://QRCodeStyling/./src/core/QRCodeStyling.ts:37:19)
    at t.update (webpack://QRCodeStyling/./src/core/QRCodeStyling.ts:109:12)
    at new t (webpack://QRCodeStyling/./src/core/QRCodeStyling.ts:24:10)

I want to save the qrcode as a svg or png on my desktop using fs module can i ?

Answer 1

The library used by createQR only works in the browser, which is why you see that message about needing document. If you're using eg Next with SSR then you'll need to make sure it's only rendered on the client.

If you need to render it on the server then you'll need to use a different QR library. Any QR code encoding the URL will work, our createQR and createQROptions just provide some nice default styles.

Answer 2

if you want to generate QR code on the server side you need to use @loskir/styled-qr-code-node lib here the new code.

    import { encodeURL, createQROptions } from "@solana/pay";
    import { Keypair, PublicKey } from "@solana/web3.js";
    import BigNumber from "bignumber.js";
    import { QRCodeCanvas } from "@loskir/styled-qr-code-node";
    import path from "path";
    
    
    const recipient = new PublicKey("2V4TiQYA4EdN7xrsUFHc5phvU1ozKZVHEtxbKVA8WPFv");
    const reference = new Keypair().publicKey;
    const amount = new BigNumber(0);
    const label = "Charon Dev";
    const message = "Thanks for all the fish";
    let r = (Math.random() + 1).toString(36).substring(7);
    const memo = "#" + r;
    
    const url = encodeURL({
      recipient,
      amount,
      label,
      message,
      reference,
      memo,
    });
    
    const options = createQROptions(url);
    
    options.type = "canvas";
    options.image = path.join(__dirname , 'solana.png') // you must to have solana logo on you files
    const qrCode =  new QRCodeCanvas({
      ...options
    });
    
    qrCode.toFile('./qrcode.png', 'png') // export you file