Learn to take payments both online and IRL with Solana Pay!

<h3>Welcome 🎉</h3><image src="https://gcyrkvfwpvlwjrrklxnh.supabase.co/storage/v1/object/public/tutorials/0a5b42c1-c0c1-4e7e-98dc-e54ad04fabe3/tutorial_86Njt8GNeX5MLeB3eSWmf" uploadmode="upload"></image>We’re excited to partner with our friends at <a target="_blank" rel="noopener noreferrer nofollow" class="link link link link link link link" href="https://solana.com">Solana</a> to bring you this in-depth guide to payments on Solana.Let’s get started!<h3>What we're building</h3>We’re going to build a point-of-sale web app that allows us to take payments from customers in person. We’ll present a QR code that they can scan with a Solana wallet to make the payment. As soon as they do our app will update to show that they’ve paid. It’s pretty magic, and you’ll see just how easy it is to make it work!We’re also going to look at online payments in Solana, and build a loyalty card scheme. You can do things like give users a 50% discount on every 5th purchase. Or whatever you like really, it’s super flexible. We’ll finish up with a sneak peek at some really cool upcoming Solana Pay functionality that pulls all of this together!<image src="https://gcyrkvfwpvlwjrrklxnh.supabase.co/storage/v1/object/public/tutorials/0a5b42c1-c0c1-4e7e-98dc-e54ad04fabe3/tutorial_orakD82eCP8_c0Z-eVwGM" uploadmode="url"></image><image src="https://gcyrkvfwpvlwjrrklxnh.supabase.co/storage/v1/object/public/tutorials/0a5b42c1-c0c1-4e7e-98dc-e54ad04fabe3/tutorial_lFfsmJiP4Y-43BN7PcDPb"></image><image src="https://gcyrkvfwpvlwjrrklxnh.supabase.co/storage/v1/object/public/tutorials/0a5b42c1-c0c1-4e7e-98dc-e54ad04fabe3/tutorial_oFEuXi8V8IFVQsP2c88Zk" uploadmode="upload"></image>You can see our demo app at <url href="https://solana-pay-tutorial.vercel.app" rendertype="link" content="https://solana-pay-tutorial.vercel.app"></url><url href="http://pointer-solana-pay-tutorial.vercel.app" rendertype="link" content="http://pointer-solana-pay-tutorial.vercel.app"></url><h3>Why Solana?</h3>Well first, what is Solana? It’s a blockchain that developers can build awesome apps on! It has two main features that make it amazing for the payment use case:<ul><li>It’s really fast. It’s as fast as paying by card in a shop. If you’ve used other blockchains and waited like 10 seconds for stuff to happen, you can forget about that here.</li><li>The fees are really low. Fractions of a cent. If you’ve ever bought an NFT or something and paid like $50 in gas, you can forget about that too.</li></ul>This ain’t your grandma’s blockchain!<a target="_blank" rel="noopener noreferrer nofollow" class="link link link link link link link" href="https://solana.com/">Their website</a> shows some stats, here’s what they look like for me as I’m writing this:<image src="https://gcyrkvfwpvlwjrrklxnh.supabase.co/storage/v1/object/public/tutorials/0a5b42c1-c0c1-4e7e-98dc-e54ad04fabe3/tutorial_W4JYPwWhtMzTJm91MqzkU"></image><ul><li>The network is handling 2,070 transactions per second</li><li>The average cost per transaction is $0.00025</li><li>The network has done almost 62.3 billion transactions so far. By the time you read this, there’ll be hundreds of millions more transactions processed</li></ul><h3>What is Solana Pay?</h3>Solana Pay is a specification for payments on Solana. It describes a way to encode a payment request in a URL, which can be displayed to users - for example as a QR code. And Solana mobile wallets are adding support for it, so users can seamlessly scan that QR code and make the payment.In short, Solana Pay makes payments work IRL, really well. It works because of those features of Solana: it’s as fast as any card machine, and it’s miles cheaper than any credit card processor.<h3>Heads up: you're SUPER early</h3>The stuff we’re building with here is brand new, and Solana itself is still new too! The main chain is still “mainnet beta”. It works amazingly well, and you might be surprised how well thought out the ecosystem is. But I want to set expectations here - we’re going to hit issues that are kinda tricky, and we’ll work together to figure things out. There’s going to be stuff that isn’t answered by Stack Overflow, and that’s always a bit scary! We’re going all the way to the stuff that’s still a work in progress as I write this, because it’s really really cool. It’s going to be awesome.. but definitely join the Discord for this one!

