Redirect to Stripe Checkout in Next.js 14

This tutorial assumes a basic understanding of Next.js 14 and Stripe libraries.

Deprecation Notice

The Stripe redirect_to_checkout method is deprecated. For more information, refer to the official Stripe documentation: Stripe Deprecated Redirect to Checkout.

Redirecting in Next.js 14

When using Next.js 14, there are several ways to redirect from a response to the correct page. This guide will show you how to do it effectively.

To redirect, use the NextResponse object in Next.js 14. When using this object, you must explicitly pass values for a given status code. For a successful response, the status code is 200. Additionally, you can provide data in the JSON response as key-value pairs.

import { NextResponse } from 'next/server'
 
export async function POST(request: Request) {
  return NextResponse.json({ redirectURL: 'www.example.com/url' }, { status: 200 })
}

After which you can access the redirectURL property on the client side as a response from your sever and do as you wish!

Refer to the Next.js documentation for more details:

Alternatively

In your code, you can also perform a direct redirect instead of a redirect that also gives JSON. When the client receives that response, it processes the information and triggers a redirect using the session details.

While the Stripe redirect_to_checkout method still works, it is not recommended to use deprecated functionality, even if it remains supported to maintain older systems.

Additional Tips

Note that the Stripe documentation primarily covers the Pages Router and not the App Router in Next.js.