🚀 Solana Pay Widget - Lazorkit SDK Integration Example

📖 Overview

This repository provides a complete, production-ready example of integrating the Lazorkit SDK into a Next.js application. It demonstrates how to build a modern Web3 payment widget with:

• 🔐 Passkey Authentication - Users login with Face ID, Touch ID, or Windows Hello
• ⚡ Gasless Transactions - Users never need SOL for gas fees
• 👛 Smart Wallets - Automatic wallet creation and management
• 🔄 Session Persistence - Stay logged in across browser sessions

Why Lazorkit?

Traditional blockchain UX requires users to:

1. Install a wallet app
2. Write down a 12-24 word seed phrase
3. Buy crypto to pay for gas fees
4. Understand complex transaction signing

Lazorkit eliminates all of this. Users authenticate with the biometrics they already use (Face ID, fingerprint), and transactions are gasless. It's Web3 with Web2-like simplicity.

🎯 Features Demonstrated

🚀 Quick Start

Prerequisites

• Node.js 18.0 or higher
• A browser that supports WebAuthn (Chrome, Safari, Firefox, Edge)
• Optional: A device with biometric authentication

1. Clone the Repository

git clone https://github.com/your-username/lazorkit-solana-pay-widget.git
cd lazorkit-solana-pay-widget

2. Install Dependencies

npm install

3. Configure Environment

Copy the example environment file and configure:

cp env.example .env.local

Edit .env.local with your configuration:

# Solana RPC URL (Devnet for testing)
NEXT_PUBLIC_LAZORKIT_RPC_URL=https://api.devnet.solana.com

# Lazorkit Portal URL for passkey storage
NEXT_PUBLIC_LAZORKIT_PORTAL_URL=https://portal.lazorkit.com

# Lazorkit Paymaster URL for gasless transactions
NEXT_PUBLIC_LAZORKIT_PAYMASTER_URL=https://paymaster.lazorkit.com

# Your app name (shown in passkey prompts)
NEXT_PUBLIC_APP_NAME=Solana Pay Widget

# Network (devnet or mainnet-beta)
NEXT_PUBLIC_SOLANA_NETWORK=devnet

4. Run the Development Server

npm run dev

Open http://localhost:3000 in your browser.

5. Try It Out!

1. Click "Connect with Passkey"
2. Authenticate with your device's biometrics
3. Your smart wallet is created automatically
4. Send a test payment (gasless!)

📁 Project Structure

lazorkit-solana-pay-widget/
├── src/
│   ├── app/
│   │   ├── layout.tsx          # Root layout with providers
│   │   └── page.tsx            # Main page component
│   │
│   ├── components/
│   │   ├── WalletConnect.tsx   # Wallet connection UI
│   │   ├── PaymentWidget.tsx   # Payment form component
│   │   ├── TransactionHistory.tsx
│   │   ├── FeatureShowcase.tsx
│   │   └── index.ts            # Component exports
│   │
│   ├── providers/
│   │   └── LazorkitProvider.tsx # Lazorkit SDK integration
│   │
│   └── styles/
│       └── globals.css         # Global styles & Tailwind
│
├── docs/                        # Tutorial documentation
│   ├── tutorial-passkey-wallet.md
│   └── tutorial-gasless-transactions.md
│
├── env.example                  # Environment template
├── package.json
├── tailwind.config.js
└── README.md

📚 Tutorials

Tutorial 1: Creating a Passkey-Based Wallet

Learn how to implement passkey authentication for wallet creation.

📖 Read the full tutorial →

Quick overview:

// 1. Set up the provider
import { LazorkitProvider } from '@lazorkit/wallet';

<LazorkitProvider
  rpcUrl={process.env.NEXT_PUBLIC_LAZORKIT_RPC_URL}
  paymasterUrl={process.env.NEXT_PUBLIC_LAZORKIT_PAYMASTER_URL}
>
  <App />
</LazorkitProvider>

// 2. Use the wallet hook
import { useWallet } from '@lazorkit/wallet';

const { connect, isConnected, smartWalletPubkey } = useWallet();

// 3. Connect with passkey
await connect(); // Prompts biometric authentication

Tutorial 2: Sending Gasless Transactions

Learn how to send transactions without requiring users to hold SOL.

📖 Read the full tutorial →

Quick overview:

const { signAndSendTransaction } = useWallet();

// Build your transaction
const transaction = new Transaction().add(
  SystemProgram.transfer({
    fromPubkey: smartWalletPubkey,
    toPubkey: recipientPubkey,
    lamports: amount * LAMPORTS_PER_SOL,
  })
);

// Sign with passkey and send (gasless!)
const { signature } = await signAndSendTransaction(transaction);

🔧 SDK Integration Deep Dive

The LazorkitProvider

The provider wraps your application and manages:

1. Connection State - Track if user is connected
2. Credential Storage - Persist passkey across sessions
3. Transaction Signing - Handle WebAuthn assertions

// src/providers/LazorkitProvider.tsx

export function LazorkitContextProvider({ children }) {
  const [isConnected, setIsConnected] = useState(false);
  const [smartWalletPubkey, setSmartWalletPubkey] = useState(null);

  // Restore session on mount
  useEffect(() => {
    const savedCredential = loadCredential();
    if (savedCredential) {
      // Auto-restore session
    }
  }, []);

  // ... provider implementation
}

WebAuthn Flow

┌──────────────┐     ┌──────────────┐     ┌──────────────┐
│   User       │     │   Browser    │     │   Solana     │
│   Device     │     │   (WebAuthn) │     │   Network    │
└──────┬───────┘     └──────┬───────┘     └──────┬───────┘
       │                    │                    │
       │ 1. Click Connect   │                    │
       │───────────────────>│                    │
       │                    │                    │
       │ 2. Biometric Prompt│                    │
       │<───────────────────│                    │
       │                    │                    │
       │ 3. User Approves   │                    │
       │───────────────────>│                    │
       │                    │                    │
       │                    │ 4. Create Credential
       │                    │────────────┐       │
       │                    │<───────────┘       │
       │                    │                    │
       │                    │ 5. Derive Smart Wallet
       │                    │───────────────────>│
       │                    │                    │
       │ 6. Connected!      │                    │
       │<───────────────────│                    │
       │                    │                    │

🎨 UI Components

WalletConnect

Flexible wallet connection component with three variants:

// Hero variant - Large button for landing pages
<WalletConnect variant="hero" />

// Compact variant - Small button for headers
<WalletConnect variant="compact" />

// Full variant - Complete card with all wallet info
<WalletConnect variant="full" />

PaymentWidget

Complete payment form with:

• Token selection (SOL/USDC)
• Amount input with validation
• Recipient address validation
• Transaction status indicators
• Success/error states

<PaymentWidget />

🌐 Deployment

Deploy to Vercel

1. Click the deploy button above
2. Configure environment variables in Vercel dashboard
3. Deploy!

Deploy to Other Platforms

# Build for production
npm run build

# Start production server
npm start

🔗 Resources

• Lazorkit Documentation: https://docs.lazorkit.com
• Lazorkit GitHub: https://github.com/lazor-kit/lazor-kit
• Lazorkit Telegram: https://t.me/lazorkit
• Solana Web3.js: https://solana-labs.github.io/solana-web3.js/
• WebAuthn Guide: https://webauthn.guide

🤝 Contributing

Contributions are welcome! Feel free to:

1. Fork the repository
2. Create a feature branch
3. Submit a pull request

📄 License

MIT License - feel free to use this example in your own projects!