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:

Attribute	Description	Required/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 asking the user 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 selects the checkbox, they will be required to enter their IBAN number, and the payment source created will be able to be used for subscriptions.

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 and its functionality from your page. 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.

Event	Triggered 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

Key	Value Description
elementType	The element type
iban	An iban object containing the status of the IBAN field when it is present.

IBAN Object

Key	Value 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.