IBAN element

Learn how to use the IBAN element.

An IBAN, or International Bank Account Number, includes various numeric identifiers, such as account number and country code, which help financial institutions process international payments more quickly and without errors.
With DigitalRiver.js, you can create an IBAN element that will create a field to collect a shopper's IBAN number. The IBAN element can be styled and placed on your page like other DigitalRiver.js elements.
Creating an IBAN element
To create an IBAN 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.
Example
var ibanOptions = {
    "classes": {
        "base": "DRElement",
        "complete": "iban-complete",
        "empty": "iban-empty",
        "focus": "iban-focus"
    },
    "style": {
        "base": {
            "color": "#495057",
            "height": "35px",
            "fontSize": "1rem",
            "fontFamily": "apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif",
            ":hover": {
                color: "#ccc",
            },
            "::placeholder": {
                color: "#495057"
            }
        },
        "focus": {
            ":hover": {
                "color": "#495057",
            },
        },
        "empty": {
            ":hover": {
                "color": "#495057",
            },
        },
        "complete": {
            ":hover": {
                "color": "#495057",
            },
        }
    }
};
​
var iban = digitalriverpayments.createElement('iban', ibanOptions);
‌IBAN element functions
‌iban.mount();
‌Call this function to place the created IBAN element on your page.
Example
<div id="iban"></div>
​
iban.mount('iban');
‌iban.unmount();
‌Call this function to remove the IBAN element from your page. The element may be re-added to your page by calling mount().
Example
iban.unmount();
‌iban.destroy();
‌Call this function to remove the IBAN element from your page, as well as remove its functionality. You cannot re-add the destroyed element to your page via mount().
Example
iban.destroy();
‌IBAN element events - iban.on('event', handler);
‌The IBAN Element can receive the following events by creating an event listener. Use this function to listen to events that can be used to build and enhance your purchase flow.
​ready​
The created element is loaded and ready.
​​focus​​
A shopper clicked the element's input field.
​​blur​​
The element has lost focus.
​change​
The element's state has changed.
‌Ready
‌The Ready event triggers when the IBAN element has loaded.
Javascript
iban.on('ready', function(event) {
    //iban element is ready 
});
Response
{
    elementType: "iban"
}
‌Focus
The Focus event triggers when the IBAN element has focus.
Javascript
iban.on('focus', function(event) {
    //receive the event
}
Response
{
    elementType: "iban"
}
‌Blur
‌The Blur event triggers when the IBAN element no longer has focus.
Javascript
iban.on('blur', function(event) {
    //receive the event
}
Response
{
    elementType: "iban"
}
‌Change
‌The Change event triggers when the IBAN element's state has changed. If an error is detected, DigitalRiver.js will return a Change Event Error object with the event payload.
Javascript
iban.on('change', function(event) {
    console.log('iban change', event);
});
Response
{
   "empty":false,
   "complete":true,
   "error":null,
   "elementType":"iban"
}
Invalid response
{
   "empty":false,
   "complete":false,
   "error":{
      "type":"validation_error",
      "code":"incomplete_iban",
      "message":"Please enter the account number without spaces or dashes."
   },
   "elementType":"iban"
}
Key
Value Description
complete
Indicates whether the element is in a complete state.
empty
Indicates whether the element is empty.
elementType
Identifies the element type.
error
An error object (if applicable).
In this flow, you can now use the createSource method to create a source using the IBAN element.

Key	Value Description
`complete`	Indicates whether the element is in a complete state.
`empty`	Indicates whether the element is empty.
`elementType`	Identifies the element type.
`error`	An error object (if applicable).

Google Pay elements

iDEAL element

Last modified 6mo ago

`ready`	The created element is loaded and ready.
`focus`	A shopper clicked the element's input field.
`blur`	The element has lost focus.
`change`	The element's state has changed.