Quickstart: terima pembayaran

Anda akan memiliki tombol pembayaran di aplikasi React yang menghubungkan dompet, memungkinkan pembayar memilih token, dan mengonfirmasi pembayaran nyata ke alamat Anda. Anda memerlukan Node.js 20+, aplikasi React atau Next.js (aplikasi create-next-app baru sudah cukup), dan dompet untuk membayar.

1. Instal Commerce Kit

pnpm add @solana-commerce/kit

2. Tambahkan tombol

Tempatkan komponen PaymentButton di mana saja dalam aplikasi Anda dan atur dompet merchant ke alamat yang Anda kendalikan:

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

Komponen ini menangani koneksi dompet, pemilihan token, pemrosesan transaksi, dan status UI secara internal. mode: "tip" memungkinkan pembayar memilih jumlahnya; lihat mode pembayaran untuk checkout harga tetap dan keranjang belanja.

Coba di browser

Konfigurasikan tombol pembayaran dan jalankan alur tip tanpa meninggalkan halaman ini.

Buka Commerce Kit Playground layar penuh

3. Terima pembayaran

Jalankan aplikasi Anda, klik tombol, hubungkan dompet, dan lakukan pembayaran. Callback onPaymentSuccess menerima tanda tangan transaksi, yang merupakan tanda terima Anda: cari menggunakan getTransaction atau di explorer mana pun.

Langkah selanjutnya

• Cara kerja pembayaran di Solana - dompet, stablecoin, token account, dan biaya
• Verifikasi pembayaran - konfirmasi pembayaran di sisi server sebelum memproses pesanan
• Kirim pembayaran - pembayaran keluar dan transfer dari backend Anda sendiri
• Kesiapan produksi - sebelum uang sungguhan berpindah