Solana Pay: Mọi điều bạn cần biết

Solana Pay: Cách hoạt động

Solana Pay mang đến một cách khác để người dùng tương tác với hợp đồng thông minh và chuyển token. Thay vì phải kết nối ví, họ có thể xem và ký giao dịch qua một liên kết. Điều này loại bỏ rào cản phải kết nối ví để tương tác. Cách này phù hợp cho cả thanh toán đơn giản lẫn tương tác với ứng dụng, do đó có thể xử lý cả yêu cầu giao dịch và yêu cầu chuyển tiền.

Tính năng chính của Solana Pay là Transfer Request, một yêu cầu không tương tác để chuyển SOL hoặc SPL Token. Cần lưu ý rằng không phải mọi ví Solana đều chấp nhận định dạng này, tuy nhiên phần lớn các ví phổ biến đều hỗ trợ (Phantom, Solflare và Glow). URL yêu cầu chuyển tiền của Solana Pay có dạng như sau:

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

Các tham số trong URL được ví sử dụng để trực tiếp tạo giao dịch. Trong hướng dẫn này, chúng ta sẽ tập trung vào Transfer Request, nhưng cần lưu ý rằng hầu hết mọi giao dịch Solana đều có thể được chuyển đổi thành URL Solana Pay hợp lệ.

Tham số

Bây giờ, hãy phân tích từng tham số:

Người nhận:

Đây là khóa công khai của người mà bạn gửi SOL đến. Khi chuyển SPL Token, hãy chỉ định loại token trong trường spl-token. Ví sử dụng thông tin này để xác định account thực tế cho giao dịch chuyển.

Số lượng

Số lượng SOL hoặc token bạn gửi. Nếu số lượng nhỏ hơn 1, cần thêm số 0 trước dấu thập phân. Nếu không có số lượng, ví sẽ yêu cầu bạn nhập. Khi chuyển SOL, số lượng này được tính bằng SOL chứ không phải lamport.

SPL Token

Trường không bắt buộc này đại diện cho địa chỉ mint của một loại account SPL Token nhất định. Nếu không thêm trường này, giao dịch sẽ chỉ là một giao dịch chuyển SOL thông thường.

Tham chiếu

Một mã định danh duy nhất được mã hóa trong giao dịch. Mã này giúp tìm các giao dịch cụ thể và xác minh kết quả giao dịch.

Nhãn

Mô tả ngắn về nguồn gửi yêu cầu chuyển tiền. Đó có thể là một cửa hàng hoặc ứng dụng. Ví hiển thị thông tin này để cung cấp cho người dùng thêm chi tiết về giao dịch.

Thông điệp

Một URL được mã hóa để lưu thông tin chi tiết về lý do thực hiện giao dịch chuyển. Thông tin này có thể bao gồm mặt hàng bạn mua, mã đơn hàng hoặc một ghi chú đơn giản. Ví cũng sử dụng thông tin này để cung cấp thêm ngữ cảnh cho người dùng.

Ghi chú

Một ghi chú được đưa vào giao dịch thanh toán. Không nên đưa bất kỳ thông tin riêng tư hoặc nhạy cảm nào vào đây vì dữ liệu này được lưu trữ trên chuỗi.

Những thông tin này cho phép bạn toàn quyền kiểm soát giao dịch, giúp quá trình tương tác giữa ví và người nhận trở nên đơn giản. Để đảm bảo an toàn, ứng dụng chỉ nên xử lý giao dịch sau khi giao dịch đã được xác nhận trên chuỗi.

Solana Pay: URL mẫu

Gửi 0,5 SOL:

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

Gửi 5 USDC:

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

Solana Pay: Triển khai với Next.js

Chúng ta sẽ xây dựng gì? Sau khi hoàn thành hướng dẫn này, bạn sẽ có một ứng dụng web tạo mã QR Solana Pay từ dữ liệu do người dùng nhập (địa chỉ ví và số lượng SOL). Ứng dụng cũng sẽ hiển thị trạng thái thanh toán bằng cách kiểm tra trạng thái giao dịch trên blockchain.

Điều kiện tiên quyết

• Bạn cần cài đặt Node.js trên máy
• Có kiến thức vững về React và TypeScript.
• Bạn cần một ví Solana để gửi và nhận tiền.
• Bạn cũng cần khóa Helius API cho mọi hoạt động trên chuỗi. Bạn có thể nhận khóa Helius API miễn phí chỉ với một ví trên cổng thông tin dành cho nhà phát triển của chúng tôi.

Các bước

Làm theo các bước sau để sử dụng Solana Pay với Next.js.

Tạo ứng dụng Next.js

Trước tiên, hãy đảm bảo Node đã được cài đặt, sau đó tạo ứng dụng Next.js. Nhập lệnh sau vào terminal:

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

‍Sau đó, bạn sẽ được hỏi một số câu hỏi. Bạn có thể chọn các tùy chọn sau:

Sau khi tạo xong, bạn có thể chuyển vào thư mục bằng lệnh:

cd sol-pay-app

