Skip to main content

​
What is a Customer Portal?

After every successful payment, your customers will receive an email with a link to their Customer Portal. This portal allows them to manage their subscriptions, payment methods, and personal information. This email contains a magic link, to a completely different authentication mechanism, in which they are able to access their account which allows them to execute the aforementioned actions.
If you’re building with Next.js, the @creem_io/nextjs adapter ships a <CreemPortal /> component and Portal route helper so users can open the portal directly from your dashboard without touching the REST API.

​
What can customers do in the Customer Portal?

​
1. Cancel a subscription

Upon entering the Customer Portal, customers can cancel their subscriptions by selecting an active subscription, and clicking on the Manage Subscription button. This will open a details sheet on the right side of the screen, where a Cancel Subscription button is available. This will immediately cancel their subscription and they will no longer be charged for it.

​
2. Request Invoice or Support

Customers using the customer portal, can copy all details of a specific payment, including order_ID and request support from Creem team directly without contacting the merchant.

​
3. Generate Customer Portal Access Programmatically

You can generate a customer portal link for your users programmatically, allowing them to manage their subscriptions directly from your application.
  • Next.js
  • TypeScript SDK
  • Better Auth
  • REST API
Step 1: Create the Portal Route
// app/portal/route.ts
import { Portal } from "@creem_io/nextjs";

export const GET = Portal({
  apiKey: process.env.CREEM_API_KEY!,
  testMode: process.env.NODE_ENV !== "production",
});
Step 2: Use the Component
// components/ManageSubscriptionButton.tsx
"use client";

import { CreemPortal } from "@creem_io/nextjs";

export function ManageSubscriptionButton({
  customerId,
}: {
  customerId: string;
}) {
  return (
    <CreemPortal customerId={customerId}>
      <button className="btn-primary">
        Manage Subscription
      </button>
    </CreemPortal>
  );
}

Next.js Adapter Documentation

Learn more about the Portal component and route helper.