iDEAL UI

Implement the iDEAL UI on your website.

Introduction

This guide will show you how to integrate iDEAL payments on your website. We recommend you read the web integration walkthrough first, before jumping into the guide.

iDEAL is an easy to use, realtime payment method from the Netherlands, which allows you to execute secure online payments directly between bank accounts.

Step 1: Setup

First, you need to include Unzer’s script and stylesheet on your website. They must always be loaded directly from https://static.unzer.com:

<link rel="stylesheet" href="https://static.unzer.com/v1/heidelpay.css" />
<script type="text/javascript" src="https://static.unzer.com/v1/heidelpay.js"></script>

Next, create a Unzer instance with your public key:

// Creating an Unzer instance with your public key
var heidelpayInstance = new heidelpay('s-pub-xxxxxxxxxx');

If you don’t have a public and private key yet, you can get them by sending an e-mail to our support.

Additionally we support localization, in case you want your form to be be in a specific language.

Step 2: Create your form

Creating the payment form for iDEAL is easy and straightforward. You just need to define a new HMTL-form, as shown in web Integration. But remember: The ID’s have to be unique!

Simply copy the code below into your HTML file:

<form id="payment-form">
  <div id="ideal-element"></div>
  <button type="submit">Pay</button>
</form>

Step 3: Create your payment method

After you’ve established your payment form with the necessary DOM elements, it’s time to create the payment method. In this case iDEAL.

Simply copy the example down below into your code:

// Creating an iDEAL instance
var Ideal = heidelpayInstance.Ideal()
// Rendering input field
Ideal.create('ideal', {
  containerId: 'ideal-element'
});

As you can see, creating an iDEAL instance works just like any other payment method.

Step 4: Create your resource ID and submit it to your server

Finally, the last step in the integration guide is handling the form’s submission, like so:

// Handling payment form's submission.
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
  event.preventDefault();
  Ideal.createResource()
    .then(function(data) {
      // Success
    })
    .catch(function(error) {
      // Error
    });
});

And that’s it! You’ve successfully integrated iDEAL payments!

Final code review

Here you can find the entire code necessary for iDEAL integration:

<form id="payment-form">
  <div id="ideal-element"></div>
  <button type="submit">Pay</button>
</form>

// Creating an Unzer instance with your public key
var heidelpayInstance = new heidelpay('s-pub-xxxxxxxxxx');
// Creating an iDEAL instance
var Ideal = heidelpayInstance.Ideal()
// Rendering input field
Ideal.create('ideal', {
  containerId: 'ideal-element'
});
// Handling payment form's submission.
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
  event.preventDefault();
  Ideal.createResource()
    .then(function(data) {
      // Success
    })
    .catch(function(error) {
      // Error
    });
});

Updating iDEAL

You can also choose to update the value of already created iDEAL resource. The updating process is almost identical to creating a new iDEAL resource. The main difference is that you will need to pass the resourceId when calling the create() method, and finally running the updateResource() instead of the createResource() method. The complete process is explained in the code box below (note that HTML will be the same as when following the createResouce() process).

// iDEAL JavaScript (updateResource)
// Creating an Unzer instance with your public key
var heidelpayInstance = new heidelpay('s-pub-xxxxxxxxxx');
// Creating an iDEAL instance
var Ideal = heidelpayInstance.Ideal()
// Rendering input field
Ideal.create('ideal', {
  containerId: 'ideal-element',
  resourceId: 's-idl-resourceid' // ID of the resource you want to update
});
// Handling payment form's submission.
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
  event.preventDefault();
  Ideal.updateResource()
    .then(function(data) {
      // Success
    })
    .catch(function(error) {
      // Error
    });
});

References

Constructors

Method summary

create

Method

void create(String type, Object options)

Description

Creates an input field for the iDEAL payment method specified by the type parameter.

Properties

options

createResource

Method

Object createResource()

Description

Creates a promise and submits the form’s data. A /types/ideal is created and either resolved or rejected. In both cases an object is returned.

Returns

An object with the following structure:

• Success: {id: String, method: String, bic: String, recurring: Boolean}
• Error: {}

updateResource

Method

Object updateResource()

Description

Creates a promise and submits the form’s new data. If resolved, the old BIC data will be updated.

Returns

An object with the following structure:

• Success: {id: String, method: String, bic: String, recurring: Boolean}
• Error: {}