Standard Integration

Learn how to receive payments on your application

Prerequisites

To get the most out of this guide, you’ll need to:

• Create an account on Creem.io
• Have your API key ready

Building on Next.js? Start with the Next.js Adapter to get fully working routes, components, and webhooks in minutes.

1. Create a product

Go over to the products tab and create a product. You can add a name, description, and price to your product. Optionally you can also add a picture to your product that will be shown to users.

Product page

Adding product details

2. Create a checkout session

Once your product is created, you can copy the product ID by clicking on the product options and selecting “Copy ID”.

Install the package:

npm

npm install @creem_io/nextjs

Then create a checkout session:

Next.js

// app/checkout/route.ts
import { Checkout } from "@creem_io/nextjs";

export const GET = Checkout({
  apiKey: process.env.CREEM_API_KEY!,
  testMode: process.env.NODE_ENV !== "production",
  defaultSuccessUrl: "/success",
});

If you are using test mode, make sure to call the test-mode API endpoint. See the Test Mode page for more details.

Read more about all attributes you can pass to a checkout sesssion here

3. Redirect user to checkout url

Next.js

`<CreemCheckout />` renders an anchor element that automatically navigates to your
checkout route—no manual redirect required. Continue to the webhook or return URL
sections to finish the flow.

Once you have created a checkout session, you will receive a checkout_url in the response. Redirect the user to this URL and that is it! You have successfully created a checkout session and received your first payment.

Best practice: Redirect in the same window

For the best user experience, redirect to the checkout URL in the same window instead of opening a new tab. Some browsers like Safari may block popups opened with target="_blank" or window.open().

// Redirect in the same window
const response = await axios.post(
  `https://api.creem.io/v1/checkouts`,
  { product_id: "prod_6tW66i0oZM7w1qXReHJrwg" },
  { headers: { "x-api-key": `creem_123456789` } }
);
window.location.href = response.data.checkout_url;

Avoid opening in new windows, as this may be blocked:

// This may be blocked by browsers
window.open(response.data.checkout_url, "_blank");

Track payments with a request ID

When creating a checkout-session, you can optionally add a request_id parameter to track the payment. This parameter will be sent back to you in the response and in the webhook events. Use this parameter to track the payment or user in your system.

Set a success URL on the checkout session

After successfully completing the payment, the user will be automatically redirected to the URL you have set on the product creation. You can bypass this setting by setting a success URL on the checkout session request by adding the success_url parameter. The user will always be redirected with the following query parameters:

• session_id: The ID of the checkout session
• product_id: The ID of the product
• status: The status of the payment
• request_id: The request ID of the payment that you optionally have sent

4. Receive payment data on your Return URL

A return URL will always contain the following query parameters, and will look like the following:

https://yourwebsite.com/your-return-path?checkout_id=ch_1QyIQDw9cbFWdA1ry5Qc6I&order_id=ord_4ucZ7Ts3r7EhSrl5yQE4G6&customer_id=cust_2KaCAtu6l3tpjIr8Nr9XOp&subscription_id=sub_ILWMTY6uBim4EB0uxK6WE&product_id=prod_6tW66i0oZM7w1qXReHJrwg&signature=044bd1691d254c4ad4b31b7f246330adf09a9f07781cd639979a288623f4394c?

You can read more about Return Urls here.

Query parameter	Description
checkout_id	The ID of the checkout session created for this payment.
order_id	The ID of the order created after successful payment.
customer_id	The customer ID, based on the email that executed the successful payment.
subscription_id	The subscription ID of the product.
product_id	The product ID that the payment is related to.
request_id	Optional The request ID you provided when creating this checkout session.
signature	All previous parameters signed by creem using your API-key, verifiable by you.

We also encourage reading on how you can verify Creem signature on return URLs here.

Need auth-aware paywalls? Pair this flow with the Better Auth integration to automatically grant or revoke user access when webhooks fire.

Expanding your integration

You can also use webhooks to check payment data dynamically in your application, without the need to wait for the return URLs, or have the user redirected to your application website.

Return URLs

Understand what you will receive when users complete a payment and get redirected back to your website.

Webhooks and Events

Set up webhooks to receive updates on your application automatically.

Better Auth Integration

Sync authentication, billing, and access rules in one place.