Nút thanh toán

Commerce Kit hiện đang ở phiên bản beta. API có thể thay đổi trước khi phát hành phiên bản ổn định. Để biết thêm chi tiết về Commerce Kit, xem tài liệu Commerce Kit.

Component PaymentButton từ Commerce Kit cung cấp giao diện thanh toán hoàn chỉnh—xử lý kết nối ví, lựa chọn token, xử lý giao dịch và trạng thái UI ngay từ đầu.

Cài đặt

pnpm add @solana-commerce/kit

Cách sử dụng cơ bản

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

Xem Commerce Kit Playground để cấu hình và kiểm tra component.

Nút tip

Modal thanh toán

Modal mã QR Solana Pay

Chế độ thanh toán

Tùy chọn mode xác định hành vi của nút:

Chế độ	Mô tả
`tip`	Người dùng tự chọn số tiền (quyên góp/tip)

Cấu hình

Cấu hình bắt buộc

Thuộc tính	Kiểu	Mô tả
`merchant.name`	`string`	Tên doanh nghiệp hiển thị trong quá trình thanh toán
`merchant.wallet`	`string`	Địa chỉ ví Solana để nhận thanh toán
`mode`	'tip'`	Loại luồng thanh toán

Cấu hình tùy chọn

Thuộc tính	Kiểu	Mô tả
`network`	`'mainnet' \| 'devnet'`	Mạng Solana (mặc định: `'mainnet'`)
`rpcUrl`	`string`	Endpoint RPC tùy chỉnh
`allowedMints`	`string[]`	Giới hạn token được chấp nhận theo địa chỉ mint
`showQR`	`boolean`	Bật tùy chọn thanh toán bằng mã QR
`theme`	`ThemeConfig`	Tùy chỉnh giao diện (màu sắc, bo góc, v.v.)

Callback sự kiện

Callback	Tham số	Mô tả
`onPaymentSuccess`	`(signature: string)`	Giao dịch đã được xác nhận trên chuỗi
`onPaymentError`	`(error: Error)`	Thanh toán thất bại ở bất kỳ giai đoạn nào
`onPaymentStart`	`()`	Luồng thanh toán đã được khởi tạo
`onCancel`	`()`	Người dùng đã hủy thanh toán

Trình kích hoạt tùy chỉnh

Thay thế nút mặc định bằng phần tử của riêng bạn:

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

Mục lục