快速入门：接受付款

最终，您将获得一个 React 组件，该组件会显示用于 USDC 付款的 Solana Pay 二维码，等待付款到账，并检查其是否与您的请求一致。您需要 Node.js 20+、一个 React 或 Next.js 应用（全新的 create-next-app 即可），以及一个设置为 devnet 的移动钱包。请从 faucet.circle.com 获取 devnet USDC，并从 faucet.solana.com 获取 devnet SOL，用于支付交易费用。

@solana/pay 目前处于测试阶段。API 在稳定版本发布前可能会有所变动。

1. 安装 Solana Pay

pnpm add @solana/pay@beta @solana/kit

2. 添加付款二维码

该组件会为订单创建唯一的引用（reference），将其编码为转账请求 URL，并将该 URL 渲染为二维码。随后，它会监听包含该引用的交易，并在将订单标记为已支付之前验证收款方、金额和代币。请将 MERCHANT_WALLET 设置为您所控制的地址：

"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 以代币单位计，因此 1 表示请求 1 USDC。省略 splToken 则改为请求 SOL。

3. 收取付款

运行您的应用，使用钱包扫描二维码并批准付款。交易确认并通过验证后，组件会显示交易签名。该签名就是您的收据：可使用 getTransaction 或任意区块浏览器查询。

在浏览器中验证仅适用于演示。在履行真实订单之前，请在您的服务器上验证付款。请参阅验证付款。

下一步

Solana Pay - 转账请求、交易请求和二维码选项
Solana 上的支付原理 - 钱包、稳定币、token account 和手续费
验证付款 - 在履行订单前在服务端确认付款
发送付款 - 从您自己的后端进行打款和转账
生产就绪 - 在真实资金流转前的准备工作

快速入门：接受付款

1. 安装 Solana Pay

2. 添加付款二维码

3. 收取付款

下一步

Table of Contents