Geek Culture
Published in

Geek Culture

How to sell NFTs using a QR code on Solana 🔥

Introduction

What is CandyPay?

What is Candy Machine?

Setup

Installing the CLI tools

  • Cloning metaplex’s git repo:
git clone -b v1.1.1 https://github.com/metaplex-foundation/metaplex.git
  • Installing JavaScript SDK dependencies:
yarn install --cwd ~/metaplex/js/ --network-timeout 600000
ts-node ~/metaplex/js/packages/CLI/src/candy-machine-v2-CLI.ts --version

Configuring Solana CLI

solana config set --url devnet
solana-keygen new --outfile ~/.config/Solana/id.json
solana config set --keypair ~/.config/solana/id.json
solana config get

Airdropping some $SOL

solana airdrop 1

Creating Solana NFT Collection using Metaplex

ts-node ~/metaplex/js/packages/cli/src/candy-machine-v2-cli.ts upload -e devnet -k ~/.config/solana/id.json -cp config.json ./assets

Creating our website with CandyPay and Next.js

Setting up a new Next.js app

npx create-next-app solana-qr-blog --ts
npm i  @candypay/sdk @solana/pay @solana/web3.js axios # npmyarn add @candypay/sdk @solana/pay @solana/web3.js axios # yarn

Using the public CandyPay API

Calling the API from the frontend

const generateQRCode = async () => {
const response = await axios.get("/api/get-qr");
const qr = createQR(response.data.solanaURL, 512, "transparent");
if (qrRef.current) {
qrRef.current.innerHTML = "";
qr.append(qrRef.current);
}
};
const qrRef = useRef<HTMLDivElement>(null);
useEffect(() => {
generateQRCode();
}, []);
<div className={styles.container}>
<div ref={qrRef} />
</div>

Using CandyPay’s SDK

const urlParams: TransactionRequestURLFields = {
link: new URL(`${process.env.NEXT_PUBLIC_URL}/api/mint`),
label: "CandyPay demo",
message: "https://www.downloadclipart.net/large/candy-png-free-download.png",
};
const qrRef = useRef<HTMLDivElement>(null);
<div className={styles.container}>
<div ref={qrRef} />
</div>

Creating the API

Conclusion

Credits

Useful links

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Avneesh Agarwal

I am a young enthusiastic web developer. I love to code in ReactJS and make beautiful websites.