Terminarás con un componente de React que muestra un código QR de Solana Pay para un pago en USDC, espera a que el pago llegue y comprueba que coincide con lo que solicitaste. Necesitas Node.js 20+, una aplicación React o Next.js (un
create-next-app nuevo está bien) y una billetera móvil configurada en devnet. Fondéala con
USDC de devnet desde faucet.circle.com y SOL de devnet
desde faucet.solana.com para cubrir las comisiones de transacción.
@solana/pay está actualmente en beta. Las APIs pueden cambiar antes del lanzamiento estable.
1. Instalar Solana Pay
pnpm add @solana/pay@beta @solana/kit
2. Agregar el código QR de pago
El componente crea una referencia única para el pedido, la codifica en una URL de
solicitud de transferencia y
muestra la URL como un código QR. Luego busca una transacción que incluya
la referencia y valida el destinatario, el monto y el token antes de marcar el
pedido como pagado. Establece MERCHANT_WALLET con una dirección que controles:
"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 está en unidades del token, así que 1 solicita 1 USDC. Omite splToken para
solicitar SOL en su lugar.
3. Realizar un pago
Ejecuta tu aplicación, escanea el código QR con tu billetera y aprueba el pago. Una vez que la transacción se confirme y pase la validación, el componente muestra la firma de la transacción. Esa firma es tu recibo: búscala con getTransaction o en cualquier explorador.
La validación en el navegador está bien para una demo. Antes de cumplir pedidos reales, valida los pagos en tu servidor. Consulta verificar pagos.
Próximos pasos
- Solana Pay: solicitudes de transferencia, solicitudes de transacción y opciones de código QR
- Cómo funcionan los pagos en Solana - billeteras, stablecoins, token accounts y comisiones
- Verificar pagos - confirma un pago del lado del servidor antes de completar un pedido
- Enviar pagos - pagos y transferencias desde tu propio backend
- Preparación para producción - antes de que se mueva dinero real
Is this page helpful?