Tombol Pembayaran

Commerce Kit saat ini masih 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: "buyNow"
      }}
      paymentConfig={{
        products: [{ id: "item-1", name: "Coffee", price: 5.0, quantity: 1 }]
      }}
      onPaymentSuccess={(signature) => {
        console.log("Payment confirmed:", signature);
      }}
    />
  );
}

Coba konfigurasi dan uji komponen ini di Commerce Kit Playground.

Tombol Tip

Modal Pembayaran

Modal Kode QR Solana Pay

Mode Pembayaran

Opsi mode menentukan perilaku tombol:

Mode	Deskripsi
`buyNow`	Pembelian produk tunggal dengan jumlah tetap
`cart`	Keranjang belanja dengan beberapa produk
`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`	`'buyNow' \| 'cart' \| '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 mint address
`showQR`	`boolean`	Aktifkan opsi pembayaran kode QR
`theme`	`ThemeConfig`	Kustomisasi visual (warna, radius border, dll.)

Konfigurasi pembayaran

Untuk mode buyNow dan cart, sediakan produk melalui paymentConfig:

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

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

Pemicu kustom

Ganti tombol default dengan elemen Anda sendiri:

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

Daftar Isi