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 chính thức. Để 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: "buyNow"
      }}
      paymentConfig={{
        products: [{ id: "item-1", name: "Coffee", price: 5.0, quantity: 1 }]
      }}
      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ả
`buyNow`	Mua sản phẩm đơn lẻ với số tiền cố định
`cart`	Giỏ hàng với nhiều sản phẩm
`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ị khi thanh toán
`merchant.wallet`	`string`	Địa chỉ ví Solana để nhận thanh toán
`mode`	`'buyNow' \| 'cart' \| '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.)

Cấu hình thanh toán

Đối với chế độ buyNow và cart, cung cấp sản phẩm thông qua paymentConfig:

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

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

Nút 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: "buyNow"
  }}
  paymentConfig={{
    products: [{ id: "1", name: "Product", price: 10, quantity: 1 }]
  }}
>
  <button className="my-custom-button">Pay with Solana</button>
</PaymentButton>

Mục lục