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.
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);
Call this function to place the created IBAN element on your page.
Example
<div id="iban"></div>
iban.mount('iban');
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();
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();
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.
The Ready event triggers when the IBAN element has loaded.
Javascript
iban.on('ready', function(event) {
//iban element is ready
});
Response
{
elementType: "iban"
}
The Focus event triggers when the IBAN element has focus.
Javascript
iban.on('focus', function(event) {
//receive the event
}
Response
{
elementType: "iban"
}
The Blur event triggers when the IBAN element no longer has focus.
Javascript
iban.on('blur', function(event) {
//receive the event
}
Response
{
elementType: "iban"
}
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.Last modified 6mo ago