KiraPay SDK with Next.js

A simple guide to integrate KiraPay API into your Next.js application. For more detailed information check SDK documentation here.

1: Setup Next.js Project

npx create-next-app@latest kirapay-sdk
cd kirapay-sdk

When prompted, select: ✅ TypeScript ✅ Tailwind CSS ✅ App Router

2: Install KiraPay SDK

npm install kirapay-merchant-sdk

3: Setup Environment Variables

Create .env.local in your project root:

NEXT_PUBLIC_KIRAPAY_API_KEY=your_api_key_here

You can get your API key from the KiraPay Dashboard.

4: Create Payment Component

Replace src/app/page.tsx with:

'use client';
import { useEffect, useRef } from 'react';
import { ButtonDynamicPrice } from 'kirapay-merchant-sdk/dist/kirapay-merchant-sdk.esm.js';

export default function Home() {
  const buttonRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const button = new ButtonDynamicPrice({
      price: 50,
      apiKey: process.env.NEXT_PUBLIC_KIRAPAY_API_KEY || '',
      title: 'Pay $50',
      style: {
        backgroundColor: '#3b82f6',
        color: 'white',
        padding: '12px 24px',
        borderRadius: '8px',
        fontSize: '16px',
        cursor: 'pointer',
        border: 'none'
      }
    });

    if (buttonRef.current) {
      buttonRef.current.appendChild(button.render());
    }

    return () => button.destroy();
  }, []);

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-100">
      <div className="bg-white p-8 rounded-lg shadow-lg">
        <h1 className="text-2xl font-bold mb-4">Make a Payment</h1>
        <div ref={buttonRef}></div>
      </div>
    </div>
  );
}

5: Run Your App

npm run dev

Open http://localhost:3000 and click the payment button to test.

Customize Payment Button

Change button style:

style: {
  backgroundColor: '#10b981',  // Green
  color: 'white',
  padding: '16px 32px',        // Larger
  borderRadius: '12px',        // More rounded
  fontSize: '18px',
  fontWeight: '600',
  cursor: 'pointer',
  border: 'none'
}

That's It!

You now have a working payment system with KiraPay and Next.js.