Maksupainike

Commerce Kit on tällä hetkellä beta-vaiheessa. API:t saattavat muuttua ennen vakaata julkaisua. Lisätietoja Commerce Kitistä löydät Commerce Kit -dokumentaatiosta.

PaymentButton-komponentti Commerce Kitistä tarjoaa täydellisen maksukäyttöliittymän – käsittelee lompakon yhdistämisen, tokenin valinnan, tapahtuman käsittelyn ja käyttöliittymän tilan valmiina.

Asennus

pnpm add @solana-commerce/kit

Peruskäyttö

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

Tutustu Commerce Kit Playgroundiin konfigurointia ja komponentin testaamista varten.

Tippipainike

Maksuikkuna

Solana Pay QR-koodiikkuna

Maksutilat

mode-asetus määrittää painikkeen toiminnan:

Tila	Kuvaus
`buyNow`	Yksittäisen tuotteen osto kiinteällä summalla
`cart`	Ostoskori useilla tuotteilla
`tip`	Käyttäjä valitsee oman summan (lahjoitukset/tipit)

Konfiguraatio

Vaaditut asetukset

Ominaisuus	Tyyppi	Kuvaus
`merchant.name`	`string`	Yrityksen nimi, joka näytetään kassalla
`merchant.wallet`	`string`	Solana-lompakon osoite maksujen vastaanottamiseen
`mode`	`'buyNow' \| 'cart' \| 'tip'`	Maksuprosessin tyyppi

Valinnaiset asetukset

Ominaisuus	Tyyppi	Kuvaus
`network`	`'mainnet' \| 'devnet'`	Solana-verkko (oletus: `'mainnet'`)
`rpcUrl`	`string`	Mukautettu RPC-päätepiste
`allowedMints`	`string[]`	Rajoita hyväksytyt tokenit mint-osoitteen mukaan
`showQR`	`boolean`	Ota käyttöön QR-koodimaksuvaihtoehto
`theme`	`ThemeConfig`	Visuaalinen mukauttaminen (värit, reunan pyöristys jne.)

Maksun konfigurointi

Tarjoa tuotteet paymentConfig -parametrin kautta buyNow- ja cart -tiloissa:

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

Tapahtumakutsut

Kutsu	Parametrit	Kuvaus
`onPaymentSuccess`	`(signature: string)`	Transaktio vahvistettu lohkoketjussa
`onPaymentError`	`(error: Error)`	Maksu epäonnistui missä tahansa vaiheessa
`onPaymentStart`	`()`	Maksuprosessi aloitettu
`onCancel`	`()`	Käyttäjä peruutti maksun

Mukautettu laukaisin

Korvaa oletuspainike omalla elementilläsi:

<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>

Sisällysluettelo