The Browser SDK is designed for client-side use only. Never expose your secret API key in frontend code - only use your public key.
Install the Browser SDK
npm install @chipi-stack/backend
Get your Public API Key
- Go to your API Keys in the Chipi Dashboard
- Copy your Public Key (
pk_prod_xxxx)
You only need the Public Key for frontend applications. Never use your Secret Key in client-side code.
Initialize the SDK
Create a new instance of the ChipiBrowserSDK with your public API key:import { ChipiBrowserSDK } from "@chipi-stack/backend";
const browserClient = new ChipiBrowserSDK({
apiPublicKey: "pk_prod_your_public_key",
});
Handle Authentication
The Browser SDK requires a bearer token for authentication. You’ll need to obtain this from your authentication provider:// Example with your auth system
async function getBearerToken() {
// Replace with your actual auth implementation
const token = await yourAuthProvider.getToken();
return token;
}
Create Your First Wallet
Now you can create a wallet for your users:const bearerToken = await getBearerToken();
const newWallet = await browserClient.createWallet({
params: {
encryptKey: "user-secure-pin",
externalUserId: "your-user-id-123",
chain: "STARKNET",
},
bearerToken: bearerToken,
});
console.log('New wallet created:', newWallet);
// Output: { wallet: { publicKey: "0x...", encryptedPrivateKey: "..." }, txHash: "0x..." }
Make Your First Transfer
Transfer tokens between wallets:const bearerToken = await getBearerToken();
const transferResult = await browserClient.transfer({
params: {
encryptKey: "user-secure-pin",
wallet: {
publicKey: newWallet.wallet.publicKey,
encryptedPrivateKey: newWallet.wallet.encryptedPrivateKey,
},
amount: "100",
token: "USDC",
recipient: "0x1234567890abcdef...",
},
bearerToken: bearerToken,
});
console.log('Transfer completed:', transferResult);
Environment Variables (Recommended)
For production applications, store your API key as an environment variable:# .env
VITE_CHIPI_PUBLIC_KEY=pk_prod_your_public_key # For Vite
NEXT_PUBLIC_CHIPI_API_KEY=pk_prod_your_public_key # For Next.js
REACT_APP_CHIPI_API_KEY=pk_prod_your_public_key # For Create React App
const browserClient = new ChipiBrowserSDK({
apiPublicKey: process.env.VITE_CHIPI_PUBLIC_KEY, // or your framework's env var
});
Next Steps
Now that you have the basic setup working, explore more advanced features:
Security Best Practices
- Secure your bearer tokens properly
- Validate user inputs before making API calls
