Solana Pay: всё, что нужно знать

Solana Pay: как это работает

Solana Pay предлагает пользователям другой способ взаимодействия со смарт-контрактами и перевода токенов. Вместо подключения кошелька они могут просмотреть и подписать транзакцию по ссылке. Это устраняет необходимость подключать кошелек для взаимодействия. Такой подход подходит как для простых платежей, так и для взаимодействия с приложениями, поэтому поддерживает запросы транзакций и запросы переводов.

Основная функция Solana Pay — Transfer Request, неинтерактивный запрос на перевод SOL или SPL-токенов. Важно отметить, что не все кошельки Solana поддерживают этот формат, однако большинство популярных кошельков его принимают (Phantom, Solflare и Glow). Вот как выглядит URL запроса на перевод Solana Pay:

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

Параметры URL используются кошельком для непосредственного формирования транзакции. В этом руководстве мы сосредоточимся на запросах переводов, но важно отметить, что практически любую транзакцию Solana можно преобразовать в корректный URL Solana Pay.

Параметры

Теперь разберем каждый параметр:

Получатель:

Это публичный ключ человека, которому вы отправляете SOL. При переводе SPL-токенов укажите тип токена в поле spl-token. Кошелек использует эту информацию, чтобы определить фактический аккаунт для перевода.

Сумма

Количество отправляемых SOL или токенов. Если оно меньше 1, перед десятичным разделителем должен стоять 0. Если сумма не указана, кошелек предложит ввести ее. При переводе SOL сумма указывается в SOL, а не в лампортах.

SPL-токен

Это необязательное поле содержит адрес минта для определенного типа аккаунта SPL-токена. Если его не указать, транзакция будет обычным переводом SOL.

Идентификатор

Уникальный идентификатор, закодированный в транзакции. Он помогает находить конкретные транзакции и проверять их результаты.

Метка

Краткое описание источника запроса на перевод. Это может быть магазин или приложение. Кошельки показывают его пользователю, чтобы предоставить информацию о транзакции.

Сообщение

Закодированный URL с информацией о причине перевода. Он может содержать сведения о покупке, идентификатор заказа или простую заметку. Кошельки также используют его, чтобы предоставить пользователю дополнительный контекст.

Примечание

Примечание, включенное в платежную транзакцию. Не добавляйте в него конфиденциальную или чувствительную информацию, поскольку оно хранится в блокчейне.

Эти данные дают полный контроль над транзакцией и упрощают взаимодействие между кошельком и получателем. В целях безопасности приложения должны обрабатывать транзакцию только после ее подтверждения в блокчейне.

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

Что мы создадим? К концу этого руководства у вас будет веб-приложение, которое создает QR-код Solana Pay на основе введенных пользователем данных — адреса кошелька и суммы SOL. Приложение также будет показывать статус платежа, проверяя статус транзакции в блокчейне.

Предварительные требования

• На вашем компьютере должен быть установлен Node.js
• Необходимо хорошо понимать React и TypeScript.
• Для отправки и получения средств потребуется кошелек Solana.
• Для работы с блокчейном также потребуется ключ Helius API. Ключ Helius API можно бесплатно получить с помощью кошелька на нашем портале разработчика.

Шаги

Выполните следующие шаги, чтобы использовать Solana Pay с Next.js.

Создайте приложение 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» для создания QR-кодов из ссылок на транзакции.

Чтобы установить эти пакеты, выполните команду:

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

Создайте фронтенд

Создайте фронтенд, который будет отображать QR-код 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>
  );
}

2. Добавьте импорты в верхнюю часть страницы.

// 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";

3. Создайте переменную для хранения URL Helius RPC. Если вы планируете развернуть это приложение, используйте файл ENV или прокси-сервер, чтобы скрыть ключ API.

// get a free Helius RPC at helius.dev
 const RPC="https://rpc.helius.xyz/?api-key="!

4. Создайте объект Solana Connection с URL Helius RPC:

console.log('Connecting to the Solana network\n');
const connection = new Connection(RPC, 'confirmed');

5. Затем объявим и инициализируем переменные, которые будем использовать. Сюда входят все переменные, необходимые для URL Solana Pay. Их можно создать внутри функции 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('');

6. Теперь нужно написать функцию для создания платежа. Она возьмет переменные из полей ввода и создаст закодированный URL Solana Pay с помощью метода encodedURL. Затем мы преобразуем объект URL в строку и сохраним ее, чтобы позднее отобразить QR-код. Добавьте следующий код под переменными:

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();
  }

7. После создания платежа мы покажем пользователю QR-код. Пользователь сможет отсканировать его и выполнить транзакцию. Чтобы проверить, была ли транзакция выполнена и завершилась ли она успешно, нужно создать функцию для проверки платежной транзакции в блокчейне. В приведенной выше функции 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;
  }

8. Последний шаг — добавить TSX для настройки пользовательского интерфейса. Для оформления элементов мы будем использовать Tailwind. Интерфейс будет включать заголовок, два поля ввода для адреса получателя и суммы SOL, кнопку и QR-код Solana Pay. После подтверждения платежа QR-код 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.

• Готовый код для файла index.tsx
• Подробнее о Solana Pay
• Документация Solana Pay

‍

‍

‍