Build your own checkout

Mollie provides a hosted checkout system out of the box. Your Mollie integration can be as simple as creating a payment request, sending your customer to our checkout, and letting us handle the rest.

The guide on accepting payments is a good starting point for this basic payment flow.

If you are using an e-commerce platform, chances are we also provide a module for it that offers a deeper checkout experience than this hosted checkout flow.

If, however, you are keen on building your own checkout experience, then read on.

The common checkout path

The most common checkout path can be broken down into a handful of steps.

The steps are roughly as follows:

1. Your customer wants to check out.
2. After setting up a payment using the Create payment endpoint, you send your customer to our payment method selection screen.
3. Depending on the payment method, your customer may need to provide additional information.
4. Depending on the payment method, the customer may need to authenticate the transaction with their bank or card issuer.
5. The customer completes the payment, you receive a webhook, and the customer is sent back to your website.

Embedding method selection

A good first step towards a deeper checkout integration is to provide your own payment method selection.

To accomplish this, first use the List payment methods endpoint on the Methods API to retrieve the payment methods currently active on your account.

Once your customer has selected a payment method, use that selection to fill out the method field in the Create payment endpoint.

Deeper payment method integrations

The next steps for a deeper integration depend on which payment methods you are looking to offer. The below list gives an overview of the typical flow for each of our payment methods, and how they can be integrated further.

Method	Customer-facing flow	Deeper integration
Apple Pay	Customer selects Apple Pay at checkout using the dedicated Apple Pay button. Customer verifies their payment with their Apple device’s native authentication. Customer returns to the webshop.	The Apple Pay button (step 1) can be integrated using the Wallets API.
Bancontact	Customer selects Bancontact at checkout. Customer gets redirected to Bancontact to verify their payment with their bank credentials or to complete via QR. Customer returns to the webshop.	No deeper integration possible.
Bank transfer	Customer selects Bank transfer at checkout. Customer gets redirected to Mollie, where the bank transfer details are shown. Customer returns to the webshop. Customer completes the payment manually via their bank.	The bank transfer details (step 2) are returned by the Payments API when setting up the payment. They can be integrated directly, skipping the need for a redirect.
Credit card	Customer selects credit card at checkout. Customer enters their credit card details. Customer may get redirected to their card issuer to verify their payment with 3-D Secure. Customer returns to the webshop.	The credit card detail screen (step 2) can be integrated using Mollie Components. See Embedding credit card fields below.
EPS	Customer selects EPS at checkout. Customer gets redirected to EPS to select their bank. Customer gets redirected to their bank to verify their payment with their bank credentials. Customer returns to the webshop.	No deeper integration possible.
giropay	Customer selects EPS at checkout. Customer gets redirected to giropay to verify their payment with their bank credentials. Customer returns to the webshop.	No deeper integration possible.
iDEAL	Customer selects iDEAL at checkout. Customer gets redirected to Mollie to select their bank or to complete via QR. Customer gets redirected to their bank to verify their payment with their bank credentials. Customer returns to the webshop.	The issuer selection screen (step 2) can be integrated using the Methods API. See Embedding issuer selection below. The QR flow (step 2) can also be integrated using the QR embed in the Payments API. See the QR codes guide for details.
in3	Customer selects in3 at checkout. Customer gets redirected to in3 to pay the first instalment. Customer returns to the webshop.	No deeper integration possible.
KBC/CBC	Customer selects KBC/CBC at checkout. Customer gets redirected to Mollie to select their bank. Customer gets redirected to their bank to verify their payment with their bank credentials. Customer returns to the webshop.	The issuer selection screen (step 2) can be integrated using the Methods API. See Embedding issuer selection below.
Klarna: Pay now Klarna: Pay later Klarna: Slice it	Customer selects a Klarna payment method at checkout. Customer gets redirected to Klarna to verify their payment with their Klarna account, or by supplying additional information. Customer returns to the webshop.	No deeper integration possible.
PayPal	Customer selects PayPal or PayPal Express Checkout at checkout. For non-express PayPal payments, customer gets redirected to PayPal to verify their payment with their PayPal account. Customer returns to the webshop.	When using the Orders API, you can integrate the PayPal Express Checkout button directly in your checkout for an even faster checkout process. See the Orders guide for details.
paysafecard	Customer selects paysafecard at checkout. Customer gets redirected to paysafecard to verify their payment with their prepaid card. Customer returns to the webshop.	No deeper integration possible.
Przelewy24	Customer selects Przelewy24 at checkout. Customer gets redirected to Przelewy24 to select their bank. Customer gets redirected to their bank to verify their payment with their bank credentials. Customer returns to the webshop.	No deeper integration possible.
SOFORT	Customer selects SOFORT at checkout. Customer gets redirected to SOFORT to select their bank. Customer verifies their payment with their bank credentials. Customer returns to the webshop.	No deeper integration possible.

Embedding credit card fields

For the credit card payment method, you can fully embed the credit card input fields while staying PCI-DSS-compliant using Mollie Components. Refer to the guide on Mollie Components for more information on how to integrate.

Embedding issuer selection

For iDEAL, KBC/CBC, and gift cards, we offer a way to embed the issuer selection into the checkout flow. You can retrieve the available issuers for these payment methods using the issuers include in the Methods API.

Once your customer has selected an issuer, use that selection to fill out the issuer field in the Create payment endpoint.