Κουμπί πληρωμής

Το Commerce Kit βρίσκεται αυτή τη στιγμή σε beta. Τα APIs ενδέχεται να αλλάξουν πριν την σταθερή έκδοση. Για περισσότερες λεπτομέρειες σχετικά με το Commerce Kit, δείτε την τεκμηρίωση του Commerce Kit .

Το PaymentButton component από το Commerce Kit παρέχει μια πλήρη διεπαφή πληρωμών—διαχειρίζεται τη σύνδεση πορτοφολιού, την επιλογή token, την επεξεργασία συναλλαγών και την κατάσταση UI έτοιμα προς χρήση.

Εγκατάσταση

pnpm add @solana-commerce/kit

Βασική χρήση

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

function Checkout() {
  return (
    <PaymentButton
      config={{
        merchant: { name: "My Store", wallet: "your-wallet-address" },
        mode: "buyNow"
      }}
      paymentConfig={{
        products: [{ id: "item-1", name: "Coffee", price: 5.0, quantity: 1 }]
      }}
      onPaymentSuccess={(signature) => {
        console.log("Payment confirmed:", signature);
      }}
    />
  );
}

Δείτε το Commerce Kit Playground για να ρυθμίσετε και να δοκιμάσετε το component.

Λειτουργία	Περιγραφή
`buyNow`	Αγορά μεμονωμένου προϊόντος με σταθερό ποσό
`cart`	Καλάθι αγορών με πολλαπλά προϊόντα
`tip`	Ο χρήστης επιλέγει το δικό του ποσό (δωρεές/φιλοδωρήματα)

Ρύθμιση παραμέτρων

Απαιτούμενες παράμετροι

Ιδιότητα	Τύπος	Περιγραφή
`merchant.name`	`string`	Όνομα επιχείρησης που εμφανίζεται κατά την ολοκλήρωση αγοράς
`merchant.wallet`	`string`	Διεύθυνση πορτοφολιού Solana για λήψη πληρωμών
`mode`	`'buyNow' \| 'cart' \| 'tip'`	Τύπος ροής πληρωμής

Προαιρετικές παράμετροι

Ιδιότητα	Τύπος	Περιγραφή
`network`	`'mainnet' \| 'devnet'`	Δίκτυο Solana (προεπιλογή: `'mainnet'`)
`rpcUrl`	`string`	Προσαρμοσμένο RPC endpoint
`allowedMints`	`string[]`	Περιορισμός αποδεκτών tokens ανά διεύθυνση mint
`showQR`	`boolean`	Ενεργοποίηση επιλογής πληρωμής με QR κώδικα
`theme`	`ThemeConfig`	Οπτική προσαρμογή (χρώματα, ακτίνα περιγράμματος κ.λπ.)

Διαμόρφωση πληρωμής

Για τις λειτουργίες buyNow και cart, παρέχετε προϊόντα μέσω paymentConfig:

paymentConfig={{
  products: [
    { id: '1', name: 'T-Shirt', price: 25, quantity: 2 },
    { id: '2', name: 'Hoodie', price: 45, quantity: 1 }
  ]
}}

Callbacks συμβάντων

Callback	Παράμετροι	Περιγραφή
`onPaymentSuccess`	`(signature: string)`	Η συναλλαγή επιβεβαιώθηκε on-chain
`onPaymentError`	`(error: Error)`	Η πληρωμή απέτυχε σε οποιοδήποτε στάδιο
`onPaymentStart`	`()`	Η ροή πληρωμής ξεκίνησε
`onCancel`	`()`	Ο χρήστης ακύρωσε την πληρωμή

Προσαρμοσμένο trigger

Αντικαταστήστε το προεπιλεγμένο κουμπί με το δικό σας στοιχείο:

<PaymentButton
  config={{
    merchant: { name: "Shop", wallet: "address" },
    mode: "buyNow"
  }}
  paymentConfig={{
    products: [{ id: "1", name: "Product", price: 10, quantity: 1 }]
  }}
>
  <button className="my-custom-button">Pay with Solana</button>
</PaymentButton>

Κουμπί πληρωμής

Εγκατάσταση

Βασική χρήση

Κουμπί φιλοδωρήματος

Παράθυρο πληρωμής

Παράθυρο QR κώδικα Solana Pay

Λειτουργίες πληρωμής