# 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.
- Gateways are configured and SEPA has been enabled.
- Smart routing configured to select iDEAL for EUR currency.
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 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
The above step should be initiated as a request from your frontend.
# 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.
# b. Create a Chargebee instance
# c. Create DOM container to load the iDEAL component
Create a DOM container to hold and display the iDEAL bank selector component.
# d. Mount iDEAL component
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.
# 4. (Frontend) Submit the payment
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
authorized and the user is redirected back to your website.
# 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.