Skip to main content
Complete guide to integrating Phantom Connect using plain JavaScript.

​
1. Install the Browser SDK

npm install @phantom/browser-sdk @solana/web3.js

​
2. Initialize the SDK

// wallet.ts
import { BrowserSDK, AddressType } from "@phantom/browser-sdk";

// These functions are defined in main.ts
declare function updateUI(address: string): void;
declare function showConnectButton(): void;

export const sdk = new BrowserSDK({
  providers: ["google", "apple", "injected"],
  appId: "your-app-id", // Get from phantom.com/portal
  addressTypes: [AddressType.solana],
  authOptions: {
    redirectUrl: "https://yourapp.com/callback.html",
  },
});

// Set up event listeners
sdk.on("connect", (data) => {
  console.log("Connected:", data.addresses);
  updateUI(data.addresses[0].address);
});

sdk.on("disconnect", () => {
  console.log("Disconnected");
  showConnectButton();
});

// Try to restore existing session
sdk.autoConnect();

​
3. Create the HTML

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>My App</title>
  </head>
  <body>
    <div id="app">
      <div id="disconnected">
        <h1>Welcome</h1>
        <button id="connect-google">Continue with Google</button>
        <button id="connect-apple">Continue with Apple</button>
        <button id="connect-extension">Connect Phantom</button>
      </div>

      <div id="connected" style="display: none;">
        <p>Connected: <span id="address"></span></p>
        <button id="sign">Sign Message</button>
        <button id="disconnect">Disconnect</button>
      </div>
    </div>

    <script type="module" src="./main.ts"></script>
  </body>
</html>

​
4. Add the JavaScript

// main.ts
import { sdk } from "./wallet";

// Connect buttons
document.getElementById("connect-google")!.onclick = () => {
  sdk.connect({ provider: "google" });
};

document.getElementById("connect-apple")!.onclick = () => {
  sdk.connect({ provider: "apple" });
};

document.getElementById("connect-extension")!.onclick = () => {
  sdk.connect({ provider: "injected" });
};

// Sign message
document.getElementById("sign")!.onclick = async () => {
  const { signature } = await sdk.solana.signMessage("Hello!");
  alert("Signature: " + signature);
};

// Disconnect
document.getElementById("disconnect")!.onclick = () => {
  sdk.disconnect();
};

// UI helpers
function updateUI(address: string) {
  document.getElementById("disconnected")!.style.display = "none";
  document.getElementById("connected")!.style.display = "block";
  document.getElementById("address")!.textContent = address;
}

function showConnectButton() {
  document.getElementById("disconnected")!.style.display = "block";
  document.getElementById("connected")!.style.display = "none";
}

​
5. Create the callback page

<!-- callback.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>Connecting...</title>
  </head>
  <body>
    <p>Connecting to Phantom...</p>
    <script type="module">
      import { sdk } from "./wallet";
      // SDK handles the callback automatically
      // Redirect back to main page after connection
      sdk.on("connect", () => {
        window.location.href = "/";
      });
    </script>
  </body>
</html>

​
6. Configure Phantom Portal

  1. Go to phantom.com/portal
  2. Create or select your app
  3. Add your domain to allowed URLs
  4. Add your callback URL to redirect URLs
  5. Copy your App ID