新消息：Helius 收购 Light Protocol
Solana Pay 指南
博客/开发

Solana Pay：你需要了解的一切

开发者体验工程师X 上的 Owen VenterLinkedIn 上的 Owen Venter
阅读需 8 分钟
目录

Solana Pay 构建于 Solana 区块链之上，是一种简化 URL 内交易的通用语言。它支持即时交易，费用仅为一美分的零头，为支付提供了更顺畅的新方式，并改善了用户体验。

你可以将这些 URL 视为特殊的网址。它们可以转换成二维码或 NFC 标签，也可以在需要付款或设置交易时，在用户和应用之间共享。这样能让使用 Solana 交易的整个流程更加顺畅、安全。

Solana Pay：工作原理

Solana Pay 为用户与智能合约交互和转移代币提供了另一种方式。用户无需连接钱包，只需通过链接即可查看并签署交易。这消除了必须连接钱包才能交互的障碍。它既适用于简单支付，也适用于和应用交互，因此能够处理交易请求和转账请求。

Solana Pay 的主要功能是转账请求（Transfer Request），即一种无需交互的 SOL 或 SPL 代币转账请求。需要注意的是，并非所有 Solana 钱包都接受这种格式，但大多数主流钱包都支持，包括 Phantom、Solflare 和 Glow。Solana Pay 转账请求 URL 如下所示：

代码
solana:<recipient>?amount=<amount>&spl-token=<spl-token>&reference=<reference>&label=<label>&message=<message>&memo=<memo>

钱包使用 URL 中的参数直接构建交易。本指南将重点介绍转账请求，但需要注意的是，几乎所有 Solana 交易都可以转换为有效的 Solana Pay URL。

参数

下面逐一介绍各个参数：

接收方：

这是 SOL 接收方的公钥。对于 SPL 代币转账，需要在 spl-token 字段中指定代币类型。钱包会使用这些信息确定实际的转账账户。

金额

你要发送的 SOL 或代币数量。如果数量小于 1，小数点前应加上 0。如果没有指定金额，钱包会要求你输入。转账 SOL 时，此金额以 SOL 为单位，而不是 lamports。

SPL 代币

这个可选字段表示某种 SPL 代币账户的铸币地址。如果不包含此字段，该交易将只是普通的 SOL 转账。

引用标识

编码在交易中的唯一标识符，用于查找特定交易并验证交易结果。

标签

用于简要说明转账请求的来源，例如商店或应用。钱包会向用户显示此信息，帮助其了解交易。

消息

一个经过编码的 URL，用于存储转账原因的详细信息。它可以包含你购买的商品、订单 ID 或简单备注。钱包也会使用它为用户提供更多背景信息。

备注

支付交易中附带的备注。由于它会存储在链上，因此不应包含任何隐私或敏感信息。

这些信息让你可以完全控制交易，使钱包与接收方之间的交互更加直接。为确保安全，应用应仅在交易已获得链上确认后进行处理。

Solana Pay：URL 示例

发送 0.5 SOL：

代码
solana:CckxW6C1CjsxYcXSiDbk7NYfPLhfqAm3kSB5LEZunnSE?amount=0.5&label=Amazon&message=Thanks%20for%20shopping%20at%20Amazon&memo=ID321

发送 5 USDC：

代码
solana:CckxW6C1CjsxYcXSiDbk7NYfPLhfqAm3kSB5LEZunnSE?amount=5&spl-token=EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v

Solana Pay：Next.js 实现

我们要构建什么？完成本教程后，你将拥有一个 Web 应用，可根据用户输入的数据（钱包地址和 SOL 金额）创建 Solana Pay 二维码。此应用还会检查区块链上的交易状态，并显示支付状态。

前置条件

  • 你的计算机上需要安装 Node.js
  • 熟悉 React 和 TypeScript。
  • 你需要一个 Solana 钱包来发送和接收资金。
  • 你还需要一个 Helius API 密钥来完成所有链上操作。只需一个钱包，即可通过我们的开发者门户免费获取 Helius API 密钥。