Introduce Solana Pay and use it to let people buy from our shop in person!

Overview

<h3>Browser Wallet</h3>We’re going to start by getting a browser wallet set up, which we’ll use to get you onboarded to the Solana blockchain! Like in other blockchains, wallets are what we use to track our balances and interact with applications. If you already have a Solana wallet set up then feel free to speed through this!The most popular browser wallet is called Phantom, and you can download it from their website here: <a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://phantom.app/download">https://phantom.app/download</a>. They have browser extensions for Chrome, Brave, Firefox and Edge - so you’re probably covered! If you’d like to use a different wallet for any reason then feel free to, they’re all compatible.When Phantom first launches you’ll have the option to create a new wallet or import an existing one:<image src="https://gcyrkvfwpvlwjrrklxnh.supabase.co/storage/v1/object/public/tutorials/0a5b42c1-c0c1-4e7e-98dc-e54ad04fabe3/tutorial_NkbsjFlyOCxCC8_pDcSCS"></image>Click “Create a new wallet” unless you’ve used Solana before. Quick heads up on terminology, a wallet that you create here is also an “Account”. We’ll get into the account model of Solana later, but you might see that term as you look around.You’ll be asked to create a password, this is for the Phantom extension only.You’ll then be presented with your Secret Recovery Phrase. If you’ve used any blockchain before then you’ll be familiar with this! Your Secret Recovery Phrase will be 12 random words. This can be used to access all wallets you create in Phantom, for example to import them into another wallet. Make sure to never share this with anyone, they’ll be able to access all your wallets. Save it somewhere, you’ll need it when you want to import your wallets elsewhere!Once you’re done with the setup you’ll be able to see your wallet in Phantom:<image src="https://gcyrkvfwpvlwjrrklxnh.supabase.co/storage/v1/object/public/tutorials/0a5b42c1-c0c1-4e7e-98dc-e54ad04fabe3/tutorial_wgepRg6lqNRfbsieq-VZv"></image>Before we do anything else let’s switch to Devnet. On devnet all the tokens are fake and have no real world value, so it’s great for learning! We can also send ourselves Solana for free which is handy!In Phantom, go to Settings (gear icon in the bottom right), choose “Change Network” and select “Devnet”.<h3>Get some devnet SOL</h3>Okay so that “0 SOL” thing is pretty boring, let’s get some Solana to play with! Head to <a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://solfaucet.com/">https://solfaucet.com/</a> and put in your address. In Phantom your address is shown truncated at the top and you can click to copy the whole thing:<image src="https://gcyrkvfwpvlwjrrklxnh.supabase.co/storage/v1/object/public/tutorials/0a5b42c1-c0c1-4e7e-98dc-e54ad04fabe3/tutorial_OSYQVXC2cckuXsX2WExi6"></image>Paste your address in solfaucet and click Devnet:<image src="https://gcyrkvfwpvlwjrrklxnh.supabase.co/storage/v1/object/public/tutorials/0a5b42c1-c0c1-4e7e-98dc-e54ad04fabe3/tutorial_kYM8bo2BXOpI5RjeOzJ-I"></image>BTW the current limit for each airdrop is 2 SOL. That should be more than enough for this tutorial :) You’ll notice that you pretty much immediately get a success message:<image src="https://gcyrkvfwpvlwjrrklxnh.supabase.co/storage/v1/object/public/tutorials/0a5b42c1-c0c1-4e7e-98dc-e54ad04fabe3/tutorial_5BEpWfhO5MtziCDel_ocT"></image>Did I mention that Solana is fast? 🚀Check Phantom and you’ll see your balance is now 1 SOL! Nice!<h3>Adding a second wallet (account)</h3>When we’re dealing with payments we need two accounts: one for the buyer and one for the seller. The buyer pays the seller! So far we’ve made one account and given it some SOL which it can use to buy stuff. Let’s make our seller account next.In Phantom you can open the menu from the top left and add a new wallet:<image src="https://gcyrkvfwpvlwjrrklxnh.supabase.co/storage/v1/object/public/tutorials/0a5b42c1-c0c1-4e7e-98dc-e54ad04fabe3/tutorial_ZwWpUwYf7XSAlTW5FUBAz"></image>Note that you won’t be asked to give a password or shown a Secret Recovery Phrase. Remember that the password is for the Phantom extension (it unlocks all wallets), and the Secret Recovery Phrase is for all wallets too!One last thing, in Phantom (and most wallet apps) you can name your wallets to make them easier to identify. This is under Settings:<image src="https://gcyrkvfwpvlwjrrklxnh.supabase.co/storage/v1/object/public/tutorials/0a5b42c1-c0c1-4e7e-98dc-e54ad04fabe3/tutorial_b-4nwBRs2fbukEeDHTl4y"></image>I recommend naming the first wallet (the one with SOL) “Buyer” and the second one “Shop”. Note that these names are just for you, they won’t be reflected on the blockchain at all. But they’ll make using Phantom a lot nicer!<h3>Grab the starter code</h3>That was a lot of setup, but now we’ve got your Solana wallets set up, we’ve got SOL in the buyer wallet and we’re ready to use it to buy stuff. Let’s start building our app!You can download the starter code:<pre filepath=""><code class="language-shell">$ git clone -b start https://github.com/pointer-gg/solana-pay-tutorial</code></pre>This is a NextJS app. You can run it with npm:<pre filepath=""><code class="language-shell"># install dependencies
$ npm install
# run the app locally
$ npm run dev</code></pre>By default it’ll run on <a target="_blank" rel="noopener noreferrer nofollow" class="link" href="http://localhost:3000">localhost:3000</a>. When it’s running, open it in your browser and you should see something like:<image src="https://gcyrkvfwpvlwjrrklxnh.supabase.co/storage/v1/object/public/tutorials/0a5b42c1-c0c1-4e7e-98dc-e54ad04fabe3/tutorial_C_OrQyWfDod1yS4ZahcMB"></image>The starter code gives you a simple ecommerce interface, where we can select some products and make an order! Although that checkout page is looking a bit bare right now.<h3>Customize it</h3>The products displayed are in <code class="inline-code">lib/products.ts</code>, feel free to change them if you’d like to sell something other than cookies!<pre filepath="lib/products.ts"><code class="language-typescript">export const products = [
 {
 id: 'box-of-cookies',
 name: 'Box',
 description: 'A delicious box of handmade cookies',
 unitName: 'box', // shows after the price, eg. 0.05 SOL/box
 priceSol: 0.05,
 priceUsd: 5,
 },
 {
 id: 'basket-of-cookies',
 name: 'Basket',
 description: 'A large basket of handmade cookies',
 unitName: 'basket',
 priceSol: 0.1,
 priceUsd: 10,
 }
]</code></pre>If you’re not a fan of the colours, fonts, whatever - it’s your app! Feel free to change whatever you like :)When you’re happy with the starting code, go on to the next lesson and we’ll start building together!

