The Missing Cart Recovery for Next.js Commerce

Built for the React framework. Retake's TypeScript SDK integrates seamlessly with Next.js App Router, Server Actions, and API Routes.

Start Integration View Documentation

How to integrate Next.js with Retake

Install the SDK

Install the Retake SDK in your Next.js project.

npm install @retakeapi/js

Set Environment Variables

Add your Retake API key to your environment variables.

# .env.local
RETAKE_API_KEY=sk_live_your_key_here

Create a Server Action

Create a Server Action to track checkout intents securely.

// app/checkout/actions.ts
'use server'

import { Retake } from '@retakeapi/js';

const retake = new Retake({
  apiKey: process.env.RETAKE_API_KEY!
});

export async function trackCheckoutIntent(formData: FormData) {
  await retake.track({
    type: "checkout",
    userId: formData.get('userId') as string,
    email: formData.get('email') as string,
    value: parseFloat(formData.get('total') as string)
  });
}

Add to Checkout Form

Wire up the tracking action to your checkout form.

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

import { trackCheckoutIntent } from './actions';

export default function CheckoutPage() {
  return (
    <form action={trackCheckoutIntent}>
      <input name="email" type="email" required />
      <input name="total" type="hidden" value={cart.total} />
      <button type="submit">Continue to Payment</button>
    </form>
  );
}

Next.js Features

First-class TypeScript support

Works with Server Components and Server Actions

Zero client-side bundle impact

Compatible with any headless commerce backend

Edge runtime compatible