@digital-passports/javascript-sdk/examples/nextjs/pages/index.js

JavaScript SDK for interacting with the Digital Passport Hub REST API.

import { useState } from 'react';

export default function Home() {
  const [apiKey, setApiKey] = useState('your_api_key');
  const [output, setOutput] = useState('');
  const [dpp, setDpp] = useState(null);

  const ensureDpp = async () => {
    if (!dpp) {
      const mod = await import('@digital-passports/javascript-sdk');
      setDpp(new mod.DigitalPassport({ apiKey }));
      return new mod.DigitalPassport({ apiKey });
    }
    return dpp;
  };

  const listPassports = async () => {
    try {
      const sdk = await ensureDpp();
      const passports = await sdk.listPassports();
      setOutput(JSON.stringify(passports, null, 2));
    } catch (err) {
      setOutput('Error: ' + err.message);
    }
  };

  const createPassport = async () => {
    try {
      const sdk = await ensureDpp();
      const passport = await sdk.createPassport({
        sku: 'NEXTJS-EXAMPLE',
        name: 'Next.js Example Product',
        materials: [
          { name: 'Nextium', percentage: 100 }
        ]
      });
      setOutput('Created: ' + JSON.stringify(passport, null, 2));
    } catch (err) {
      setOutput('Error: ' + err.message);
    }
  };

  return (
    <div style={{ fontFamily: 'sans-serif', margin: '2em' }}>
      <h1>Digital Passport Hub SDK Next.js Example</h1>
      <label>
        API Key:
        <input value={apiKey} onChange={e => setApiKey(e.target.value)} style={{ width: 300 }} />
      </label>
      <div style={{ margin: '1em 0' }}>
        <button onClick={listPassports}>List Passports</button>
        <button onClick={createPassport}>Create Passport</button>
      </div>
      <pre style={{ background: '#f4f4f4', padding: '1em', borderRadius: 4 }}>{output}</pre>
    </div>
  );
}