Setup

Allow connecting a Solana wallet to our website and using it to purchase cookies online!

Our first sale

We can’t exchange literal US dollars on the Solana blockchain. But Solana does have a program that handles exchanging arbitrary tokens, in addition to SOL. You might have heard of these tokens before (they’re sometimes called altcoins or fungible tokens). In Solana, they’re called SPL tokens, SPL stands for Solana Program Library. We can hold these tokens in our wallets and pay/receive them in Solana transactions.Some of these tokens are designed to have a fixed value in fiat currency, most often $1. This works because someone guarantees to always buy and sell them for exactly $1, usually by holding an equivalent number of dollars as there are tokens. This means that we can perform payments on the blockchain with tokens that are guaranteed to be worth exactly $1. These tokens are sometimes called stablecoins.A popular stablecoin is <a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://www.circle.com/en/usdc">USDC</a>, which is available on many blockchains including Solana. But since we’re on Solana devnet we need to use a token that’s available there, which we’re going to call USDC-Dev.<h3>Getting some USDC-Dev</h3>We’re going to use a token faucet: <a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://spl-token-faucet.com/?token-name=USDC-Dev">https://spl-token-faucet.com/?token-name=USDC-Dev</a>You’ll see a button to connect your wallet using your browser wallet, make sure you connect the buyer account.From here you’ll be able to airdrop yourself some of the token:<image src="https://gcyrkvfwpvlwjrrklxnh.supabase.co/storage/v1/object/public/tutorials/0a5b42c1-c0c1-4e7e-98dc-e54ad04fabe3/tutorial_6JC7oM39weD-jbq-VA83w"></image>$1000 should be enough for our testing, but you can increase that amount if you need to!Now click the “Get USDC-Dev” and your browser wallet should show a transaction:<image src="https://gcyrkvfwpvlwjrrklxnh.supabase.co/storage/v1/object/public/tutorials/0a5b42c1-c0c1-4e7e-98dc-e54ad04fabe3/tutorial_SE1BtflBAENzQw2COTw6O"></image>This should be familiar, it’s the same UI our app uses for transactions. All Solana transactions are sent to the connected wallet, which displays them in a consistent way.<ul><li>We’re paying a small amount of SOL (shown in red), which is covering the cost of creating a USDC account for us. We'll get into more detail about these accounts later, so don't worry about it for now. Note that if you request USDC twice for the same address then you won't pay this again! If you need more SOL you can get more on the same page or from the faucet we used before.</li><li>We’re receiving 1000 USDC-Dev. That’s what the Gh9Zw... token is. Your wallet might show it as USDC-Dev or using the USDC logo. They’re a bit inconsistent about whether or not they display the metadata on devnet, and in this case, my wallet isn’t showing it.</li><li>The network fee is tiny, just like the transaction on our app are! Solana transaction fees are always tiny 🔥</li></ul>Once you approve that transaction it should complete within a second or so, and then you should see the new token in your wallet:<image src="https://gcyrkvfwpvlwjrrklxnh.supabase.co/storage/v1/object/public/tutorials/0a5b42c1-c0c1-4e7e-98dc-e54ad04fabe3/tutorial_SJYsHdaBH4woAj4Ym_xxu"></image>That screenshot is from the iOS Phantom app which does display metadata for devnet tokens. But again your wallet might vary a bit in how it shows this token. In particular, Phantom's browser wallet might show it as Unknown token.As long as it’s showing the token you’re good to go though!Before continuing, make sure you use your wallet or the same faucet to send some USDC to your shop account too. For now, we need the shop account to have some USDC before transferring it in our own code. Later on, we'll see how to avoid needing to do this :)<h3>Updating our UI</h3>Now that our buyer has some USDC-Dev, let’s update our app so that they can use it to buy our cookies!We’ve actually already got prices in USD in <code class="inline-code">lib/products.ts</code> :<pre filepath="lib/products.ts" data-line-highlights="[7]"><code class="language-typescript">{
 id: 'box-of-cookies',
 name: 'Box',
 description: 'A delicious box of handmade cookies',
 unitName: 'box', // shows after the price, eg. 0.05 SOL/box
 priceSol: 0.05,
 priceUsd: 5,
},
</code></pre>So we just need to update our app to use those prices instead of the SOL ones.First is the home page where we display the products with their pricing. This is in the <code class="inline-code">components/Products.tsx</code> component. We just need to change the price line in the loop that displays each product there.See if you can find where that line is and update it yourself. Here’s how we want the page to look:<image src="https://gcyrkvfwpvlwjrrklxnh.supabase.co/storage/v1/object/public/tutorials/0a5b42c1-c0c1-4e7e-98dc-e54ad04fabe3/tutorial_XkeD0C8bpQo4xQh1LnVfG"></image><details class="details"><summary>View the solution</summary><div data-type="detailsContent"><pre filepath="components/Products.tsx" data-line-highlights="[]"><code class="language-tsx">&lt;div className="grid grid-cols-2 gap-8"&gt;
 {products.map(product =&gt; {
 return (
 &lt;div className="rounded-md bg-white text-left p-8" key={product.id}&gt;
 &lt;h3 className="text-2xl font-bold"&gt;{product.name}&lt;/h3&gt;
 &lt;p className="text-sm text-gray-800"&gt;{product.description}&lt;/p&gt;
 &lt;p className="my-4"&gt;
 {/* We updated the next line */}
 &lt;span className="mt-4 text-xl font-bold"&gt;${product.priceUsd}&lt;/span&gt;
 {product.unitName &amp;&amp; &lt;span className="text-sm text-gray-800"&gt; /{product.unitName}&lt;/span&gt;}
 &lt;/p&gt;
 &lt;div className="mt-1"&gt;
 &lt;NumberInput name={product.id} formRef={formRef} /&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 )
 })}
