Skip to main content
1

Setup Supabase with Next.js

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

Migrate to Asymmetric JWT Tokens

For enhanced security, migrate your Supabase project to use asymmetric JWT tokens as described in the Supabase JWT Signing Keys blog post.
  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
This ensures your JWT tokens are signed with asymmetric keys for better security.
3

Install the Chipi SDK

Now install the Chipi Pay SDK:
npm install @chipi-stack/nextjs
4

Add Chipi Environment Variables

Add your Chipi API key to your .env.local file (alongside your existing Supabase variables):
# Your existing Supabase variables
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_OR_ANON_KEY=your_supabase_anon_key

# Add the Chipi Variables
NEXT_PUBLIC_CHIPI_API_KEY=your_chipi_api_public_key
CHIPI_SECRET_KEY=your_chipi_api_secret_key
5

Setup the Chipi SDK Provider

Set up the Chipi Pay provider in your application:
// app/layout.tsx
"use client";

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

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <ChipiProvider>{children}</ChipiProvider>
      </body>
    </html>
  );
}
6

Creating a Wallet

Create a wallet creation component using Supabase authentication:
// app/components/CreateWallet.tsx
"use client";

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

export default function CreateWallet() {
  const client = createClient();
  const { createWalletAsync, isLoading } = useCreateWallet();
  const [encryptKey, setEncryptKey] = useState("");
  const [error, setError] = useState("");
  const [success, setSuccess] = useState("");

  const handleCreateWallet = async () => {
    if (!encryptKey) {
      setError("Please enter an encryption key");
      return;
    }

    try {
      setError("");
      setSuccess("");

      const sessionData = (await client.auth.getSession()).data.session;
      const bearerToken = sessionData?.access_token;
      const user = sessionData?.user;

      if (!user || !bearerToken) {
        setError("Supabase user not found. Please sign in first.");
        return;
      }

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

      console.log("createWalletResponse", response);
      setSuccess(
        `Wallet created successfully! Public Key: ${response.wallet.publicKey}`
      );
      setEncryptKey("");
    } catch (error) {
      setError(error.message || "Failed to create wallet");
      console.error("Error creating wallet:", error);
    }
  };

  return (
    <div className="space-y-4 p-4 border rounded-lg">
      <h2 className="text-xl font-semibold">Create Wallet</h2>

      {error && <div className="text-red-500 text-sm">{error}</div>}
      {success && <div className="text-green-500 text-sm">{success}</div>}

      <div className="space-y-2">
        <input
          type="password"
          placeholder="Enter encryption key"
          value={encryptKey}
          onChange={(e) => setEncryptKey(e.target.value)}
          className="w-full p-2 border rounded"
        />

        <button
          onClick={handleCreateWallet}
          disabled={isLoading || !encryptKey}
          className="bg-blue-500 text-white px-4 py-2 rounded disabled:opacity-50 w-full"
        >
          {isLoading ? "Creating..." : "Create Wallet"}
        </button>
      </div>
    </div>
  );
}
7

Celebrate & Learn More!

That’s it! You should now have an initial working version of Chipi Pay integrated into your application. You can now start implementing various features like:
  • Wallet Creations
  • Sending tokens
  • Signing transactions
  • and more!
Need help? Check out our Telegram Community for support and to connect with other developers.