# Integrate iDEAL payments

iDEAL is a payment method that enables customers to complete online payments using their bank credentials. It is a preferred online payment method in the Netherlands.

This tutorial guides you on using Chargebee.js to integrate iDEAL on your website, and creating a subscription after the user checks out.

# Prerequisites

Follow these steps to integrate iDEAL payments to your website.

# 1. (Backend) Set up Chargebee

Use any of these client libraries to set up Chargebee in your backend.

# 2. Create a payment_intent

payment_intent performs the essential function of tracking different events involved in a transaction. This includes:

  • Automatically changing its status based on the outcome of authorization and capture events.
  • Automatically refunding in case of an error post-payment.

Here's the sample code to create a payment_intent.

Note: This must be done from your backend to avoid exposing sensitive data.
  • Curl
  • nodejs

The above step should be initiated as a request from your frontend.
  • js

# 3. (Frontend) Collect payment details

# a. Set up Chargebee.js

Include the following script into your website’s header to integrate Chargebee.js SDK. This makes all the Chargebee.js functionalities available for use on your website.

<script src="https://js.chargebee.com/v2/chargebee.js"></script>
Warning: Chargebee.js script should only be loaded through Chargebee server for PCI compliance. Do not download and load it via your server.

# b. Create a Chargebee instance

Create a Chargebee instance using your Chargebee site name, domain, and publishable key. domain is applicable if you are using a custom domain.

  • js

# c. Create DOM container to load the iDEAL component

Create a DOM container to hold and display the iDEAL bank selector component.

<div id='ideal-container'></div>

# d. Mount iDEAL component

Note: When using Adyen, Stripe or your own components, you need to replace this step with code needed to get the bank ID and pass it as the paymentInfo parameter to handlePayment in the next step.

Assign the ID of the DOM container to the mountBankList function. This attaches a drop-down list of supported banks to that DOM node. Chargebee validates whether a bank is selected before initiating the transaction.

  • js

# 4. (Frontend) Submit the payment

Use ideal as the input parameter to handlePayment function, as this enables the function to handle iDEAL payments. To handlePayment, pass the createPaymentIntent function that creates and returns the payment_intent (refer step 2). On receiving the payment_intent the transaction is initiated.

Chargebee takes care of redirecting user to the page meant for payment authorization. On successful authorization, the payment_intent turns authorized and the user is redirected back to your website.

  • js

# 5. (Backend) Create a subscription

Pass the ID of the successfully authorized payment_intent to Chargebee’s Create a Subscription API to create the subscription.

  • Curl
  • nodejs