&lt;/div&gt;</code></pre></div></details>Nice! We’re displaying our cookie prices in dollars on our store. Next we need to update our API to create a transaction priced in USDC instead of SOL.<h3>Updating our API</h3>Our API uses the function <code class="inline-code">calculatePrice</code> in <code class="inline-code">lib/calculatePrice.ts</code> to get the total price of the cookies being bought. We need to update that to use the <code class="inline-code">priceUsd</code> field:<pre filepath="lib/calculatePrice.ts" data-line-highlights="[7]"><code class="language-typescript">export default function calculatePrice(query: ParsedUrlQuery): BigNumber {
 let amount = new BigNumber(0);
 for (let [id, quantity] of Object.entries(query)) {
 const product = products.find(p =&gt; p.id === id)
 if (!product) continue;

 const price = product.priceUsd // we just updated this from priceSol
 const productQuantity = new BigNumber(quantity as string)
 amount = amount.plus(productQuantity.multipliedBy(price))
 }

 return amount
}</code></pre>Next we need to get the USDC address, which we’ll use to make a transaction that transfers USDC from the buyer to the shop.Go to <code class="inline-code">lib/addresses.ts</code> and add our new address:<pre filepath="lib/addresses.ts" data-line-highlights="[]"><code class="language-typescript">import { PublicKey } from "@solana/web3.js"

