Skip to main content
More in Learn

Mollie Payment Integration

Mollie is a service specialize in processing online payments on behalf of merchants (e.g. webshop owners). Follow the steps of this guide to set up Mollie payments in our NextJS eCommerce boilerplate.

Getting Mollie credentials

In order to get started with Mollie, you need to sign up for their services, create a website profile. After getting an account, you need to create API (use the Test API key to test your first payments) keys which you need to store in your .env file:

MOLLIE_API_KEY=your-mollie-api-key

Note: you have to generate a Crystallize secret token and secret token id to your project follow the steps to generate Crystallize access tokens and add the variables to your .env file:

CRYSTALLIZE_SECRET_TOKEN_ID=your-secret-token-id
CRYSTALLIZE_SECRET_TOKEN=your-secret-token

Add your preffered payment methods

In order to create a payment in Mollie, you need to select the available options for your customers. You need at least one active to enable the checkout in the boilerplate. You can do so via Mollie’s dashboard, under Settings/Website Profiles/Payment methods

Adding a default Currency

Mollie support payments in ISO 4217 format. Crystallize is very flexible on creating a pricing variant, allowing you to add and name any kind of currency. e.g. Euros could be defined as €, Euro, EURO, EUR, etc.

Mollie API expects only ISO 4217 format on order creation, you may want to either create your Crystallize currencies following that format, or pass the environment variable:

MOLLIE_DEFAULT_CURRENCY=EUR

Initiating payment

In the init payment endpoint default in the NextJS eCommerce boilerplate is src/pages/api/payment-providers/mollie/create-payment.js, this is the typical flow you want to follow:

  • Create a Crystallize order for the customer and the basket contents.
  • Select Mollie as the payment option in the checkout.
  • Receive an URL back from Mollie for where to redirect the user to approve the payment.

Note: while you are developing this on your local machine, you need an HTTP proxy so that Mollie can call your local machine, like ngrok, once ngrok is running add the HTTP forwarding URL as an env variable in your .env file:

NGROK_URL=your-ngrock-url

User payment confirmation

Once you click Mollie as payment in the checkout you will see the Mollie test transaction page select paid and then click continue you will be redirected to the order confirmation page.

mollie payment confirmation page

Order confirmation

After the customer has confirmed the purchase, they will be redirected back to the shop for a confirmation. The default in the NextJS eCommerce boilerplate is src/pages/confirmation/mollie/[orderId].js.

mollie order confirmation from Crystallize Nextjs Boilerplate

By default, the payment information can be used to update the order in Crystallize under /src/pages/api/payment-providers/mollie/order-update.js. Here you can choose if you would like to store extra information.


Next steps

What happens now is totally up to how you run your business. We advise you to set up proper fulfilment pipelines to orchestrate the orders, which you can use to manage the order fulfilment in a structured and automated way.

Read more about orders and fulfilment or watch our live stream where we demonstrate how Vipps payments (another payment method) work in our boilerplate.

People showing thumbs up

Need further assistance?

Ask the Crystallize team or other enthusiasts in our slack community.

Join our slack community