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/payments 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 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 numberFormats[<lang>].currency.style variables in the apps/web/i18n.config.ts file.

export default defineI18nConfig(() => ({
  // ...
  numberFormats: {
    en: {
      currency: {
        style: "currency",
        currency: "USD",
        notation: "standard",
      },
      // ...
    },
 
    // 'de' and other languages...
  },
}));