Web (HTML + JS)

Until the next-generation Coinbase Wallet SDK is ready, Base Account SDK (@base-org/account) is the current recommendation for interacting with Coinbase Wallet.

This quick-start shows the minimum code required to add Sign in with Base and Base Pay to any web page using nothing but the Coinbase Wallet SDK. No frameworks, no additional libraries.

Interactive Playground: Want to test the SDK functions before integrating? Try our Base Pay SDK Playground to experiment with pay() and getPaymentStatus() functions.

Do you prefer video content?There is a video guide that covers the implementation in detail in the last section of this page.

1. Install the SDK (Optional)

You can use the Coinbase Wallet SDK in two ways:

Option a: CDN (No Installation Required)

Just include the script tag in your HTML - no build tools needed!

index.html

[...rest of your code]
<script src="https://unpkg.com/@base-org/account/dist/base-account.min.js"></script>
[...rest of your code]

For a full example, see example below.

Option B: npm Package

If you prefer to install locally:

npm install @base-org/account

pnpm add @base-org/account

yarn add @base-org/account

bun add @base-org/account

Then use ES modules:

index.html

<script type="module">
  import {
    createBaseAccountSDK,
    pay,
    getPaymentStatus,
  } from "@base-org/account";
  // ... rest of your code
</script>

This guide uses the CDN approach for simplicity.

2. Copy-Paste This HTML File

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Coinbase Wallet Quick-start</title>
  </head>
  <body>
    <h1>Coinbase Wallet Demo</h1>

    <button id="signin">Sign in with Base</button>
    <button id="pay">Pay with Base</button>

    <div id="status"></div>

    <!-- Load Coinbase Wallet SDK via CDN -->
    <script src="https://unpkg.com/@base-org/account/dist/base-account.min.js"></script>

    <script>
      // Initialize Coinbase Wallet SDK with app configuration
      const provider = window
        .createBaseAccountSDK({
          appName: "Coinbase Wallet Quick-start",
          appLogoUrl: "https://base.org/logo.png",
        })
        .getProvider();
      const statusDiv = document.getElementById("status");
      let userAddress = null;

      function showStatus(message, type = "success") {
        statusDiv.innerHTML = message;
      }

      // Generate a fresh nonce for authentication
      function generateNonce() {
        return window.crypto.randomUUID().replace(/-/g, "");
      }

      // Sign in with Base using wallet_connect method
      document.getElementById("signin").onclick = async () => {
        try {
          showStatus("Connecting to Coinbase Wallet...", "success");

          // Generate a fresh nonce
          const nonce = generateNonce();

          // Connect and authenticate using the new wallet_connect method
          const { accounts } = await provider.request({
            method: "wallet_connect",
            params: [
              {
                version: "1",
                capabilities: {
                  signInWithEthereum: {
                    nonce,
                    chainId: "0x2105", // Base Mainnet - 8453
                  },
                },
              },
            ],
          });

          const { address } = accounts[0];
          const { message, signature } =
            accounts[0].capabilities.signInWithEthereum;

          userAddress = address;

          showStatus(
            `✅ Successfully signed in! Address: ${address.slice(
              0,
              6
            )}...${address.slice(-4)}`
          );

          // In a real app, you would send the message and signature to your backend for verification
          console.log("Authentication data:", { address, message, signature });
        } catch (error) {
          console.error("Sign-in error:", error);
          showStatus(`❌ Sign-in failed: ${error.message}`, "error");
        }
      };

      // One-tap USDC payment using window.base API (works with or without sign-in)
      document.getElementById("pay").onclick = async () => {
        try {
          showStatus("Processing payment...", "success");

          const result = await window.base.pay({
            amount: "5.00", // USD – SDK quotes equivalent USDC
            to: "0x2211d1D0020DAEA8039E46Cf1367962070d77DA9",
            testnet: true, // set to false or omit for Mainnet
          });

          const status = await window.base.getPaymentStatus({
            id: result.id,
            testnet: true,
          });

          showStatus(`🎉 Payment completed! Status: ${status.status}`);
        } catch (error) {
          showStatus(`❌ Payment failed: ${error.message}`, "error");
        }
      };
    </script>
  </body>
</html>

3. Serve the File

Any static server will work:

Terminal

npx serve .
# or
python -m http.server

Open http://localhost:3000, click Sign in with Base (optional) and then Pay with Base, approve the transaction, and you’ve sent 5 USDC on Base Sepolia—done! 🎉

Next Steps

Add Sign In With Base Button – implement full SIWE authentication with backend verification
Add Base Pay Button – collect user information during payment flow

Please Follow the Brand GuidelinesIf you intend on using the SignInWithBaseButton or BasePayButton, please follow the Brand Guidelines to ensure consistency across your application.

GET STARTED

AI AGENTS

WALLETS

PAYMENTS

STABLECOINS

TRADING

ONCHAIN TOOLS

CUSTOMERS

WEBHOOKS

CONSUMER APIS

BUSINESS APIS

INSTITUTIONAL APIS

1. Install the SDK (Optional)

Option a: CDN (No Installation Required)

Option B: npm Package

2. Copy-Paste This HTML File

3. Serve the File

Next Steps

Video Guide

​1. Install the SDK (Optional)

​Option a: CDN (No Installation Required)

​Option B: npm Package

​2. Copy-Paste This HTML File

​3. Serve the File

​Next Steps

​Video Guide

1. Install the SDK (Optional)

Option a: CDN (No Installation Required)

Option B: npm Package

2. Copy-Paste This HTML File

3. Serve the File

Next Steps

Video Guide