This is an example of how you can use the @solana/pay JavaScript library to create a simple point of sale system.

You can check out the app, use the code as a reference, or run it yourself to start accepting decentralized payments in-person.

To build and run this app locally, you'll need:

• Node.js v14.17.0 or above

• Yarn

• Setup two wallets on Phantom (Merchant and Customer)

  1. Create merchant wallet

  Follow the guide on how to create a wallet. This wallet will provide the recipient address.

  2. Create customer wallet

  Follow the guide on how to create another wallet. This wallet will be paying for the goods/services.

  3. Set Phantom to connect to devnet

  1. Click the settings icon in the Phantom window
  2. Select the "Change network" option and select "Devnet"

  4. Airdrop SOL to customer wallet

  Use solfaucet to airdrop SOL to the customer wallet.

  You'll need SOL in the customer wallet to pay for the goods/services + transaction fees

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

git clone https://github.com/solana-labs/solana-pay.git

gh repo clone solana-labs/solana-pay

cd solana-pay/point-of-sale
yarn install

yarn dev

yarn proxy

open "https://localhost:3001?recipient=Your+Merchant+Address&label=Your+Store+Name"

You may need to accept a locally signed SSL certificate to open the page.

Import the Mainnet endpoint, along with USDC's mint address and icon in the client/components/pages/App.tsx file.

import { MAINNET_ENDPOINT, MAINNET_USDC_MINT } from '../../utils/constants';
import { USDCIcon } from '../images/USDCIcon';

In the same file, set the endpoint value in the <ConnectionProvider> to MAINNET_ENDPOINT and set the following values in the <ConfigProvider>:

splToken={MAINNET_USDC_MINT}
symbol="USDC"
icon={<USDCIcon />}
decimals={6}
minDecimals={2}

Make sure to use 6 decimals for USDC!

When you're done, it should look like this:

<ConnectionProvider endpoint={MAINNET_ENDPOINT}>
    <WalletProvider wallets={wallets} autoConnect={connectWallet}>
        <WalletModalProvider>
            <ConfigProvider
                baseURL={baseURL}
                link={link}
                recipient={recipient}
                label={label}
                message={message}
                splToken={MAINNET_USDC_MINT}
                symbol="USDC"
                icon={<USDCIcon />}
                decimals={6}
                minDecimals={2}
                connectWallet={connectWallet}
            >

Transaction Requests are a new feature in Solana Pay.

In the client/components/pages/App.tsx file, toggle these lines:

    // Toggle comments on these lines to use transaction requests instead of transfer requests.
    const link = undefined;
    // const link = useMemo(() => new URL(`${baseURL}/api/`), [baseURL]);

When you're done, it should look like this:

    // Toggle comments on these lines to use transaction requests instead of transfer requests.
    // const link = undefined;
    const link = useMemo(() => new URL(`${baseURL}/api/`), [baseURL]);

The generated QR codes in the app should now use transaction requests. To see what's going on and customize it, check out the server/api/index.ts file.

You can deploy this point of sale app to Vercel with a few clicks.

Fork the Solana Pay repository

Login to Vercel and create a new project

Import the forked repository from GitHub.

If you're forked repository is not listed, you'll need to adjust your GitHub app permissions. Search for the and select the Missing Git repository? Adjust GitHub App Permissions option.

Choose point-of-sale as the root directory:

Configure the project as follows:

Once the deployment finishes, navigate to

https://<YOUR DEPLOYMENT URL>?recipient=<YOUR WALLET ADDRESS>&label=Your+Store+Name

The Solana Pay Point of Sale app is open source and available under the Apache License, Version 2.0. See the LICENSE file for more info.