Otterrai un componente React che mostra un codice QR Solana Pay per un pagamento
in USDC, attende che il pagamento venga registrato e verifica che corrisponda a
quanto richiesto. Hai bisogno di Node.js 20+, un'app React o Next.js (un nuovo
create-next-app va benissimo) e un wallet mobile impostato su devnet. Caricalo
con USDC devnet da faucet.circle.com e con SOL
devnet da faucet.solana.com per coprire le commissioni di transazione.
@solana/pay è attualmente in beta. Le API potrebbero cambiare prima del rilascio stabile.
1. Installa Solana Pay
pnpm add @solana/pay@beta @solana/kit
2. Aggiungi il codice QR di pagamento
Il componente crea un riferimento univoco per l'ordine, lo codifica in un URL di
richiesta di trasferimento e
lo visualizza come codice QR. Poi resta in attesa di una transazione che includa
il riferimento e ne convalida destinatario, importo e token prima di contrassegnare
l'ordine come pagato. Imposta MERCHANT_WALLET su un indirizzo che controlli:
"use client";import { useEffect, useRef, useState } from "react";import {address,createSolanaRpc,createSolanaRpcSubscriptions,generateKeyPair,getAddressFromPublicKey} from "@solana/kit";import {createQR,encodeURL,validateTransfer,watchReference} from "@solana/pay";const MERCHANT_WALLET = address("your-wallet-address");const USDC_DEVNET = address("4zMMC9srt5Ri5X14GAgXhaHii3GnPAEERYPJgZJDncDU");const AMOUNT = 1;const rpc = createSolanaRpc("https://api.devnet.solana.com");const rpcSubscriptions = createSolanaRpcSubscriptions("wss://api.devnet.solana.com");export function Checkout() {const qrRef = useRef<HTMLDivElement>(null);const [signature, setSignature] = useState<string | null>(null);useEffect(() => {const abortController = new AbortController();async function startPayment() {const keyPair = await generateKeyPair();const reference = await getAddressFromPublicKey(keyPair.publicKey);const url = encodeURL({recipient: MERCHANT_WALLET,amount: AMOUNT,splToken: USDC_DEVNET,reference,label: "My Store",message: "Order #1001"});if (abortController.signal.aborted) return;if (qrRef.current) {qrRef.current.innerHTML = "";createQR(url, 300).append(qrRef.current);}const result = await watchReference(rpcSubscriptions, reference, {abortSignal: abortController.signal});if (result.err) throw new Error("Payment transaction failed");await validateTransfer(rpc, result.signature, {recipient: MERCHANT_WALLET,amount: AMOUNT,splToken: USDC_DEVNET,reference});setSignature(result.signature);}startPayment().catch((error) => {if (!abortController.signal.aborted) console.error(error);});return () => abortController.abort();}, []);if (signature) return <p>Payment confirmed: {signature}</p>;return <div ref={qrRef} />;}
amount è espresso in unità del token, quindi 1 richiede 1 USDC. Ometti splToken per
richiedere invece SOL.
3. Ricevi un pagamento
Avvia la tua app, scansiona il codice QR con il tuo wallet e approva il pagamento. Una volta confermata la transazione e superata la convalida, il componente mostra la firma della transazione. Quella firma è la tua ricevuta: cercala con getTransaction o in qualsiasi explorer.
La convalida nel browser va bene per una demo. Prima di evadere ordini reali, convalida i pagamenti sul tuo server. Consulta verifica dei pagamenti.
Dove andare dopo
- Solana Pay - richieste di trasferimento, richieste di transazione e opzioni per il codice QR
- Come funzionano i pagamenti su Solana - wallet, stablecoin, token account e commissioni
- Verifica i pagamenti - conferma un pagamento lato server prima di evadere un ordine
- Invia pagamenti - pagamenti e trasferimenti dal tuo backend
- Prontezza per la produzione - prima che vengano movimentati fondi reali
Is this page helpful?