// this is your shop wallet address
export const shopAddress = new PublicKey('...')
// this is the same for everyone!
export const usdcAddress = new PublicKey('Gh9ZwEmdLJ8DscKNTkTqPbNwLNNBjuSzaG9Vp2KGtKJr')</code></pre>If you’re interested here’s a quick explanation of how we know that token address:<details class="details"><summary>Expand to view explanation</summary><div data-type="detailsContent">In your browser wallet, if you click on the GH9Z... token then it’ll show your balance of that token. Once again, this might look different in different wallets!There should be an option from here to view the token on Solscan:<image src="https://gcyrkvfwpvlwjrrklxnh.supabase.co/storage/v1/object/public/tutorials/0a5b42c1-c0c1-4e7e-98dc-e54ad04fabe3/tutorial_seANxoCiUU0FdN_eJpxyu"></image>This will open up a page on <a target="_blank" rel="noopener noreferrer nofollow" class="link" href="http://solscan.io">solscan.io</a> that shows all the details about this token account:<image src="https://gcyrkvfwpvlwjrrklxnh.supabase.co/storage/v1/object/public/tutorials/0a5b42c1-c0c1-4e7e-98dc-e54ad04fabe3/tutorial_maCerofClJlRhK-zThOr5"></image>Notice the 1,000 balance and the fact that the Owner is your buyer public key. But if you look at the address here it’s <code class="inline-code">GACny6HR6NGMbF4usZfbaLryfVfxVBtVXEb7WvLFAm5K</code>, not the <code class="inline-code">GH9Z...</code> we clicked on. We’re going to get into token accounts in more detail later, but this address is the USDC-Dev address for a specific user, the owner.Under “Overview” you’ll see “SPL Token Address”, and this should be the recognizable <code class="inline-code">GH9Z...</code> address. If you click that you should get a page that looks something like:<image src="https://gcyrkvfwpvlwjrrklxnh.supabase.co/storage/v1/object/public/tutorials/0a5b42c1-c0c1-4e7e-98dc-e54ad04fabe3/tutorial_BSCon8YAOWUcqO-xjiusO"></image>Notice that the heading here is “Token” instead of “Token Account”. This is the address of the USDC-Dev token! And this is where I copied the <code class="inline-code">GH9Zw...</code> address from into <code class="inline-code">lib/addresses.ts</code>.</div></details>Now we can update our API to send the transaction in USDC instead of SOL using that address. We’ll use a new dependency, which provides functionality for SPL tokens:<pre filepath="" data-line-highlights="[]"><code class="language-shell">npm install @solana/spl-token</code></pre>Here’s the updated code for <code class="inline-code">pages/api/makeTransaction.ts</code>, I’ll talk through the changes below:<pre filepath="pages/api/makeTransaction.ts" data-line-highlights="[]"><code class="language-typescript">import { createTransferCheckedInstruction, getAssociatedTokenAddress, getMint } from "@solana/spl-token"
import { WalletAdapterNetwork } from "@solana/wallet-adapter-base"
import { clusterApiUrl, Connection, PublicKey, Transaction } from "@solana/web3.js"
import { NextApiRequest, NextApiResponse } from "next"
import { shopAddress, usdcAddress } from "../../lib/addresses"
import calculatePrice from "../../lib/calculatePrice"

