Next.js SDK

v1.0.0

The easiest way to integrate Retake into your Next.js app. Includes hooks for everything.

Install SDK GitHub

Simple Hooks

Auto Saving

Type-Safe

Fast Setup

Installation

bash

npm install @retakeapi/nextjs

1. Create Server Route

Required

Create a file at app/api/retake/route.ts to handle secure communication.

app/api/retake/route.ts

typescript

import { createRetakeHandler } from '@retakeapi/nextjs/server';

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

2. Add Provider

Add this to your root layout so the hooks work everywhere.

app/layout.tsx

tsx

// app/layout.tsx
import { RetakeProvider } from '@retakeapi/nextjs/client';

export default function RootLayout({ children }) {
  // Just wrap your app once
  return (
    <RetakeProvider endpoint="/api/retake">
      {children}
    </RetakeProvider>
  );
}

3. Track Activity

SaaS: Track Interest

Track when users view your pricing page or start checkout.

tsx

// components/PricingTable.tsx
"use client";
import { useIntentTracking } from '@retakeapi/nextjs/client';

export function PricingTable({ user }) {
  // Track whenever someone interacts with a plan
  const trackInterest = (planName, price) => {
    useIntentTracking({
      type: 'pricing',
      userId: user.id,
      email: user.email,
      value: price,
      metadata: { plan: planName }
    });
  };

  return (
    <div className="pricing-card" onMouseEnter={() => trackInterest("Pro", 99)}>
       {/* ... */}
    </div>
  );
}

Shop: Track Cart

Automatically tracks cart changes. We handle the saving logic for you.

tsx

// components/Cart.tsx
"use client";
import { useCartTracking } from '@retakeapi/nextjs/client';

export function Cart({ items, user }) {
  // We handle the complex logic (debouncing, updates) for you
  useCartTracking({
    items: items,
    total: calculateTotal(items),
    customerEmail: user.email,
    customerName: user.name
  });

  return <div>{/* Your cart UI */}</div>;
}

4. Checkout & Conversion

Redirect to Payment

Track the "Checkout" event right before you send them to Stripe.

tsx

// components/CheckoutButton.tsx
"use client";
import { useIntentTracking } from '@retakeapi/nextjs/client';

export function CheckoutButton({ user, amount }) {
  const { track } = useIntentTracking(); // You can also get the direct track function

  const handleCheckout = async () => {
    // 1. Track checkout intent
    await track({
      type: 'checkout',
      userId: user.id,
      email: user.email,
      value: amount,
      metadata: { provider: 'stripe' }
    });

    // 2. Redirect to Stripe
    window.location.href = '/api/stripe/checkout';
  };

  return <button onClick={handleCheckout}>Pay Now</button>;
}

Success Page

Use useConversionTracking on your thank you page to stop emails.

tsx

// app/success/page.tsx
"use client";
import { useConversionTracking } from '@retakeapi/nextjs/client';

export default function SuccessPage({ searchParams }) {
  // Trigger conversion when this page loads
  useConversionTracking({
    userId: searchParams.userId,
    value: parseFloat(searchParams.amount),
    transactionId: searchParams.session_id
  });

  return <h1>Thanks for your purchase!</h1>;
}

5. Auto Recovery (The Magic Part)

When a user clicks "Recover Session" in their email, we handle the rest. Just use this hook to get the data back.

tsx

// app/page.tsx
"use client";
import { useAutoRecovery } from '@retakeapi/nextjs/client';

export default function HomePage() {
  // 1. Check if user is coming from a recovery email
  const { intent, isLoading } = useAutoRecovery();

  useEffect(() => {
    if (intent) {
      toast.success("Welcome back! Recovered your session.");
      
      // Handle different intent types
      if (intent.type === 'cart') {
          updateCart(intent.items);
          router.push('/checkout');
      }
      
      if (intent.type === 'upgrade') {
          // Open the upgrade modal or pricing view
          setPricingModalOpen(true);
      }
    }
  }, [intent]);

  return <main>...</main>;
}

Available Hooks

useIntentTracking()

The universal hook. Use this to track anything (Pricing view, Upgrade click, etc).

useCartTracking()

Specialized for shopping carts. Just pass it your items array and we do the rest.

useConversionTracking()

Helper hook to trigger a conversion event on component mount.

useAutoRecovery()

Detects when a user is returning from a recovery email and gives you their data.

View REST API Reference

Learn

All Recipes

API & SDKs