Modern toolkit for building Solana commerce applications

Solana Commerce Kit is a comprehensive TypeScript SDK for building e-commerce applications on Solana. It provides everything from low-level payment primitives to high-level React components, enabling developers to integrate payments, tips, and checkout flows with minimal configuration.

Built on modern Solana libraries (@solana/kit, Wallet Standard) with a focus on type safety, developer experience, and production readiness.

Key Features:

• Complete payment flows for tips, purchases, and cart checkout
• Production-ready React components with customizable theming
• Framework-agnostic commerce logic
• Wallet Standard integration for multi-wallet support
• Full Solana Pay protocol implementation
• TypeScript-first with comprehensive type definitions

Meta-package that re-exports all functionality. Install this for complete access to the entire toolkit.

Complete UI components for commerce applications:

• PaymentButton with secure iframe architecture
• Tip modal with customizable amounts
• Wallet connection UI
• Transaction state management
• Customizable theming system

Type-safe React hooks for Solana development:

• Wallet management (useWallet, useStandardWallets)
• Account operations (useBalance, useTransferSOL)
• Token transfers (useTransferToken)
• RPC client access (useArcClient)

Framework-agnostic commerce primitives:

• Payment flow logic
• Cart management
• Order processing
• Checkout calculations
• Type definitions

Headless wallet connector with optional React support:

• Wallet Standard integration
• Multi-wallet detection and connection
• React provider and hooks
• Framework-agnostic core client

Complete Solana Pay protocol implementation:

• Payment URL creation and parsing
• QR code generation
• SOL and SPL token transfers
• Transaction building

commerce-kit/   # @solana-commerce/solana-commerce - all packages in one install
|---packages/
│   ├── @solana-commerce/connector
│   ├── @solana-commerce/headless
│   ├── @solana-commerce/react
│   ├── @solana-commerce/sdk
│   └── @solana-commerce/solana-pay

Choosing a Package:

• Need everything? → @solana-commerce/solana-commerce
• Wallet connection? → @solana-commerce/connector
• Custom UI or non-React framework? → @solana-commerce/headless
• Building React app with UI? → @solana-commerce/react
• Need just hooks? → @solana-commerce/sdk
• Solana Pay protocol? → @solana-commerce/solana-pay

import { PaymentButton } from '@solana-commerce/react';

function CheckoutButton() {
  return (
    <PaymentButton
      config={{
        merchant: {
          name: 'Digital Store',
          wallet: 'merchant-wallet-address'
        },
        mode: 'cart',
        products: [
          {
            id: 'course-1',
            name: 'Solana Development Course',
            price: 100000000, // 0.1 SOL in lamports
            currency: 'SOL'
          }
        ],
        allowedMints: ['SOL', 'USDC'],
        theme: {
          primaryColor: '#9945FF',
          borderRadius: 'lg'
        }
      }}
      onPaymentSuccess={(signature) => {
        console.log('Payment successful!', signature);
      }}
    />
  );
}

import { ArcProvider, useWallet, useTransferSOL } from '@solana-commerce/sdk';

function CustomPayment() {
  const { wallet, connect } = useWallet();
  const { transferSOL, isLoading } = useTransferSOL();

  const handlePayment = async () => {
    if (!wallet) {
      await connect();
      return;
    }

    const { signature } = await transferSOL({
      to: 'merchant-address',
      amount: BigInt(1_000_000_000) // 1 SOL
    });

    console.log('Payment sent:', signature);
  };

  return <button onClick={handlePayment}>Pay 1 SOL</button>;
}

• Node.js 18+
• pnpm 8+

git clone https://github.com/solana-foundation/commerce-kit.git
cd commerce-kit
pnpm install

pnpm build          # Build all packages
pnpm test           # Run all tests
pnpm dev            # Watch mode for development
pnpm format         # Format code
pnpm lint           # Lint code

Navigate to a package and use its scripts:

cd packages/sdk
pnpm dev          # Watch mode
pnpm test:watch   # Test watch mode

Coming soon.

Contributions are welcome. Please read CONTRIBUTING.md for guidelines.

MIT