export type MakeTransactionInputData = {
 account: string,
}

export type MakeTransactionOutputData = {
 transaction: string,
 message: string,
}

type ErrorOutput = {
 error: string
}

export default async function handler(
 req: NextApiRequest,
 res: NextApiResponse&lt;MakeTransactionOutputData | ErrorOutput&gt;
) {
 try {
 // We pass the selected items in the query, calculate the expected cost
 const amount = calculatePrice(req.query)
 if (amount.toNumber() === 0) {
 res.status(400).json({ error: "Can't checkout with charge of 0" })
 return
 }

 // We pass the reference to use in the query
 const { reference } = req.query
 if (!reference) {
 res.status(400).json({ error: "No reference provided" })
 return
 }

 // We pass the buyer's public key in JSON body
 const { account } = req.body as MakeTransactionInputData
 if (!account) {
 res.status(400).json({ error: "No account provided" })
 return
 }
 const buyerPublicKey = new PublicKey(account)
 const shopPublicKey = shopAddress

 const network = WalletAdapterNetwork.Devnet
 const endpoint = clusterApiUrl(network)
 const connection = new Connection(endpoint)

 // Get details about the USDC token
 const usdcMint = await getMint(connection, usdcAddress)
 // Get the buyer's USDC token account address
 const buyerUsdcAddress = await getAssociatedTokenAddress(usdcAddress, buyerPublicKey)
 // Get the shop's USDC token account address
 const shopUsdcAddress = await getAssociatedTokenAddress(usdcAddress, shopPublicKey)

 // Get a recent blockhash to include in the transaction
 const { blockhash } = await (connection.getLatestBlockhash('finalized'))

 const transaction = new Transaction({
 recentBlockhash: blockhash,
 // The buyer pays the transaction fee
 feePayer: buyerPublicKey,
 })

 // Create the instruction to send USDC from the buyer to the shop
 const transferInstruction = createTransferCheckedInstruction(
 buyerUsdcAddress, // source
 usdcAddress, // mint (token address)
 shopUsdcAddress, // destination
 buyerPublicKey, // owner of source address
 amount.toNumber() * (10 ** (await usdcMint).decimals), // amount to transfer (in units of the USDC token)
 usdcMint.decimals, // decimals of the USDC token
 )

 // Add the reference to the instruction as a key
 // This will mean this transaction is returned when we query for the reference
 transferInstruction.keys.push({
 pubkey: new PublicKey(reference),
 isSigner: false,
 isWritable: false,
 })

 // Add the instruction to the transaction
 transaction.add(transferInstruction)

 // Serialize the transaction and convert to base64 to return it
 const serializedTransaction = transaction.serialize({
 // We will need the buyer to sign this transaction after it's returned to them
 requireAllSignatures: false
 })
 const base64 = serializedTransaction.toString('base64')

 // Insert into database: reference, amount

 // Return the serialized transaction
 res.status(200).json({
 transaction: base64,
 message: "Thanks for your order! 🍪",
 })
 } catch (err) {
 console.error(err);

 res.status(500).json({ error: 'error creating transaction', })
 return
 }
}</code></pre>We have these new variables:<pre filepath="pages/api/makeTransaction.ts" data-line-highlights="[]"><code class="language-typescript">// Get details about the USDC token
const usdcMint = await getMint(connection, usdcAddress)
// Get the buyer's USDC token account address
const buyerUsdcAddress = await getAssociatedTokenAddress(usdcAddress, buyerPublicKey)
// Get the shop's USDC token account address
const shopUsdcAddress = await getAssociatedTokenAddress(usdcAddress, shopPublicKey)</code></pre>The first line gets the metadata about the USDC token.The second and third lines are getting the associated token accounts for the buyer and the shop. When we transfer an SPL token (like USDC) we don’t do it between the buyer and shop public keys, like we did with SOL. This might be a bit different if you’ve used other blockchains, where the contract will often map data directly to the address. In Solana the contract itself (in this case the token program, which allows exchanging tokens like USDC) is stateless, and it generates accounts that hold the data. So when we call <code class="inline-code">getAssociatedTokenAddress(usdcAddress, buyerPublicKey)</code> we’re getting the address of the buyer’s USDC account.We’ve also updated the transaction instruction:<pre filepath="pages/api/makeTransaction.ts" data-line-highlights="[]"><code class="language-typescript">// Create the instruction to send USDC from the buyer to the shop
const transferInstruction = createTransferCheckedInstruction(
 buyerUsdcAddress, // source
 usdcAddress, // mint (token address)
 shopUsdcAddress, // destination
 buyerPublicKey, // owner of source address
 amount.toNumber() * (10 ** (await usdcMint).decimals), // amount to transfer (in units of the USDC token)
 usdcMint.decimals, // decimals of the USDC token
)</code></pre>There’s a bit more here than the SOL transfer instruction that we saw before. I’ve put comments by each argument, so hopefully you can see what each of them represent. Note that <code class="inline-code">buyerPublicKey</code> will be the signer key, because we need their authority to transfer USDC from their USDC account.The amount is slightly different too. Instead of using lamports (the smallest unit for SOL) like before, we need to use the units for the token. Tokens can have any number of decimals, so the safest way to do this is to multiply by <code class="inline-code">(10 ** decimals)</code>. We get the number of decimals from the mint metadata that we fetched.And that’s all we need to change to transfer USDC in a transaction! Everything else can stay the same, which shows the power of this transaction/instruction abstraction that Solana provides. We can update the instructions without changing anything else about the transaction.And now if you checkout you should see a transaction in USDC:<image src="https://gcyrkvfwpvlwjrrklxnh.supabase.co/storage/v1/object/public/tutorials/0a5b42c1-c0c1-4e7e-98dc-e54ad04fabe3/tutorial_uxKluUcp9ClWehVAElbK4"></image>Again note that wallets will differ a bit in how they display the metadata here.Once approved you’ll see our familiar confirmed page! We’ve updated our app to use USDC! 🎉In the next lesson we’re going to jump into Solana Pay properly and see how we can take payments IRL without users having to connect their own wallet to our app to pay!

