iDEAL element

Learn how to use the iDEAL element.

You can create an iDEAL element that will automatically get a user's agreement and IBAN number for single-use and recurring transactions.

Creating an iDEAL element

To create an iDEAL element, use the createElement function exposed through the DigitalRiver Object. This object follows the same pattern and allows for the same custom classes and styles as other elements.

The iDEAL element also requires an additional ideal object which accepts:

AttributeDescriptionRequired/Optional

sessionId

The Payment Session ID

Required

Example
var options = {
	ideal: {
		sessionId: "ee63194d-f681-40d6-9ec2-0943232799be"
    },
    classes: {
        base: "DRElement",
        complete: "custom-complete",
        empty: "custom-empty",
        focus: "custom-focus",
        invalid: "custom-invalid"
    },
    style: {
        base: {
            color: "#495057",
            height: "35px",
            fontSize: "1rem",
            fontFamily: "apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif",
            ":hover": {
                color: "#ccc",
            }
        },
        complete: {
            ":hover": {
                color: "#495057",
            },
        },
         empty: {
            ":hover": {
                color: "#495057",
            },
        },
        focus: {
            ":hover": {
                color: "#495057",
            },
        },
        invalid: {
                color: "red"
        }
   }
};

let ideal = digtialriver.createElement("ideal", options);

iDEAL element functions

ideal.mount();

Call this function to place the created iDEAL element on your page.

If your session is not recurring, nothing will display, and the payment source created will not be able to be used for subscription usage.

If your session is recurring, the element will display a checkbox that will allow the user to agree to authorize recurring subscription payments.

If the user does not check the box, the payment source created will not be able to be used for subscription usage.

If the user does check the box, they will be required to enter their IBAN number and the payment source created will be able to be used for subscription usage.

Example
<div id="ideal"></div>

ideal.mount('ideal');

ideal.unmount();

Call this function to remove the iDEAL element from your page. The element may be re-added to your page by calling mount().

Example
ideal.unmount();

ideal.destroy();

Call this function to remove the iDEAL element from your page as well as remove its functionality. You cannot re-add the destroyed element to your page via mount().

Example
ideal.destroy();

iDEAL element events - ideal.on('event', handler);

Use this functionality to monitor events that can be used to build and enhance your purchase flow.

EventTriggered When

ready

The created element is loaded.

change

The element's state has changed.

Ready

The Ready event triggers when the iDEAL Element has loaded.

Example
ideal.on('ready', function(event) {
    //ideal element is ready
});
Response object
 {
    "elementType": "ideal"
}

Change

A change event triggers when the iDEAL element's state has changed. When using this element, you will only receive this event when the customer agrees to recurring billing and has entered an IBAN number.

Example
ideal.on('change', function(event) {
    console.log('ideal change', event);
});

Response object

KeyValue Description

elementType

The element type

iban

An iban object containing the status of the IBAN field when it is present.

IBAN Object

KeyValue Description

complete

Whether the IBAN field is in a complete state.

empty

Whether the IBAN field is empty.

error

An error object (if applicable).

Response object - IBAN complete

Example
{
    "elementType": "ideal",
    "iban": {
        "complete": true,
        "empty": false,
        "error": null
    }
}

Response object - IBAN error

Example
{
    "elementType": "ideal",
    "iban": {
        "complete": false,
        "empty": false,
        "error": {
            "type": "validation_error",
            "code": "incomplete_iban",
            "message": "Please enter the account number without spaces or dashes."
        }
    }
}

In this flow, you can use the createSource() method to create a source using the iDEAL element.

Last updated