> ## Documentation Index
> Fetch the complete documentation index at: https://docs.crossmint.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Use Connected Wallet as Payer

> Learn how to configure an already connected wallet as the payer wallet

## Overview

By default, Embedded checkout includes wallet connector UI. However, if your customers have already
connected their wallet to your website, you can configure that connected wallet directly as the payer.

This is useful when:

* You're already using a wallet connection solution (like RainbowKit, Solana Wallet Adapter, Web3Modal, or ConnectKit)
* You are using embedded wallets (from Crossmint or other providers)

## Quick Integration

Here's a simple example using [wagmi](https://wagmi.sh/), [viem](https://viem.sh/) and [TanStack Query](https://tanstack.com/query/v5):

<Note>
  Make sure you have this environment variables on `.env.local` or directly replace it in the code `bash
        NEXT_PUBLIC_CLIENT_API_KEY="__YOUR_CLIENT_KEY__" # From API Keys page NEXT_PUBLIC_RECIPIENT_WALLET_ADDRESS="" #
        Address receiving the assets NEXT_PUBLIC_RECEIPT_EMAIL="user@example.com"
        NEXT_PUBLIC_COLLECTION_ID="__YOUR_COLLECTION_ID__" # From Collection details page `
</Note>

<CodeGroup>
  ```tsx Checkout.tsx theme={null}
  import { CrossmintEmbeddedCheckout } from "@crossmint/client-sdk-react-ui";
  import { Hex, parseTransaction } from "viem";
  import { useAccount, useWalletClient } from "wagmi";
  import { baseSepolia, polygonAmoy } from "wagmi/chains";

  export default function Checkout() {
    const { address } = useAccount();
    const { data: walletClient } = useWalletClient();
    const collectionId = process.env.NEXT_PUBLIC_COLLECTION_ID as string;

    const chainIds: Record<string, number> = {
      "base-sepolia": baseSepolia.id,
      "polygon-amoy": polygonAmoy.id,
    } as const;

    // Don't render checkout if wallet is not connected
    if (!address || !walletClient) {
      return (
        <div className="flex flex-col items-center justify-center p-6">
          <h2 className="text-xl text-gray-600 mb-4">Please connect your wallet to continue</h2>
        </div>
      );
    }

    return (
      <CrossmintEmbeddedCheckout
        locale="es-ES"
        recipient={{
          walletAddress: process.env.NEXT_PUBLIC_RECIPIENT_WALLET_ADDRESS ?? "",
        }}
        payment={{
          crypto: {
            // Enable crypto payment, this example only uses Crypto
            enabled: true,
            payer: {
              address,
              initialChain: "base-sepolia",
              supportedChains: ["base-sepolia", "polygon-amoy"],
              handleChainSwitch: async (chain) => {
                await walletClient.switchChain({
                  id: chainIds[chain],
                });
              },
              handleSignAndSendTransaction: async (serializedTx) => {
                try {
                  const tx = parseTransaction(serializedTx as Hex);
                  const hash = await walletClient.sendTransaction({
                    to: tx.to,
                    value: tx.value,
                    data: tx.data ?? "0x",
                    gas: tx.gas,
                    chainId: tx.chainId,
                  });

                  return { success: true, txId: hash };
                } catch (error) {
                  return {
                    success: false,
                    errorMessage: error instanceof Error ? error.message : "Transaction failed",
                  };
                }
              },
            },
          },
          fiat: { enabled: false },
          receiptEmail: process.env.NEXT_PUBLIC_RECEIPT_EMAIL ?? "",
        }}
        lineItems={{
          collectionLocator: `crossmint:${collectionId}`,
          callData: {
            quantity: 1,
          },
        }}
      />
    );
  }

  ```

  ```tsx WalletConnector.tsx theme={null}
  import { useAccount, useConnect, useDisconnect } from "wagmi";

  export default function WalletConnector() {
    const { address, isConnected } = useAccount();
    const { connect, connectors, isPending } = useConnect();
    const { disconnect } = useDisconnect();

    if (!isConnected) {
      return (
        <div className="absolute top-4 right-4">
          <button
            onClick={() => connect({ connector: connectors[0] })}
            disabled={isPending}
            className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 cursor-pointer"
          >
            {isPending ? 'Connecting...' : 'Connect Wallet'}
          </button>
        </div>
      );
    }

    return (
      <div className="absolute top-4 right-4">
        <div className="flex items-center gap-2">
          <span className="px-4 py-2 bg-green-600 text-white rounded-lg">
            {address?.slice(0, 6)}...{address?.slice(-4)}
          </span>
          <button
            onClick={() => disconnect()}
            className="px-3 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 cursor-pointer text-sm"
          >
            Disconnect
          </button>
        </div>
      </div>
    );
  }
  ```

  ```tsx Home.tsx theme={null}
  "use client";

  import { CrossmintProvider } from "@crossmint/client-sdk-react-ui";
  import { WagmiProvider, createConfig, http } from "wagmi";
  import { baseSepolia, polygonAmoy } from "wagmi/chains";
  import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
  import { injected } from "wagmi/connectors";
  import Checkout from "@/components/Checkout";
  import WalletConnector from "@/components/WalletConnector";

  export default function Home() {
      const clientApiKey = process.env.NEXT_PUBLIC_CLIENT_API_KEY as string;
      // Create a client
      const queryClient = new QueryClient();

      // Create wagmi config
      const config = createConfig({
          chains: [baseSepolia, polygonAmoy] as any,
          connectors: [injected()] as any,
          transports: {
              [baseSepolia.id]: http(),
              [polygonAmoy.id]: http(),
          },
      } as any);

      return (
          <WagmiProvider config={config}>
              <QueryClientProvider client={queryClient}>
                  <div className="relative flex flex-col items-center justify-start h-screen p-6 bg-white">
                      <WalletConnector />
                      <CrossmintProvider apiKey={clientApiKey}>
                          <div className="max-w-[450px] w-full">
                              <Checkout />
                          </div>
                      </CrossmintProvider>
                  </div>
              </QueryClientProvider>
          </WagmiProvider>
      );
  }
  ```
