Getting Started with Vue, Angular, or Svelte

The @chipi-stack/backend package provides ChipiBrowserSDK for non-React frameworks. Instead of React hooks, it exposes an imperative API. You call methods directly and manage state with your framework's tools (Vue ref(), Angular services, Svelte $state). All transactions are gasless.

Install the Chipi SDK:

bashnpm install @chipi-stack/backend@latest

Works with Vue 3+, Angular 14+, Svelte 4+, SvelteKit, Nuxt, and vanilla JavaScript.

Initialize the browser SDK with your public key only:

typescriptimport { ChipiBrowserSDK } from "@chipi-stack/backend";

const browserClient = new ChipiBrowserSDK({
  publicKey: "pk_prod_YOUR_KEY",
  // NOTE: public key only. No secret key on the client
});

The browser SDK uses only the public key. Authenticate users with your own auth provider and pass the bearer token per request. Never expose sk_prod_ keys in client-side code.

The SDK works with any JavaScript framework. Use your framework's state management to store wallet data:

• - Vue: Use ref() / reactive() to store wallet state, call SDK in onMounted or event handlers
• - Angular: Inject as a service, call SDK in component methods or ngOnInit
• - Svelte: Use $state or stores to track wallet/balance, call SDK in onMount or event handlers
• - Vanilla JS: Call SDK directly, update DOM manually

All methods are async and return promises. Use await or .then() for the response.

Create a wallet:

typescriptconst result = await browserClient.createWallet({
  externalUserId: "user_123",
  chain: "STARKNET",
  walletType: "CHIPI",
  encryptKey: "user-passkey-or-pin",
  bearerToken: "your-auth-token",
});
console.log(result.publicKey, result.txHash);

Get an existing wallet:

typescriptconst wallet = await browserClient.getWallet({
  externalUserId: "user_123",
  bearerToken: "your-auth-token",
});

Every method requires a bearerToken. This is the key difference from the React hooks, which handle auth context automatically.

Transfer tokens:

typescriptconst result = await browserClient.transfer({
  encryptKey: "user-passkey-or-pin",
  walletPublicKey: "0x...",
  token: "USDC",
  recipient: "0x...",
  amount: "10",
  chain: "STARKNET",
  bearerToken: "your-auth-token",
});
console.log(result.txHash);

Purchase digital services (Mexico only):

typescriptconst result = await browserClient.purchaseSku({
  encryptKey: "user-passkey-or-pin",
  walletPublicKey: "0x...",
  skuId: "sku_123",
  reference: "5551234567",
  amount: "10",
  bearerToken: "your-auth-token",
});

• - No hooks: Use imperative method calls instead of useChipiWallet, useTransfer, etc.
• - Bearer token required: Pass bearerToken on every call (React hooks get this from context)
• - Manual state management: You manage loading states, error handling, and reactivity with your framework's tools
• - Same API surface: Method names and parameters match the server SDK
• - Client-side only: Uses pk_prod_ key. For webhook verification or secret key operations, use a backend with ChipiServerSDK
• - Default to walletType: "CHIPI" for session key support
• - All transactions gasless through Chipi
• - USDC has 6 decimals, ETH/STRK have 18 decimals