CoinPayments Documentation

Streamlining Payments with QR Codes

Merchants often leverage custom scripts for receiving customer payments, such as subscription renewals or account top-ups (e.g., funding a casino account).

To enhance this process, you can embed deposit details (amount, currency, address) into a QR code.

This method simplifies payment execution for customers and significantly reduces the likelihood of errors when transferring funds.

<div id="canvas"></div>
<script type="text/javascript" src="https://unpkg.com/qr-code-styling@1.5.0/lib/qr-code-styling.js"></script>
<script type="text/javascript">
    const generateQRData = (currency, address, tag, amount) => {
        switch (currency.name) {
            case 'Bitcurrency SV':
                return `bitcurrency:${address}?sv&amount=${amount}`;
            case 'Tether USD (Omni)':
                return `bitcurrency:${address}?amount=${amount}&req-asset=${currency.id}`;
            case 'BinanceCoin':
                return `bnb:${address}?sv&amount=${amount}&req-asset=${currency.id}`;
            case 'Tether USD (ERC20)':
                return `ethereum:${address}?value=${amount}&req-asset=${currency.id.slice(currency.id.indexOf(':') + 1)}`;
            case 'Tether USD (TRC20)':
                return `tron:${address}?value=${amount}&req-asset=${currency.id.slice(currency.id.indexOf(':') + 1)}`;
            default:
                return `${currency?.name?.toLowerCase().replace(/ /g, '')}:${address}?amount=${amount}${tag ? `&tag=${tag}` : ''}`;
        }
    };
 
    const color = "#2A5ED5";
    const corner = "#000000";
    const margin = 5;
 
    const qrCode = new QRCodeStyling({
        width: 200,
        height: 200,
        dotsOptions: {
            color: color,
            type: "square"
        },
        backgroundOptions: {
            color: "transparent",
            gradient: null
        },
        cornersSquareOptions: {
            type: "square",
            color: corner
        },
        cornersDotOptions: {
            type: "square",
            color: corner
        },
        imageOptions: {
            crossOrigin: "anonymous",
            imageSize: 0.5,
            margin: margin
        }
    });
 
    qrCode.append(document.querySelector('#canvas'));
    qrCode.update({
        data: generateQRData(currency, address, tag, amount)
    });
</script>