</CodeGroup>

<Note>
  When the user clicks the hosted checkout button, our SDK will first call `handleChainSwitch` to ensure the correct
  network is set, then `handleSignAndSendTransaction` to complete the purchase.
</Note>

## Payer Configuration

The `payer` prop accepts the following configuration:

| Property                       | Type                                                     | Description                                                                                                                                                               |
| ------------------------------ | -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `address`                      | `string`                                                 | The wallet address of the payer                                                                                                                                           |
| `initialChain`                 | `PayerSupportedBlockchains`                              | The initial blockchain (e.g. "polygon", "ethereum", "base-sepolia")                                                                                                       |
| `supportedChains`              | `PayerSupportedBlockchains[]`                            | Optional list of supported chains. Defaults to `initialChain` if not specified                                                                                            |
| `handleChainSwitch`            | `(chain: PayerSupportedBlockchains) => Promise<void>`    | Function to handle chain switching                                                                                                                                        |
| `handleSignAndSendTransaction` | `(serializedTx: string) => Promise<TransactionResponse>` | Function to handle transaction signing and sending, where `TransactionResponse` is either `{ success: true, txId: string }` or `{ success: false, errorMessage: string }` |

## Popular Wallet Solutions

You can integrate Crossmint with popular Web3 solutions:

### RainbowKit

```tsx theme={null}
import { useConnectModal } from "@rainbow-me/rainbowkit";

// Similar implementation as above, but using RainbowKit's hooks
```

### Web3Modal

```tsx theme={null}
import { useWeb3Modal } from "@web3modal/react";

// Similar implementation as above, but using Web3Modal's hooks
```

## Best Practices

1. **Error Handling**: Always return clear error messages in `handleSignAndSendTransaction`
2. **Chain Support**: Be explicit about supported chains to avoid runtime errors
3. **User Experience**: Show loading states during chain switches and transactions
4. **Wallet Connection**: Ensure wallet is connected before showing checkout

## Related Resources

* [Payment Methods](/payments/embedded/guides/payment-methods)
* [React Hooks](/payments/embedded/guides/hooks)
* [Testing Tips](/payments/advanced/testing-tips)