操作步骤

按照以下步骤，在 Next.js 中使用 Solana Pay。

创建 Next.js 应用

首先确保已安装 Node，然后创建 Next.js 应用。在终端中输入以下命令：

代码
npx create-next-app@latest sol-pay-app

‍随后系统会显示几个问题，你可以选择以下选项：

创建完成后，可使用以下命令进入该目录：

代码
cd sol-pay-app

进入目录后，可使用以下命令启动应用：

代码
npm run dev

前往 http://localhost:3000/ 即可查看你的应用。

安装软件包

此应用需要两个软件包：Solana web3.js 和 Solana Pay。我们还将使用名为“react-qr-code”的软件包，为交易链接生成二维码。

运行以下命令安装这些软件包：

代码
npm install @solana/pay @solana/web3.js bignumber.js react-qr-code --save

创建前端

创建一个前端，用于显示 Solana Pay 二维码，并允许编辑 SOL 接收地址和 SOL 金额。出于安全考虑，建议你在后端处理所有逻辑，尤其是金额和接收方的设置。

不过，为了简化流程，我们也会在前端处理应用逻辑。

  1. 前往 pages 目录并打开 index.tsx 文件。此文件代表你的主页。使用以下代码替换现有代码：
代码
export default function Home() {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
      <h1 className="mb-6 text-3xl font-bold text-orange-700">
        Helius Solana Pay Demo
      </h1>
    </div>
  );
}
  1. 在页面顶部添加 import。
代码
// imports
import {Cluster,clusterApiUrl,Connection,PublicKey,Keypair} from "@solana/web3.js";
import { encodeURL, createQR,findReference, FindReferenceError, validateTransfer } from "@solana/pay";
import BigNumber from "bignumber.js";
import { useState } from "react";
import QRCode from "react-qr-code";
  1. 创建一个变量来存储 Helius RPC URL。如果你计划部署此应用，应使用 ENV 文件或代理来隐藏 API 密钥。
代码
// get a free Helius RPC at helius.dev
 const RPC="https://rpc.helius.xyz/?api-key="!
  1. 使用 Helius RPC URL 创建 Solana Connection 对象：
代码
console.log('Connecting to the Solana network\n');
const connection = new Connection(RPC, 'confirmed');
  1. 接下来，声明并初始化要使用的变量，其中包括 Solana Pay URL 所需的所有变量。你可以在 Home() 函数中创建这些变量。
代码
// URL Variables
  const [address, setAddress] = useState("");
  const [recipient, setRecipient] = useState(
    new PublicKey("CckxW6C1CjsxYcXSiDbk7NYfPLhfqAm3kSB5LEZunnSE"));
  const [amount, setAmount] = useState(new BigNumber(1));
  const [message, setMessage] = useState("Helius Demo Order");
  const reference = new Keypair().publicKey;
  const label = "Helius Super Store";
  const memo = "Helius#4098";

  // for the QR code
  const [qrCodeValue, setQrCodeValue] = useState('');
  const [paymentStatus, setPaymentStatus] = useState('');
  1. 接下来，需要编写一个用于创建支付的函数。此函数将获取输入字段中的变量，并通过 encodedURL 方法创建编码后的 Solana Pay URL。完成后，我们会将 URL 对象转换为字符串并保存，稍后用它显示二维码。在变量下方添加以下代码：
代码
async function createPayment() {
    console.log("Creating a payment URL \n");
    setRecipient(new PublicKey(address));
    const url = encodeURL({
      recipient,
      amount,
      reference,
      label,
      message,
      memo,
    });

    setQrCodeValue(url.toString()); // convert URL object to string
    checkPayment();
  }
  1. 创建支付后，我们会向用户显示二维码。用户可以扫描二维码并执行交易。为了验证交易是否已发生并成功完成，需要创建一个函数来检查链上支付交易。在上面的 createPayment 函数中可以看到，我们会在创建交易后立即调用此函数。
