Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.chipipay.com/llms.txt

Use this file to discover all available pages before exploring further.

1

Setup Supabase with React

First, follow the complete Supabase React Quickstart Guide to set up your Supabase project and React integration.This will guide you through:
  • Creating a Supabase project
  • Setting up your React app with Supabase
  • Configuring environment variables
  • Creating a Supabase client
Come back here once you’ve completed the Supabase setup!
2

Migrate to Asymmetric JWT Tokens

For Chipi Pay to verify your users’ JWT tokens, your Supabase project must use asymmetric JWT signing.
  1. Go to your Supabase project dashboard
  2. Navigate to Settings > API
  3. Under “JWT Settings”, enable “Use asymmetric JWT signing”
  4. Follow the migration steps provided in the dashboard
See the Supabase JWT Signing Keys blog post for details.
3

Install the Chipi SDK

Install the Chipi Pay SDK for React:
npm install @chipi-stack/chipi-react
4

Add Environment Variables

Add your API keys to your .env file:
# Your existing Supabase variables
VITE_SUPABASE_URL=your_supabase_project_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

# Add the Chipi Variables
VITE_CHIPI_API_KEY=your_chipi_api_public_key
You can get your Chipi API keys from the Chipi Dashboard.
5

Setup the Chipi SDK Provider

Set up the Chipi Pay provider in your application:
// App.tsx

import { ChipiProvider } from "@chipi-stack/chipi-react";

export default function App() {
  return (
    <ChipiProvider config={{ apiPublicKey: import.meta.env.VITE_CHIPI_API_KEY }}>
      {/* Your app components */}
    </ChipiProvider>
  );
}
6

Creating a Wallet

Create a wallet using Supabase authentication:
// components/CreateWallet.tsx

import { useState } from "react";
import { supabase } from "../lib/supabase";
import { useCreateWallet } from "@chipi-stack/chipi-react";

export default function CreateWallet() {
  const { createWalletAsync, isLoading } = useCreateWallet();
  const [encryptKey, setEncryptKey] = useState("");

  const handleCreateWallet = async () => {
    const { data: { session } } = await supabase.auth.getSession();
    const bearerToken = session?.access_token;
    const userId = session?.user?.id;

    if (!bearerToken || !userId) {
      console.error("Please sign in first");
      return;
    }

    const response = await createWalletAsync({
      params: {
        encryptKey,
        externalUserId: userId,
      },
      bearerToken,
    });

    console.log("Wallet created:", response.publicKey);
  };

  return (
    <div>
      <input
        type="password"
        placeholder="Enter encryption key"
        value={encryptKey}
        onChange={(e) => setEncryptKey(e.target.value)}
      />
      <button onClick={handleCreateWallet} disabled={isLoading}>
        {isLoading ? "Creating..." : "Create Wallet"}
      </button>
    </div>
  );
}
7

Register JWKS in Chipi Dashboard

Register your Supabase JWKS endpoint in the Chipi Dashboard:
  1. Go to Configure > Auth Provider
  2. Select Supabase as your provider
  3. Enter your Supabase project URL
  4. Click Verify & Save
Need help? Check out our Telegram Community for support and to connect with other developers.