Konbini elements

Learn how to use Konbini elements.

With DigitalRiver.js, you can create a Konbini element that will automatically retrieve and build a select dropdown that can be styled and placed on your page like other DigitalRiver.js elements.
Creating a Konbini element
To create a Konbini element, you should 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 konbiniOptions = {
    classes: {
        base: "DRElement",
        complete: "konbini-complete",
        empty: "konbini-empty",
        focus: "konbini-focus"
    },
    style: {
        base: {
            color: '#495057',
            height: '35px',
            fontSize: '1rem',
            fontFamily: 'apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif',
            // fontWeight: 'lighter',
            ':hover': {
                color: '#ccc',
            },
            '::placeholder': {
                color: '#495057'
            }
        },
        focus: {
            ':hover': {
                color: '#495057',
            },
        },
        empty: {
            ':hover': {
                color: '#495057',
            },
        },
        complete: {
            ':hover': {
                color: '#495057',
            },
        }
    }
};
 
 
let konbini = digitalriverpayments.createElement('konbini', konbiniOptions);
Konbini element functions
konbini.mount();
Call this function to place the created Konbini element on your page.
Example
<div id="konbini"></div>
 
konbini.mount('konbini');
konbini.unmount();
Call this function to remove the Konbini element from your page. The element may be re-added to your page by calling mount().
Example
konbini.unmount();
konbini.destroy();
Call this function to remove the Konbini element from your page as well as remove its functionality. You cannot re-add the destroyed element to your page via mount().
Example
konbini.destroy();
konbini.update();
Call this function to update the Konbini element's data.
Example
let konbiniOptions = {
    classes: {
        base: "DRElement",
        complete: "konbini-complete",
        empty: "konbini-empty",
        focus: "konbini-focus"
    },
    style: {
        base: {
            color: '#495057',
            height: '35px',
            fontSize: '1rem',
            fontFamily: 'apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif',
            // fontWeight: 'lighter',
            ':hover': {
                color: '#ccc',
            },
            '::placeholder': {
                color: '#495057'
            }
        },
        focus: {
            ':hover': {
                color: '#495057',
            },
        },
        empty: {
            ':hover': {
                color: '#495057',
            },
        },
        complete: {
            ':hover': {
                color: '#495057',
            },
        }
    }
};
 
 
konbini.update(konbiniOptions);
Konbini element events - konbini.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 and ready to accept an update request.
​focus​
The element has gained focus.
​blur​
The element has lost focus.
​change​
The element's state has changed.
Ready
The Ready event triggers when the Konbini Element has loaded and is available to take an update() call.
Example
konbini.on('ready', function(event) {
    //konbini element is ready and can accept an update call
});
In addition to the type of element returned in the ready function, the online banking element returns hasAvailableBanks. This Boolean reflects whether the currency and country combination specified has banks available for payment. If this is false, there are no banks available for payment.
Key
Value
elementType
onlinebanking
hasAvailableStores
A true or false value signaling whether there are stores available for payment.
Response object
{
    elementType: "konbini",
    hasAvailableStores: true
}
Focus
A Focus event triggers when the element gains focus.
Example
konbini.on('focus', function(event) {
    //receive the event
}
Response object
{
    elementType: "konbini"
}
Blur
A Blur event triggers when the Konbini element no longer has focus.
Example
konbini.on('blur', function(event) {
    //receive the event
}
Response object
{
    elementType: "konbini"
}
Change
A Change event triggers when the Konbin element's state has changed. When using this element, you will only receive this event when the customer selects a store.
Example
konbini.on('change', function(event) {
    console.log('konbini change', event);
});
Key
Value Description
complete
Whether the element is in a complete state.
empty
Whether the element is empty.
elementType
The element type.
error
An error object (if applicable).
value
The value of the selected option.
Response object
{
    complete: true,
    empty: false,
    elementType: "konbini",
    error: null,
    value: "86"
}
In this flow, you can now use the createSource method to create a source using the Konbini element.

Event	Triggered When
ready	The created element is loaded and ready to accept an update request.
focus	The element has gained focus.
blur	The element has lost focus.
change	The element's state has changed.

Key	Value
elementType	onlinebanking
hasAvailableStores	A true or false value signaling whether there are stores available for payment.

Key	Value Description
complete	Whether the element is in a complete state.
empty	Whether the element is empty.
elementType	The element type.
error	An error object (if applicable).
value	The value of the selected option.

iDEAL element

Compliance element

Last modified 7mo ago