Θα καταλήξετε με ένα στοιχείο React που εμφανίζει έναν κωδικό QR του Solana Pay για μια πληρωμή σε USDC, περιμένει να ολοκληρωθεί η πληρωμή και ελέγχει ότι ταιριάζει με αυτό που ζητήσατε. Χρειάζεστε Node.js 20+, μια εφαρμογή React ή Next.js (ένα νέο create-next-app είναι εντάξει) και ένα πορτοφόλι κινητού ρυθμισμένο στο devnet. Εφοδιάστε το με USDC του devnet από το faucet.circle.com και με SOL του devnet από το faucet.solana.com για να καλύψετε τις χρεώσεις συναλλαγών.
Το @solana/pay βρίσκεται αυτή τη στιγμή σε beta. Τα API ενδέχεται να αλλάξουν πριν από τη σταθερή έκδοση.
1. Εγκαταστήστε το Solana Pay
pnpm add @solana/pay@beta @solana/kit
2. Προσθέστε τον κωδικό QR πληρωμής
Το στοιχείο δημιουργεί μια μοναδική αναφορά για την παραγγελία, την κωδικοποιεί σε ένα URL αιτήματος μεταφοράς και εμφανίζει το URL ως κωδικό QR. Στη συνέχεια παρακολουθεί για μια συναλλαγή που περιλαμβάνει την αναφορά και επικυρώνει τον παραλήπτη, το ποσό και το token πριν επισημάνει την παραγγελία ως πληρωμένη. Ορίστε το 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 είναι σε μονάδες token, επομένως το 1 ζητά 1 USDC. Παραλείψτε το splToken για να ζητήσετε SOL.
3. Λάβετε μια πληρωμή
Εκτελέστε την εφαρμογή σας, σαρώστε τον κωδικό QR με το πορτοφόλι σας και εγκρίνετε την πληρωμή. Μόλις η συναλλαγή επιβεβαιωθεί και περάσει την επικύρωση, το στοιχείο εμφανίζει την υπογραφή της συναλλαγής. Αυτή η υπογραφή είναι η απόδειξή σας: αναζητήστε την με το getTransaction ή σε οποιονδήποτε explorer.
Η επικύρωση στο πρόγραμμα περιήγησης είναι αποδεκτή για ένα demo. Πριν εκπληρώσετε πραγματικές παραγγελίες, επικυρώστε τις πληρωμές στον διακομιστή σας. Δείτε την ενότητα επαλήθευση πληρωμών.
Πού να πάτε στη συνέχεια
- Solana Pay - αιτήματα μεταφοράς, αιτήματα συναλλαγών και επιλογές κωδικών QR
- Πώς λειτουργούν οι πληρωμές στο Solana - πορτοφόλια, stablecoins, token accounts και χρεώσεις
- Επαλήθευση πληρωμών - επιβεβαιώστε μια πληρωμή από την πλευρά του server πριν εκτελέσετε μια παραγγελία
- Αποστολή πληρωμών - πληρωμές και μεταφορές από το δικό σας backend
- Ετοιμότητα για παραγωγή - πριν κινηθούν πραγματικά χρήματα
Is this page helpful?