Tombol pembayaran

Commerce Kit saat ini dalam versi beta. API dapat berubah sebelum rilis stabil. Untuk detail tambahan tentang Commerce Kit, lihat dokumentasi Commerce Kit.

Komponen PaymentButton dari Commerce Kit menyediakan antarmuka pembayaran lengkap—menangani koneksi wallet, pemilihan token, pemrosesan transaksi, dan status UI secara otomatis.

Instalasi

pnpm add @solana-commerce/kit

Penggunaan dasar

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

Lihat Commerce Kit Playground untuk mengonfigurasi dan menguji komponen.

Tombol tip

Modal pembayaran

Modal kode QR Solana Pay

Mode pembayaran

Opsi mode menentukan perilaku tombol:

Mode	Deskripsi
`tip`	Pengguna memilih jumlah sendiri (donasi/tip)

Konfigurasi

Konfigurasi wajib

Properti	Tipe	Deskripsi
`merchant.name`	`string`	Nama bisnis yang ditampilkan saat checkout
`merchant.wallet`	`string`	Alamat wallet Solana untuk menerima pembayaran
`mode`	'tip'`	Jenis alur pembayaran

Konfigurasi opsional

Properti	Tipe	Deskripsi
`network`	`'mainnet' \| 'devnet'`	Jaringan Solana (default: `'mainnet'`)
`rpcUrl`	`string`	Endpoint RPC kustom
`allowedMints`	`string[]`	Batasi token yang diterima berdasarkan alamat mint
`showQR`	`boolean`	Aktifkan opsi pembayaran kode QR
`theme`	`ThemeConfig`	Kustomisasi visual (warna, radius border, dll.)

Callback event

Callback	Parameter	Deskripsi
`onPaymentSuccess`	`(signature: string)`	Transaksi dikonfirmasi on-chain
`onPaymentError`	`(error: Error)`	Pembayaran gagal di tahap mana pun
`onPaymentStart`	`()`	Alur pembayaran dimulai
`onCancel`	`()`	Pengguna membatalkan pembayaran

Trigger kustom

Ganti tombol default dengan elemen Anda sendiri:

<PaymentButton
  config={{
    merchant: { name: "Shop", wallet: "address" },
    mode: "tip"
  }}
>
  <button className="my-custom-button">Pay with Solana</button>
</PaymentButton>

Daftar Isi