Pikaopas: vastaanota maksu

Tuloksena saat maksupainikkeen React-sovellukseen, joka yhdistää lompakon, antaa maksajan valita tokenin ja vahvistaa todellisen maksun osoitteeseesi. Tarvitset Node.js 20+:n, React- tai Next.js-sovelluksen (tuore create-next-app käy hyvin) sekä lompakon, jolla maksat.

1. Asenna Commerce Kit

pnpm add @solana-commerce/kit

2. Lisää painike

Lisää PaymentButton-komponentti mihin tahansa kohtaan sovelluksessasi ja aseta kauppiaslompakoksi hallitsemasi osoite:

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

Komponentti hallitsee lompakon yhdistämisen, tokenin valinnan, tapahtumien käsittelyn ja käyttöliittymän tilan sisäisesti. mode: "tip" antaa maksajan valita summan; katso maksutilat kiinteähintaisiin ja ostoskorin kassatoimintoihin.

Kokeile selaimessa

Määritä maksupainike ja käynnistä tippausvirta poistumatta tältä sivulta.

Avaa Commerce Kit Playground koko näytölle

3. Vastaanota maksu

Käynnistä sovelluksesi, napsauta painiketta, yhdistä lompakko ja maksa. onPaymentSuccess-takaisinkutsu vastaanottaa tapahtuman allekirjoituksen, joka toimii kuittinasi: hae se getTransaction-funktiolla tai millä tahansa selaimella.

Mitä tehdä seuraavaksi

• Miten maksut toimivat Solanassa – lompakot, vakaakolikot, token account ja maksut
• Maksujen vahvistaminen – vahvista maksu palvelinpuolella ennen tilauksen täyttämistä
• Maksujen lähettäminen – maksut ja siirrot omasta taustajärjestelmästäsi
• Tuotantovalmius – ennen kuin oikea raha liikkuu