Solana Pay: Semua yang Perlu Anda Ketahui

Solana Pay: Cara Kerjanya

Solana Pay menawarkan cara berbeda bagi pengguna untuk berinteraksi dengan smart contract dan mentransfer token. Pengguna tidak perlu menghubungkan wallet karena mereka dapat melihat dan menandatangani transaksi melalui tautan. Hal ini menghilangkan hambatan berupa keharusan menghubungkan wallet untuk berinteraksi. Solana Pay dapat digunakan untuk pembayaran sederhana maupun interaksi dengan aplikasi, sehingga mampu menangani permintaan transaksi dan permintaan transfer.

Fitur utama Solana Pay adalah Transfer Request, yaitu permintaan noninteraktif untuk mentransfer SOL atau SPL Token. Perlu diperhatikan bahwa tidak semua wallet Solana menerima format ini. Namun, sebagian besar wallet populer menerimanya (Phantom, Solflare, dan Glow). Berikut tampilan URL permintaan transfer Solana Pay:

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

Parameter dalam URL digunakan oleh wallet untuk menyusun transaksi secara langsung. Dalam panduan ini, kita akan berfokus pada Transfer Request. Namun, penting untuk diperhatikan bahwa hampir semua transaksi Solana dapat dikonversi menjadi URL Solana Pay yang valid.

Parameter

Sekarang, mari kita uraikan setiap parameternya:

Penerima:

Ini adalah public key milik orang yang Anda kirimi SOL. Untuk transfer SPL Token, tentukan jenis token dalam kolom spl-token. Wallet menggunakan informasi ini untuk menentukan account yang sebenarnya bagi transfer tersebut.

Jumlah

Jumlah SOL atau token yang Anda kirim. Jika nilainya kurang dari 1, harus ada angka 0 sebelum tanda desimal. Jika jumlahnya tidak dicantumkan, wallet akan meminta Anda memasukkannya. Jika Anda mentransfer SOL, jumlah ini dinyatakan dalam SOL, bukan lamport.

SPL Token

Kolom opsional ini menunjukkan alamat mint untuk jenis account SPL Token tertentu. Jika tidak dicantumkan, transaksi tersebut hanya akan menjadi transfer SOL biasa.

Referensi

Pengidentifikasi unik yang dikodekan dalam transaksi. Pengidentifikasi ini digunakan untuk membantu menemukan transaksi tertentu dan memverifikasi hasil transaksi.

Label

Deskripsi singkat mengenai asal permintaan transfer. Asalnya dapat berupa toko atau aplikasi. Wallet menampilkannya kepada pengguna untuk memberikan informasi tentang transaksi.

Pesan

URL terenkode yang menyimpan detail tentang alasan transfer dilakukan. Detail ini dapat mencakup barang yang Anda beli, ID pesanan, atau catatan singkat. Wallet juga menggunakannya untuk memberikan lebih banyak konteks kepada pengguna.

Memo

Catatan yang disertakan dalam transaksi pembayaran. Catatan ini tidak boleh memuat informasi pribadi atau sensitif karena disimpan secara on-chain.

Detail ini memberi Anda kendali penuh atas transaksi, sehingga interaksi antara wallet dan penerima menjadi mudah. Demi keamanan, aplikasi hanya boleh memproses transaksi setelah transaksi tersebut dikonfirmasi secara on-chain.

Solana Pay: Contoh URL

Mengirim 0,5 SOL:

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

Mengirim 5 USDC:

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

Solana Pay: Implementasi Next.js

Apa yang akan kita bangun? Di akhir tutorial ini, Anda akan memiliki aplikasi web yang membuat kode QR Solana Pay dari data yang dimasukkan pengguna (alamat wallet dan jumlah SOL). Aplikasi ini juga akan menampilkan status pembayaran dengan memeriksa status transaksi di blockchain.

Prasyarat

• Node.js harus sudah terinstal di komputer Anda
• Anda harus memahami React dan TypeScript dengan baik.
• Anda memerlukan wallet Solana untuk mengirim dan menerima dana.
• Anda juga memerlukan kunci API Helius untuk semua pekerjaan on-chain. Anda bisa mendapatkan kunci API Helius secara gratis hanya dengan wallet melalui portal developer kami.

Langkah-langkah

Ikuti langkah-langkah berikut untuk menggunakan Solana Pay dengan Next.js.

Buat Aplikasi Next.js

Pertama, pastikan Node telah terinstal, lalu buat aplikasi Next.js. Masukkan perintah berikut di terminal:

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

‍Setelah itu, Anda akan diminta menjawab beberapa pertanyaan. Anda dapat memilih opsi berikut:

Setelah aplikasi dibuat, Anda dapat masuk ke direktorinya dengan:

cd sol-pay-app

