Creem

Get the api key

After you have created your account for Creem and created a store, you can get the API key from the developers tab.

Create a webhook

To sync the subscription status and other information to your database, you need to set up a webhook.

The webhook code comes ready to use with supastarter, you just have to create the webhook in the Creem dashboard and insert the URL for your project.

To configure a new webhook, go to the Webhooks page in the Creem developers tab and click the Add webhook button.

Enter a name for the webhook and set the URL to https://[yourdomain]/api/webhooks/payments.

Local development

If you want to test the webhook locally, you can use ngrok (or any other tunneling service) to create a tunnel to your local machine. Ngrok will then give you a URL that you can use to test the webhook locally.

To do so, install ngrok and run it with the following command (while your supastarter development server is running):

ngrok http 3000

This will give you a URL (see the Forwarding output) that you can use to create a webhook in Stripe. Just use that url and add /api/webhooks/stripe to it.

Add environment variables

To use the Creem integration, you only need to define the following environment variables to your .env.local as well as your production environment:

CREEM_API_KEY="" # Your Creem API key
CREEM_WEBHOOK_SECRET="" # The secret key of the webhook you created (see above)

Create products

For your users to choose from the available subscription plans, you need to create those Products first on the Products page.

Create one product per plan you want to offer. You can add multiple prices within this product to offer multiple currencies or different billing intervals.

Set up products in app

The created products have to be defined in the config/index.ts file:

export const config = {
  payments: {
		plans: {
			free: {
				isFree: true,
			},
			pro: {
				recommended: true,
				prices: [
					{
						type: "recurring",
						productId: process.env.NEXT_PUBLIC_PRODUCT_ID_PRO_MONTHLY as string,
						interval: "month",
						amount: 29,
						currency: "USD",
						seatBased: true,
						trialPeriodDays: 7,
					},
					{
						type: "recurring",
						productId: process.env.NEXT_PUBLIC_PRODUCT_ID_PRO_YEARLY as string,
						interval: "year",
						amount: 290,
						currency: "USD",
						seatBased: true,
						trialPeriodDays: 7,
					},
				],
			},
		},
	},
};

We are using envs for the product ids, so you can define different product ids for each environment, as you probably want to use the test mode for development.

Define the product ids in your .env.local and in the environment variables of your production environment:

NEXT_PUBLIC_PRODUCT_ID_PRO_MONTHLY=""
NEXT_PUBLIC_PRODUCT_ID_PRO_YEARLY=""

Learn more about the payment plans configuration in Manage plans and products documentation.

Set currency for locales in your app

Lastly you need to configure the currency that should be used for each locale in your app.

You can do this by setting the currency property for each locale in the config file.

export const config = {
  i18n: {
    // ...
    locales: {
      en: {
        currency: "USD",
        language: "en",
      },
      de: {
        currency: "EUR",
        language: "de",
      },
    },
  },
  // ...
};