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.

https://assets.docs.mollie.com/_images/checkout-flow-common-with-details@2x.png

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.

https://assets.docs.mollie.com/_images/checkout-flow-embedded-method-selection@2x.png

To accomplish this, first use 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
  1. Customer selects Apple Pay at checkout using the dedicated Apple Pay button.
  2. Customer verifies their payment with their Apple device’s native authentication.
  3. Customer returns to the webshop.
The Apple Pay button (step 1) can be integrated using the Wallets API.
Bancontact
  1. Customer selects Bancontact at checkout.
  2. Customer gets redirected to Bancontact to verify their payment with their bank credentials or to complete via QR.
  3. Customer returns to the webshop.
No deeper integration possible.
Bank transfer
  1. Customer selects Bank transfer at checkout.
  2. Customer gets redirected to Mollie, where the bank transfer details are shown.
  3. Customer returns to the webshop.
  4. 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
  1. Customer selects credit card at checkout.
  2. Customer enters their credit card details.
  3. Customer may get redirected to their card issuer to verify their payment with 3-D Secure.
  4. 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
  1. Customer selects EPS at checkout.
  2. Customer gets redirected to EPS to select their bank.
  3. Customer gets redirected to their bank to verify their payment with their bank credentials.
  4. Customer returns to the webshop.
No deeper integration possible.
giropay
  1. Customer selects EPS at checkout.
  2. Customer gets redirected to giropay to verify their payment with their bank credentials.
  3. Customer returns to the webshop.
No deeper integration possible.
iDEAL
  1. Customer selects iDEAL at checkout.
  2. Customer gets redirected to Mollie to select their bank or to complete via QR.
  3. Customer gets redirected to their bank to verify their payment with their bank credentials.
  4. 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.
KBC/CBC
  1. Customer selects KBC/CBC at checkout.
  2. Customer gets redirected to Mollie to select their bank.
  3. Customer gets redirected to their bank to verify their payment with their bank credentials.
  4. 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 later
  1. Customer selects Pay later at checkout.
  2. Customer gets redirected to Klarna to verify their payment with their Klarna account, or by supplying additional information.
  3. Customer returns to the webshop.
No deeper integration possible.
Klarna: Slice it
  1. Customer selects Slice it at checkout.
  2. Customer gets redirected to Klarna to verify their payment instalment plan with their Klarna account, or by supplying additional information.
  3. Customer returns to the webshop.
No deeper integration possible.
PayPal
  1. Customer selects PayPal or PayPal Express Checkout at checkout.
  2. For non-express PayPal payments, customer gets redirected to PayPal to verify their payment with their PayPal account.
  3. 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
  1. Customer selects paysafecard at checkout.
  2. Customer gets redirected to paysafecard to verify their payment with their prepaid card.
  3. Customer returns to the webshop.
No deeper integration possible.
Przelewy24
  1. Customer selects Przelewy24 at checkout.
  2. Customer gets redirected to Przelewy24 to select their bank.
  3. Customer gets redirected to their bank to verify their payment with their bank credentials.
  4. Customer returns to the webshop.
No deeper integration possible.
SOFORT
  1. Customer selects SOFORT at checkout.
  2. Customer gets redirected to SOFORT to select their bank.
  3. Customer verifies their payment with their bank credentials.
  4. Customer returns to the webshop.
No deeper integration possible.

Embedding credit card fields

https://assets.docs.mollie.com/_images/checkout-flow-embedded-credit-card-fields@2x.png

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

Embedding issuer selection

https://assets.docs.mollie.com/_images/checkout-flow-embedded-ideal-issuer-selection@2x.png

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.