Setelah berada di dalam direktori, Anda dapat menjalankan aplikasi dengan:

npm run dev

Buka http://localhost:3000/ untuk melihat aplikasi Anda.

Instal Paket

Aplikasi ini memerlukan dua paket: Solana web3.js dan Solana Pay. Kita juga akan menggunakan paket bernama “react-qr-code” untuk membuat versi kode QR dari tautan transaksi.

Untuk menginstal paket-paket ini, jalankan:

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

Buat Frontend

Buat frontend untuk menampilkan kode QR Solana Pay dan memungkinkan perubahan pada alamat yang akan menerima SOL serta jumlah SOL. Demi keamanan, sebaiknya jalankan semua logika di backend (terutama saat mengatur jumlah dan penerima).

Namun, agar tetap sederhana, kita juga akan menjalankan logika aplikasi di frontend.

1. Buka direktori pages, lalu buka file index.tsx. File ini mewakili halaman beranda Anda. Ganti kode yang ada dengan kode berikut:

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. Tambahkan impor di bagian atas halaman.

// 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. Buat variabel untuk menyimpan URL RPC Helius Anda. Jika berencana men-deploy aplikasi ini, Anda harus menggunakan file ENV atau proxy untuk menyembunyikan kunci API.

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

4. Buat objek Solana Connection dengan URL RPC Helius Anda:

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

5. Selanjutnya, kita akan mendeklarasikan dan menginisialisasi variabel yang akan digunakan. Ini mencakup semua variabel yang diperlukan dalam URL Solana Pay. Anda dapat membuat variabel-variabel ini di dalam fungsi 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. Selanjutnya, kita perlu menulis fungsi untuk membuat pembayaran. Fungsi ini akan mengambil variabel dari kolom input dan membuat URL Solana Pay terenkode dengan metode encodedURL. Setelah itu, kita akan mengonversi objek URL menjadi string dan menyimpannya untuk digunakan nanti saat menampilkan kode QR. Tambahkan kode berikut di bawah variabel:

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. Setelah pembayaran dibuat, kita akan menampilkan kode QR kepada pengguna agar mereka dapat memindainya dan menjalankan transaksi. Agar dapat memverifikasi apakah transaksi tersebut telah dilakukan dan berhasil, kita perlu membuat fungsi untuk memeriksa transaksi pembayaran secara on-chain. Dalam fungsi createPayment di atas, Anda dapat melihat bahwa kita memanggil fungsi ini tepat setelah membuat transaksi.

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

		// search for transaction

		// validate transaction
}

Fungsi ini akan terdiri dari dua bagian: mencari transaksi yang telah dikonfirmasi dan memvalidasi transaksi.

Karena pengguna akan berinteraksi dengan transaksi dari perangkat terpisah, kita tidak dapat mengetahui secara pasti kapan transaksi tersebut dilakukan. Sebagai gantinya, kita akan memeriksa berulang kali apakah transaksi dengan referensi yang cocok telah dilakukan dan bagaimana statusnya. Hal ini dilakukan dengan metode findReference milik 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');

Setelah transaksi ditemukan, kita perlu memastikan bahwa semua proses yang benar telah terjadi dalam transaksi tersebut.

Ini mencakup pemeriksaan bahwa penerima yang benar menerima token dan jumlah token yang dikirim sudah benar. Untuk melakukannya, kita akan menggunakan metode validateTransfer milik 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. Langkah terakhir dalam proses ini adalah menambahkan TSX untuk menyiapkan UI. Kita akan menggunakan Tailwind untuk mengatur gaya elemen. UI akan mencakup judul, dua kolom input untuk alamat penerima dan jumlah SOL, tombol, serta kode QR Solana Pay. Kode QR Solana Pay akan diganti dengan teks “Pembayaran Tervalidasi” setelah pembayaran divalidasi. Tombol tersebut akan memanggil metode 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>
  );

‍Setelah menyelesaikan semua langkah ini, Anda akan memiliki aplikasi yang terlihat dan berfungsi seperti berikut:

Solana Pay: Menciptakan Pengalaman yang Mulus

Baik saat melakukan pembayaran maupun menyiapkan transaksi, sistem encoding Solana Pay menawarkan pengalaman yang mulus bagi pengguna dan aplikasi. Semoga panduan ini menjadi referensi lengkap untuk memahami dan menerapkan Solana Pay, sehingga interaksi Anda dengan blockchain Solana menjadi lebih lancar dan efisien. Jika memerlukan bantuan, silakan bergabung dengan Discord Helius atau hubungi kami di Twitter.

• Lihat kode lengkap yang seharusnya ada dalam file index.tsx
• Baca selengkapnya tentang Solana Pay
• Temukan dokumentasi Solana Pay

‍

‍

‍