Maksunappi

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 – se 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: "tip"
      }}
      onPaymentSuccess={(signature) => {
        console.log("Payment confirmed:", signature);
      }}
    />
  );
}

Tutustu Commerce Kit Playgroundiin konfiguroimaan ja testaamaan komponenttia.

Tippipainike

Maksuikkuna

Solana Pay QR-koodiikkuna

Maksutavat

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

Tila	Kuvaus
`tip`	Käyttäjä valitsee oman summansa (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`	'tip'`	Maksuvirran 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.)

Tapahtumien takaisinkutsut

Takaisinkutsu	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: "tip"
  }}
>
  <button className="my-custom-button">Pay with Solana</button>
</PaymentButton>

Sisällysluettelo