Next.js Integration

Integrate Easy SDK with Next.js API routes and server components.

Setup

Create a utility file to initialize the client:

// lib/easy-client.ts
import { createClient } from "@easylabs/node";

let easyClient: any = null;

export async function getEasyClient() {
  if (!easyClient) {
    easyClient = await createClient({
      apiKey: process.env.EASY_API_KEY!,
    });
  }
  return easyClient;
}

API Routes (App Router)

Customer Management

// app/api/customers/route.ts
import { NextRequest, NextResponse } from "next/server";
import { getEasyClient } from "@/lib/easy-client";

export async function GET(request: NextRequest) {
  try {
    const easy = await getEasyClient();
    const searchParams = request.nextUrl.searchParams;
    const limit = Number(searchParams.get("limit")) || 10;
    const offset = Number(searchParams.get("offset")) || 0;

    const customers = await easy.getCustomers({ limit, offset });
    return NextResponse.json(customers);
  } catch (error: any) {
    return NextResponse.json({ error: error.message }, { status: 500 });
  }
}

export async function POST(request: NextRequest) {
  try {
    const easy = await getEasyClient();
    const body = await request.json();

    const customer = await easy.createCustomer(body);
    return NextResponse.json(customer, { status: 201 });
  } catch (error: any) {
    return NextResponse.json({ error: error.message }, { status: 400 });
  }
}

Dynamic Routes

// app/api/customers/[id]/route.ts
import { NextRequest, NextResponse } from "next/server";
import { getEasyClient } from "@/lib/easy-client";

export async function GET(
  request: NextRequest,
  { params }: { params: { id: string } },
) {
  try {
    const easy = await getEasyClient();
    const customer = await easy.getCustomer(params.id);
    return NextResponse.json(customer);
  } catch (error: any) {
    return NextResponse.json({ error: error.message }, { status: 404 });
  }
}

export async function PATCH(
  request: NextRequest,
  { params }: { params: { id: string } },
) {
  try {
    const easy = await getEasyClient();
    const body = await request.json();

    const updated = await easy.updateCustomer(params.id, body);
    return NextResponse.json(updated);
  } catch (error: any) {
    return NextResponse.json({ error: error.message }, { status: 400 });
  }
}

Checkout Route

// app/api/checkout/route.ts
import { NextRequest, NextResponse } from "next/server";
import { getEasyClient } from "@/lib/easy-client";

export async function POST(request: NextRequest) {
  try {
    const easy = await getEasyClient();
    const body = await request.json();

    const result = await easy.checkout({
      customer_creation: body.isNewCustomer,
      ...(body.isNewCustomer
        ? { customer_details: body.customerData }
        : { identity_id: body.customerId }),
      source: body.paymentToken
        ? {
            type: "PAYMENT_CARD",
            tokenId: body.paymentToken,
            name: "Customer Card",
          }
        : body.paymentInstrumentId,
      line_items: body.lineItems,
      metadata: body.metadata,
    });

    return NextResponse.json({ success: true, order: result.data });
  } catch (error: any) {
    return NextResponse.json(
      { success: false, error: error.message },
      { status: 500 },
    );
  }
}

Pages Router (Legacy)

Customer Routes

// pages/api/customers/index.ts
import { NextApiRequest, NextApiResponse } from "next";
import { getEasyClient } from "@/lib/easy-client";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse,
) {
  const easy = await getEasyClient();

  if (req.method === "GET") {
    try {
      const { limit = 10, offset = 0 } = req.query;
      const customers = await easy.getCustomers({
        limit: Number(limit),
        offset: Number(offset),
      });
      res.json(customers);
    } catch (error: any) {
      res.status(500).json({ error: error.message });
    }
  } else if (req.method === "POST") {
    try {
      const customer = await easy.createCustomer(req.body);
      res.status(201).json(customer);
    } catch (error: any) {
      res.status(400).json({ error: error.message });
    }
  } else {
    res.status(405).end();
  }
}

// pages/api/customers/[id].ts
import { NextApiRequest, NextApiResponse } from "next";
import { getEasyClient } from "@/lib/easy-client";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse,
) {
  const easy = await getEasyClient();
  const { id } = req.query as { id: string };

  if (req.method === "GET") {
    try {
      const customer = await easy.getCustomer(id);
      res.json(customer);
    } catch (error: any) {
      res.status(404).json({ error: error.message });
    }
  } else if (req.method === "PATCH") {
    try {
      const updated = await easy.updateCustomer(id, req.body);
      res.json(updated);
    } catch (error: any) {
      res.status(400).json({ error: error.message });
    }
  } else {
    res.status(405).end();
  }
}

Server Components

// app/customers/page.tsx
import { getEasyClient } from '@/lib/easy-client';

export default async function CustomersPage() {
  const easy = await getEasyClient();
  const customers = await easy.getCustomers({ limit: 50 });

  return (
    <div>
      <h1>Customers</h1>
      <ul>
        {customers.data.map((customer) => (
          <li key={customer.id}>
            {customer.first_name} {customer.last_name} - {customer.email}
          </li>
        ))}
      </ul>
    </div>
  );
}

Server Actions

// app/actions/customers.ts
"use server";

import { getEasyClient } from "@/lib/easy-client";
import { revalidatePath } from "next/cache";

export async function createCustomer(formData: FormData) {
  const easy = await getEasyClient();

  const customer = await easy.createCustomer({
    first_name: formData.get("firstName") as string,
    last_name: formData.get("lastName") as string,
    email: formData.get("email") as string,
  });

  revalidatePath("/customers");
  return customer;
}

export async function updateCustomer(id: string, data: any) {
  const easy = await getEasyClient();
  const updated = await easy.updateCustomer(id, data);
  revalidatePath("/customers");
  return updated;
}

Environment Variables

# .env.local
EASY_API_KEY=easy_sk_your_secret_key
NEXT_PUBLIC_EASY_PUBLISHABLE_KEY=easy_pk_your_publishable_key

Complete Example: Checkout Page

// app/checkout/page.tsx
'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';

export default function CheckoutPage() {
  const router = useRouter();
  const [loading, setLoading] = useState(false);

  const handleCheckout = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);

    try {
      const response = await fetch('/api/checkout', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          isNewCustomer: true,
          customerData: {
            first_name: 'John',
            last_name: 'Doe',
            email: '[email protected]',
          },
          paymentToken: 'tok_123',
          lineItems: [{ price_id: 'price_123', quantity: 1 }],
        }),
      });

      const result = await response.json();

      if (result.success) {
        router.push(`/orders/${result.order.id}`);
      }
    } catch (error) {
      console.error('Checkout failed:', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleCheckout}>
      {/* Checkout form fields */}
      <button type="submit" disabled={loading}>
        {loading ? 'Processing...' : 'Complete Purchase'}
      </button>
    </form>
  );
}