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.

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.

<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().

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().

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 Ready event triggers when the IBAN element has loaded.

iban.on('ready', function(event) {
    //iban element is ready 
});
{
    elementType: "iban"
}

‌Focus

The Focus event triggers when the IBAN element has focus.

iban.on('focus', function(event) {
    //receive the event
}
{
    elementType: "iban"
}

‌Blur

‌The Blur event triggers when the IBAN element no longer has focus.

iban.on('blur', function(event) {
    //receive the event
}
{
    elementType: "iban"
}

‌Change

‌The Change event triggers when the IBAN element's state has changed. DigitalRiver.js will return a Change Event Error object with the event payload if it detects an error.

iban.on('change', function(event) {
    console.log('iban change', event);
});
{
   "empty":false,
   "complete":true,
   "error":null,
   "elementType":"iban"
}
{
   "empty":false,
   "complete":false,
   "error":{
      "type":"validation_error",
      "code":"incomplete_iban",
      "message":"Please enter the account number without spaces or dashes."
   },
   "elementType":"iban"
}

In this flow, you can now use the createSource method to create a source using the IBAN element.

Last updated