SolPay Docs

# 1. Clone or download the SolPay project
git clone https://github.com/your-username/solpay
cd solpay

# 2. Install dependencies
npm install

# 3. Copy the environment file
cp .env.example .env.local

# 4. Fill in your values (see Environment Setup section below)
# 5. Run the dev server
npm run dev

# Open http://localhost:3000

npm install
npm run dev

# Install required dependencies into your existing project
npm install @solana/web3.js @solana/wallet-adapter-react \
  @solana/wallet-adapter-react-ui @solana/wallet-adapter-phantom \
  @solana/pay qrcode.react canvas-confetti

Files to copy into your project:
├── components/
│   ├── CheckoutModal.tsx     ← The full checkout UI
│   ├── SolPayButton.tsx      ← The button you add to product pages
│   └── WalletProvider.tsx    ← Wrap your app layout with this
├── lib/
│   ├── solana.ts             ← RPC connection helper
│   └── tokens.ts             ← SOL / USDC / BONK config
└── app/api/
    ├── create-transaction/route.ts   ← Builds the Solana tx
    └── verify-transaction/route.ts   ← Confirms on-chain

# .env.local (create this file in your project root)

# Your Helius RPC key — get free at https://helius.dev
NEXT_PUBLIC_HELIUS_RPC_URL=https://devnet.helius-rpc.com/?api-key=YOUR_KEY

# Your Solana wallet address (from Phantom)
NEXT_PUBLIC_MERCHANT_WALLET=YOUR_WALLET_ADDRESS

# "devnet" for testing (free), "mainnet-beta" for real money
NEXT_PUBLIC_SOLANA_NETWORK=devnet

# Optional: fires a POST to your backend when a payment confirms
MERCHANT_WEBHOOK_URL=https://yoursite.com/api/payment-confirmed

import { SolPayButton } from '@/components/SolPayButton';

// On any page — a sneaker product page, a SaaS pricing page, etc.
<SolPayButton
  merchantWallet="YourSolanaWalletAddress"
  amount={0.5}
  token="SOL"
  label="Buy Air Max 95"
/>

<SolPayButton
  merchantWallet="YourSolanaWalletAddress"
  amount={89.99}
  token="USDC"
  label="Buy Sneaker Bundle"
  description="Air Max 95 + socks, size 42"
  onSuccess={(signature) => {
    console.log('Payment confirmed!', signature);
    // redirect to order confirmation, send email, etc.
  }}
/>

<SolPayButton ... size="sm" />   {/* small — fits inside a card */}
<SolPayButton ... size="md" />   {/* medium — default */}
<SolPayButton ... size="lg" />   {/* large — hero section CTA */}

'use client';
import { useState } from 'react';
import { CheckoutModal } from '@/components/CheckoutModal';

export default function ProductPage() {
  const [open, setOpen] = useState(false);

  return (
    <>
      {/* Your own custom button */}
      <button onClick={() => setOpen(true)}>
        Buy Now — 0.5 SOL
      </button>

      <CheckoutModal
        isOpen={open}
        onClose={() => setOpen(false)}
        amount={0.5}
        token="SOL"
        merchantWallet="YourWalletAddress"
        label="Air Max 95"
        description="Size 42 · Black colourway"
        onSuccess={(signature) => {
          setOpen(false);
          alert('Payment done! Sig: ' + signature);
        }}
      />
    </>
  );
}

# In .env.local — set your backend endpoint
MERCHANT_WEBHOOK_URL=https://yoursite.com/api/payment-confirmed

{
  "signature": "5xV9kJME8qP3nRtYw...",
  "amount": 89.99,
  "token": "USDC",
  "fromWallet": "BuyerWalletAddress",
  "toWallet": "YourWalletAddress",
  "label": "Air Max 95",
  "timestamp": 1716912345678
}

// app/api/payment-confirmed/route.ts
import { NextRequest, NextResponse } from 'next/server';

export async function POST(req: NextRequest) {
  const { signature, amount, token, label } = await req.json();

  // Do whatever you need:
  // - Send confirmation email
  // - Mark order as paid in your database
  // - Trigger Shopify fulfillment
  // - Send a WhatsApp message
  console.log(`Payment of ${amount} ${token} confirmed for: ${label}`);
  console.log(`Verify at: https://solscan.io/tx/${signature}`);

  return NextResponse.json({ ok: true });
}

# Install Vercel CLI
npm install -g vercel

# Deploy from your project folder
cd solpay
vercel

# Follow the prompts — it will ask for your env variables.
# Add these three when prompted:
#   NEXT_PUBLIC_HELIUS_RPC_URL
#   NEXT_PUBLIC_MERCHANT_WALLET
#   NEXT_PUBLIC_SOLANA_NETWORK

# In .env.local (or Vercel env vars)
NEXT_PUBLIC_SOLANA_NETWORK=mainnet-beta
NEXT_PUBLIC_HELIUS_RPC_URL=https://mainnet.helius-rpc.com/?api-key=YOUR_KEY