Example 03: Pay with Solana Widget

This example shows how to embed a simple checkout-style payment flow into a web app using Lazorkit passkey wallets, without requiring wallet extensions.

What You’ll Learn

✓Embedding Solana payments directly into a frontend
✓Using passkey-based wallets for one-click payments
✓Abstracting blockchain complexity from users
✓Designing Web2-like checkout flows on Solana

How It Works

1. User Authentication

The user connects using a passkey instead of installing a browser wallet.

2. Payment Instruction

The app constructs a Solana transfer instruction representing the payment.

3. Seamless Payment

The transaction is signed with the passkey and sent on-chain with gas fees sponsored.

Code Example

Minimal “Pay with Solana” widget implementation using Lazorkit. This pattern enables Web2-style checkout experiences backed by Solana smart wallets.

import { useWallet } from "@lazorkit/wallet";
import { SystemProgram, PublicKey, LAMPORTS_PER_SOL } from "@solana/web3.js";

export function PayWithSolanaButton() {
  const { signAndSendTransaction, smartWalletPubkey } = useWallet();

  const handlePay = async () => {
    if (!smartWalletPubkey) return;

    const instruction = SystemProgram.transfer({
      fromPubkey: smartWalletPubkey,
      toPubkey: new PublicKey(""),
      lamports: Math.floor(0.05 * LAMPORTS_PER_SOL),
    });

    await signAndSendTransaction({
      instructions: [instruction],
      transactionOptions: {
        feeToken: "USDC",
      },
    });

    alert("Payment successful!");
  };

  return <button onClick={handlePay}>Pay ₹99 with Solana</button>;
}