Charging Dollars

Solana Pay

Update our app to use Solana Pay transaction requests!

Transaction Requests

Introduce an on-chain loyalty coupon and use it to automatically give a discount

Loyalty Scheme

We’ve covered a lot of ground in this tutorial, and I hope you’re hyped about Solana after this whirlwind tour! Its speed really is a game-changer, and Solana Pay is a super exciting example of what it enables.If you’d like to deploy your store to share it, <a target="_blank" rel="noopener noreferrer nofollow" class="link link link" href="https://vercel.com/">Vercel</a> is probably the easiest option! If you prefer deploying your NextJS apps somewhere else then feel free to! There aren’t any limitations on where you can deploy this. The only thing to note is that you’ll need to set the <code class="inline-code">SHOP_PRIVATE_KEY</code> environment variable.Next steps Take what you learned and go build something on your own! Remix this project or build a fresh idea. Looking for work opportunities on Solana? Here are a few good places to get started: <a target="_blank" rel="noopener noreferrer nofollow" class="link link link link" href="https://superteam.fun/find-work-in-web3">SuperteamDAO</a> - A community that helps Solana projects launch and grow in ascending markets. This is a link to their talent network :) Make sure you say we sent you! <a target="_blank" rel="noopener noreferrer nofollow" class="link link link link" href="https://jobs.solana.com/jobs">Solana Job Board </a>- Official Solana Jobs board Until next time ✌️