Example Github Repo

Our example repository demonstrates how to integrate Pluto Frame libraries in both vanilla JavaScript and React applications.

Quick Start

# Install dependencies
npm install
 
# Run examples
npm run javascript    # Vanilla JavaScript
npm run react        # React

Navigate to http://localhost:5173/ in your browser.

Basic Implementation

The basic examples show minimal setup required for Pluto Frame integration:

React

"use client"; // if using Next.js app router, include "use client" directive
import { Frame } from "@plutoxyz/react-frame";
 
function App() {
  const handleProof = (proof: any) => {
    console.log(proof.data);
  };
 
  const handleError = (error: any) => {
    console.log(error.code);
    console.log(error.display_message);
    console.log(error.message);
  };
 
  return (
    <Frame
      script={`myScript`}
      onProof={handleProof}
      onError={handleError}
      brand={{
        logo: "https://plutoxyz.com/logo.png",
        name: "Plutoxyz",
      }}
    />
  );
}

Vanilla JavaScript

import Pluto, {
  PageHooks,
  ProofPayload,
  ErrorPayload,
} from "@plutoxyz/frame-js";
 
// 1️⃣  Add a container to your HTML
// <div id="pluto-frame"></div>
 
// 2️⃣  Define event handlers
const hooks: PageHooks = {
  onScriptLog: (log) => console.log("Log:", log),
  onSuccess: (data: ProofPayload) => console.log("Success:", data),
  onError: (error: ErrorPayload) => console.error("Error:", error),
};
 
// 3️⃣  Initialize the SDK
await Pluto.initialize(hooks);
 
// 4️⃣  Connect and run your verification script
await Pluto.connect(`
  const accessToken = await oauth({
    title: 'Connect with OAuth Demo',
    description: 'Connect with the local OAuth Debugger',
    clientId: '123',
  });
 
  const balanceText = (await balanceLocator.textContent()) || '';
  const balance = parseFloat(balanceText.replace(/[$,]/g, ''));
 
  await prove('bank_balance', balance);
`);

First Automation JavaScript SDKs