Khi đã ở trong thư mục, bạn có thể khởi động ứng dụng bằng lệnh:

npm run dev

Truy cập http://localhost:3000/ để xem ứng dụng.

Cài đặt các gói

Ứng dụng này cần hai gói: Solana web3.js và Solana Pay. Chúng ta cũng sẽ sử dụng một gói có tên “react-qr-code” để tạo phiên bản mã QR của các liên kết giao dịch.

Để cài đặt các gói này, hãy chạy:

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

Tạo giao diện người dùng

Tạo giao diện người dùng để hiển thị mã QR Solana Pay và cho phép chỉnh sửa địa chỉ nhận SOL cùng số lượng SOL. Vì lý do an toàn, bạn nên thực hiện toàn bộ logic ở backend, đặc biệt là việc thiết lập số lượng và người nhận.

Tuy nhiên, để đơn giản hóa, chúng ta cũng sẽ thực hiện logic của ứng dụng ở giao diện người dùng.

1. Chuyển đến thư mục pages và mở tệp index.tsx. Tệp này đại diện cho trang chủ. Thay thế mã hiện có bằng đoạn mã sau:

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. Thêm các lệnh import vào đầu trang.

// 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. Tạo một biến để lưu URL Helius RPC. Nếu định triển khai ứng dụng này, bạn nên sử dụng tệp ENV hoặc proxy để ẩn khóa API.

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

4. Tạo một đối tượng Solana Connection bằng URL Helius RPC:

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

5. Tiếp theo, chúng ta sẽ khai báo và khởi tạo các biến cần sử dụng. Các biến này bao gồm mọi biến bắt buộc trong URL Solana Pay. Bạn có thể tạo chúng bên trong hàm 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. Tiếp theo, chúng ta cần viết một hàm để tạo thanh toán. Hàm này sẽ lấy các biến từ trường nhập liệu và tạo URL Solana Pay được mã hóa bằng phương thức encodedURL. Sau đó, chúng ta sẽ chuyển đối tượng URL thành chuỗi và lưu lại để dùng khi hiển thị mã QR. Thêm đoạn mã sau bên dưới các biến:

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. Sau khi khoản thanh toán được tạo, chúng ta sẽ hiển thị mã QR cho người dùng để họ quét mã và thực hiện giao dịch. Để xác minh giao dịch đã diễn ra và thành công hay chưa, chúng ta cần tạo một hàm kiểm tra giao dịch thanh toán trên chuỗi. Trong hàm createPayment ở trên, bạn có thể thấy hàm này được gọi ngay sau khi tạo giao dịch.

async function checkPayment() {
    // update payment status
    setPaymentStatus('pending');

		// search for transaction

		// validate transaction
}

Hàm này gồm hai phần: tìm kiếm giao dịch đã xác nhận và xác thực giao dịch.

Vì người dùng sẽ tương tác với giao dịch từ một thiết bị khác nên không có cách nào biết chính xác thời điểm giao dịch diễn ra. Thay vào đó, chúng ta sẽ liên tục kiểm tra xem giao dịch có tham chiếu trùng khớp đã diễn ra hay chưa và trạng thái của giao dịch là gì. Việc này được thực hiện bằng phương thức findReference của Solana Pay.

// 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');

Sau khi tìm thấy giao dịch, chúng ta cần đảm bảo các thao tác chính xác đã diễn ra trong giao dịch.

Việc này bao gồm kiểm tra xem đúng người nhận đã nhận được token hay chưa và số lượng token được gửi có chính xác không. Để làm điều đó, chúng ta sẽ sử dụng phương thức validateTransfer của Solana Pay:

//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. Bước cuối cùng là thêm TSX để thiết lập UI. Chúng ta sẽ dùng Tailwind để định kiểu các phần tử. UI sẽ bao gồm tiêu đề, hai trường nhập liệu cho địa chỉ người nhận và số lượng SOL, một nút và mã QR Solana Pay. Sau khi khoản thanh toán được xác thực, mã QR Solana Pay sẽ được thay thế bằng dòng chữ “Thanh toán đã được xác thực”. Nút này sẽ gọi phương thức 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>
  );

‍Sau khi hoàn thành tất cả các bước trên, bạn sẽ có một ứng dụng với giao diện và cách hoạt động như sau:

Solana Pay: Tạo trải nghiệm liền mạch

Dù đang thanh toán hay thiết lập giao dịch, hệ thống mã hóa của Solana Pay đều mang đến trải nghiệm liền mạch cho cả người dùng lẫn ứng dụng. Hy vọng hướng dẫn này sẽ là một tài liệu toàn diện giúp bạn hiểu và triển khai Solana Pay, đồng thời tương tác với blockchain Solana thuận tiện và hiệu quả hơn. Nếu cần hỗ trợ, hãy tham gia Helius Discord hoặc liên hệ qua Twitter.

• Xem mã nguồn hoàn chỉnh cần có trong tệp index.tsx
• Tìm hiểu thêm về Solana Pay
• Xem tài liệu về Solana Pay

‍

‍

‍