Skip to Content
SetupNext.Js

Next.js Setup

Learn how to integrate Okito payments into your Next.js application using the @okito/core package.

Installation

Install the required dependencies:

npm install @okito/core
# or
yarn add @okito/core
# or
pnpm add @okito/core

Project Structure

The suggested project structure for Next.js is:

your-nextjs-app/
├── app/
│   ├── api/
│   │   └── okito/
│   │       └── route.ts          # Payment session creation
│   │       └── webhook/
│   │           └── route.ts      # Webhook handling
│   ├── page.tsx                  # Your main page with BuyButton
│   └── layout.tsx
├── package.json
└── .env.local                    # Environment variables

Environment Variables

Create a .env.local file in your project root:

OKITO_API_KEY=your_okito_api_key_here
OKITO_WEBHOOK_SECRET=your_webhook_secret_here

Backend API Route

Create the payment session API route at app/api/okito/route.ts:

import { createPaymentSession } from "@okito/core";
import { NextRequest, NextResponse } from "next/server";
 
export async function POST(req: NextRequest) {
  const body = await req.json();
  const { products } = body;
 
  const apiKey = process.env.OKITO_API_KEY;
  if (!apiKey) {
    return NextResponse.json({
      error: "API key is required",
    }, { status: 400 });
  }
 
  const session = await createPaymentSession({ products, apiKey: apiKey });
 
  if (!session) {
    return NextResponse.json({
      error: "Failed to create payment session",
    }, { status: 500 });
  }
 
  return NextResponse.json(session, { status: 200 });
}

Webhook Handler

Create the webhook handler at app/api/okito/webhook/route.ts:

import { NextRequest, NextResponse } from "next/server";
 
export async function POST(req: NextRequest) {
  // Simple auth header verification
  const authHeader = req.headers.get('Authorization');
  
  if (!authHeader || authHeader !== process.env.OKITO_WEBHOOK_SECRET) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
  }
  
  // Process your webhook data however you want
  const data = await req.json();
  console.log('Webhook received:', data);
  
  return NextResponse.json({ received: true });
}

This webhook handler:

  • Validates the Authorization header against your OKITO_WEBHOOK_SECRET environment variable
  • Processes incoming webhook data from Okito
  • Returns a success response

Frontend Integration

Basic BuyButton Usage

Add the BuyButton component to your page:

"use client";
 
import { BuyButton } from "@okito/core/react";
 
export default function Home() {
  return (
    <BuyButton
      config={{
        backendUrl: "/api/okito",
        callbackUrl: `${process.env.NEXT_PUBLIC_APP_URL}/success`,
        products: [
          { name: "Test Product", price: 0.1 },
        ],
      }}
      label="Test Payment"
    />
  );
}

For detailed configuration options and all available props, see the BuyButton Configuration page.

Support

Need help? Reach out to us:

Last updated on
ConfigurationExpress