Checkout SDK

npm install @lavapayments/checkout

const { open } = useLavaCheckout({
  onSuccess: ({ checkoutSessionId, customerId }) => {
    // Checkout completed — customerId is the billing relationship ID.
    // Store it in your database linked to your user.
  },
  onCancel: ({ checkoutSessionId }) => {
    // User closed the checkout overlay without completing.
  },
  onError: ({ checkoutSessionId, error }) => {
    // Session token is invalid or malformed.
  },
});

// Pass the checkout_session_token created by your backend (see below).
open(checkoutSessionToken);

import { Lava } from '@lavapayments/nodejs';

const lava = new Lava(); // reads LAVA_SECRET_KEY from env

export async function POST(request: Request) {
  const { plan_id } = await request.json();

  const session = await lava.checkoutSessions.create({
    checkout_mode: 'subscription',
    origin_url: 'https://yourapp.com',
    plan_id,
  });

  return Response.json({
    checkoutSessionToken: session.checkout_session_token,
  });
}

'use client'; // Next.js App Router

import { useLavaCheckout } from '@lavapayments/checkout';
import { useState } from 'react';

export function SubscribeButton({ planId }: { planId: string }) {
  const [loading, setLoading] = useState(false);

  const { open } = useLavaCheckout({
    onSuccess: ({ customerId }) => {
      // Store customerId in your database, linked to your user
      fetch('/api/save-customer', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ customerId }),
      });
    },
    onCancel: () => {
      // User closed checkout without completing
    },
  });

  async function handleClick() {
    setLoading(true);
    try {
      // Call your backend to create a checkout session
      const res = await fetch('/api/checkout', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ plan_id: planId }),
      });
      const { checkoutSessionToken } = await res.json();

      // Open the checkout iframe with the token from your backend
      open(checkoutSessionToken);
    } finally {
      setLoading(false);
    }
  }

  return (
    <button onClick={handleClick} disabled={loading}>
      {loading ? 'Loading...' : 'Subscribe'}
    </button>
  );
}