代码
async function checkPayment() {
    // update payment status
    setPaymentStatus('pending');

		// search for transaction

		// validate transaction
}

此函数包含两个部分：搜索已确认的交易，以及验证交易。

由于用户会通过另一台设备与交易交互，因此无法确切知道交易何时发生。我们会改为重复检查是否已发生具有匹配引用标识的交易，以及该交易的状态。这通过 Solana Pay 的 findReference 方法完成。

代码
// search for transaction
console.log('Searching for the payment\n');
    let signatureInfo;
  
    const {signature} = await new Promise((resolve, reject) => {
      
        const interval = setInterval(async () => {
            console.count('Checking for transaction...'+reference);
            try {
                signatureInfo = await findReference(connection, reference, { finality: 'confirmed' });
                console.log('\n Signature: ', signatureInfo.signature,signatureInfo);
                clearInterval(interval);
                resolve(signatureInfo);
            } catch (error: any) {
                if (!(error instanceof FindReferenceError)) {
                    console.error(error);
                    clearInterval(interval);
                    reject(error);
                }
            }
        }, 250);
    });
	// Update payment status
  setPaymentStatus('confirmed');

找到交易后，需要确保交易中执行了正确的操作。

其中包括检查代币是否由正确的接收方收到，以及发送的代币数量是否正确。为此，我们将使用 Solana Pay 的 validateTransfer 方法：

代码
//validate transaction
    console.log('Validating the payment\n');
    try {
      await validateTransfer(connection, signature, { recipient: recipient, amount });

      // Update payment status
      setPaymentStatus('validated');
      console.log('Payment validated');
      return true;
      
  } catch (error) {
      console.error('Payment failed', error);
      return false;
  }
  1. 最后一步是添加 TSX 来构建 UI。我们将使用 Tailwind 设置元素样式。UI 将包含一个标题、两个分别用于输入接收方地址和 SOL 金额的字段、一个按钮和一个 Solana Pay 二维码。支付验证通过后，Solana Pay 二维码将替换为“支付验证成功”文本。该按钮会调用 createPayment 方法。
代码
//validate transaction
return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
      <h1 className="mb-6 text-3xl font-bold text-orange-700">
        Helius Solana Pay Demo
      </h1>
      <div className="w-full max-w-md p-6 mx-auto bg-white rounded-xl shadow-md">
        <div className="mb-4">
          <label className="block mb-2 text-sm font-medium text-gray-700">
            Address:
          </label>
          <input
            type="text"
            onChange={(e) => setAddress(e.target.value)}
            className="w-full px-3 py-2 text-sm leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
          />
        </div>
        <div className="mb-4">
          <label className="block mb-2 text-sm font-medium text-gray-700">
            Amount:
          </label>
          <input
            type="number"
            onChange={(e) => setAmount(new BigNumber(e.target.value))}
            className="w-full px-3 py-2 text-sm leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
          />
        </div>
        <div className="flex justify-center items-center">
        <button
          className="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700"
          onClick={createPayment}
        >
          Create QR Code
        </button>
        </div>
        
        <div>
        {paymentStatus === 'validated' ? <p className="mt-4 text-green-500 text-center">Payment Validated</p> : <div className="flex justify-center mt-4">
          {qrCodeValue && }
        </div>}
      </div>
      </div>
      
    </div>
  );

‍完成上述所有步骤后，你应该会得到一个外观和行为如下的应用：

Solana Pay：打造无缝体验

无论你是在付款还是设置交易，Solana Pay 的编码系统都能为用户和应用提供无缝体验。希望本指南能成为你理解和实现 Solana Pay 的完整工具，让你与 Solana 区块链的交互更加顺畅、高效。如需任何帮助，欢迎加入 Helius Discord 或通过 Twitter 联系我们。

‍

‍

‍

相关文章

订阅 Helius

及时了解 Solana 开发的最新动态，并在我们发布新内容时收到更新

放大图片