Quickstart: chấp nhận thanh toán

Bạn sẽ tạo được một nút thanh toán trong ứng dụng React kết nối ví, cho phép người thanh toán chọn token và xác nhận thanh toán thực tế đến địa chỉ của bạn. Bạn cần Node.js 20+, một ứng dụng React hoặc Next.js (có thể dùng create-next-app mới tạo), và một ví để thanh toán.

1. Cài đặt Commerce Kit

pnpm add @solana-commerce/kit

2. Thêm nút

Đặt component PaymentButton ở bất kỳ đâu trong ứng dụng của bạn và thiết lập ví merchant thành địa chỉ bạn kiểm soát:

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

Component này xử lý kết nối ví, chọn token, xử lý giao dịch và trạng thái giao diện nội bộ. mode: "tip" cho phép người thanh toán chọn số tiền; xem chế độ thanh toán để biết về thanh toán giá cố định và thanh toán giỏ hàng.

Thử nghiệm trên trình duyệt

Cấu hình nút thanh toán và khởi chạy luồng tip mà không cần rời khỏi trang này.

Mở Commerce Kit Playground toàn màn hình

3. Nhận thanh toán

Chạy ứng dụng của bạn, nhấp vào nút, kết nối ví và thanh toán. Callback onPaymentSuccess nhận chữ ký giao dịch, đây chính là biên lai của bạn: tra cứu bằng getTransaction hoặc trên bất kỳ trình khám phá nào.

Tiếp theo nên làm gì

• Cách thanh toán hoạt động trên Solana - ví, stablecoin, token account, và phí
• Xác minh thanh toán - xác nhận thanh toán phía server trước khi thực hiện đơn hàng
• Gửi thanh toán - thanh toán và chuyển tiền từ backend của bạn
• Sẵn sàng cho môi trường production - trước khi tiền thật được giao dịch