RetakeRetake
Menu
RetakeRetake

Learn

IntroductionCore ConceptsQuickstartAI IDE IntegrationNew

All Recipes

E-commerce CartSaaS Drop-offSubscription BillingGuest CheckoutPricing PageTrial ExpiringPayment FailedShopifySoonWooCommerceSoon

API & SDKs

Dashboard
Support

Quick Start

Get Retake running in your Next.js app in 5 minutes. Follow these steps to start tracking purchase intent.

1

Get Your API Key

Takes 30 seconds. No credit card. You'll have your key immediately.

Get My API Key
2

Install the SDK

Add our official packages to your Next.js project.

bash
npm install @retakeapi/js @retakeapi/nextjs
# or
pnpm add @retakeapi/js @retakeapi/nextjs
3

Create API Route

Create a secure server-side endpoint. Your API key stays safe here.

typescript
// 1. Create API Route (app/api/retake/route.ts)
import { createRetakeHandler } from '@retakeapi/nextjs/server';

export const POST = createRetakeHandler(process.env.RETAKE_API_KEY!);
4

Add Provider

Wrap your app with the Retake provider.

typescript
// 2. Add Provider (app/layout.tsx)
import { RetakeProvider } from '@retakeapi/nextjs/client';

export default function Layout({ children }) {
  return (
    <html>
      <body>
        {/* Everything inside gets tracking superpowers */}
        <RetakeProvider endpoint="/api/retake">
          {children}
        </RetakeProvider>
      </body>
    </html>
  );
}
5

Track Cart & Orders

Use hooks in your components. Auto-debounce, session management, everything handled.

typescript
// 3. Auto-Track Cart (components/cart.tsx)
"use client";
import { useCartTracking, useOrderComplete } from '@retakeapi/nextjs/client';

function Cart({ items, user }) {
  // ✨ Magic: Auto-tracks cart changes with debounce
  // No need to write complex useEffects
  useCartTracking({
    items,
    total: items.reduce((sum, i) => sum + i.price * i.quantity, 0),
    customerEmail: user?.email,
    customerName: user?.name,
    currency: 'USD'
  });

  const { track: trackOrder, isLoading } = useOrderComplete();

  async function handleCheckout() {
    const orderId = await processPayment();
    
    // Stop recovery emails immediately
    await trackOrder(orderId, calculateTotal());
  }

  return (
    <button onClick={handleCheckout} disabled={isLoading}>
      Complete Purchase
    </button>
  );
}