Quickstart: αποδοχή πληρωμής

Θα καταλήξετε με ένα κουμπί πληρωμής σε μια εφαρμογή React που συνδέει ένα πορτοφόλι, επιτρέπει στον πληρωτή να επιλέξει ένα token και επιβεβαιώνει μια πραγματική πληρωμή στη διεύθυνσή σας. Χρειάζεστε Node.js 20+, μια εφαρμογή React ή Next.js (ένα νέο create-next-app είναι εντάξει) και ένα πορτοφόλι για πληρωμή.

1. Εγκαταστήστε το Commerce Kit

pnpm add @solana-commerce/kit

2. Προσθέστε το κουμπί

Τοποθετήστε το component PaymentButton οπουδήποτε στην εφαρμογή σας και ορίστε το πορτοφόλι του εμπόρου σε μια διεύθυνση που ελέγχετε:

import { PaymentButton } from "@solana-commerce/kit";

function Checkout() {
  return (
    <PaymentButton
      config={{
        merchant: { name: "My Store", wallet: "your-wallet-address" },
        mode: "tip"
      }}
      onPaymentSuccess={(signature) => {
        console.log("Payment confirmed:", signature);
      }}
    />
  );
}

Το component διαχειρίζεται εσωτερικά τη σύνδεση πορτοφολιού, την επιλογή token, την επεξεργασία συναλλαγών και την κατάσταση του UI. Το mode: "tip" επιτρέπει στον πληρωτή να επιλέξει το ποσό· δείτε τρόπους πληρωμής για ολοκλήρωση αγοράς σταθερής τιμής και καλαθιού.

Δοκιμάστε το στο πρόγραμμα περιήγησης

Διαμορφώστε το κουμπί πληρωμής και εκκινήστε τη ροή φιλοδωρήματος χωρίς να φύγετε από αυτή τη σελίδα.

Ανοίξτε το Commerce Kit Playground σε πλήρη οθόνη

3. Λάβετε μια πληρωμή

Εκτελέστε την εφαρμογή σας, κάντε κλικ στο κουμπί, συνδέστε ένα πορτοφόλι και πληρώστε. Το callback onPaymentSuccess λαμβάνει την υπογραφή συναλλαγής, η οποία αποτελεί την απόδειξή σας: αναζητήστε την με getTransaction ή σε οποιονδήποτε explorer.

Πού να πάτε στη συνέχεια

• Πώς λειτουργούν οι πληρωμές στο Solana - πορτοφόλια, stablecoins, token accounts και χρεώσεις
• Επαλήθευση πληρωμών - επιβεβαιώστε μια πληρωμή από την πλευρά του server πριν εκτελέσετε μια παραγγελία
• Αποστολή πληρωμών - πληρωμές και μεταφορές από το δικό σας backend
• Ετοιμότητα για παραγωγή - πριν κινηθούν πραγματικά χρήματα