Elements
Learn how to customize and stylize elements to seamlessly integrate them into your user experience or purchase flow.
An Element is a UI component that DigitalRiver.js creates to collect sensitive customer information without having the data touch your servers. You can customize and stylize these components to seamlessly integrate into your user experience or purchase flow. The library collects and tokenizes the data contained in these elements without exposing you to PCI-compliance liability.
element.mount();
Use this function to place the created elements on your page. The function accepts an identifier of a container div. The library will load the created element within the specified container.
element.on();
Use this function to listen to events that you can use to build and enhance your purchase flow.
Blur
A Blur event triggers when an element loses focus.
Cancel
A Cancel event occurs when the customer closes the Apple Pay Element Payment Request interface.
Change
A Change event triggers when an element changes state.
If an error is detected, Digital River will return a Change Event Error object with the event payload.
Invalid element change event example
Incomplete element change event example
Error types, codes, messages
Card brands
The following table lists the supported credit card brands.
Click
A Click event occurs when the customer clicks an Apple Pay Element.
Focus
A Focus event triggers when an element gains focus.
Ready
A Ready event triggers when an element is ready and able to receive blur()
, focus()
, or update()
calls.
Return
A Return event triggers when a customer presses the Return key while the input field has focus.
Shipping address change
A Shipping Address Change event occurs when the Customer has selected a different Shipping Address within the Payment Request interface. The event will create the following object structure.
Apple Pay shipping address change object
Shipping option change
A Shipping Option Change event occurs when the Customer has selected a different Shipping Option within the Payment Request interface. The event will emit the following object structure.
Apple Pay shipping option change object
Source
A Source event occurs when the Customer completes their interaction with the Payment Request interface and creates a Payment Source. The emitted object will be a Payment Request Response object.
Element functions
Use these functions to trigger functionality within the specified Element to further enhance your purchase flow experience.
element.blur();
This function triggers the blur()
event. This will remove the focus from the element.
element.clear();
This function clears the contents of the element.
element.focus();
This function triggers the focus()
event and places the focus on the element.
element.destroy();
This function destroys the element. Removes the element and all of its associated data so you cannot use it again. You must create a new element if you want to restore the associated data.
element.unmount();
This function removes the element from the Document Object Module (DOM). The element and its associated data still exists. You can place it on the page again by calling its mount()
function.
element.update(options);
This function updates the element with any included options. This can include custom styles and classes.
Styling an element container
Custom classes
You can specify custom classes as part of a Class
object included within the Options
object when you create or update an element. If you do not provide custom classes, the system uses the default options.
Available custom classes
Custom styles
You can specify custom styles as part of a Style
object included within the Options
object when creating or updating an Element. If you don't provide custom styles, the system uses the browser defaults.
Available custom style classes
Available custom styles
Pseudo-classes
Other customizable attributes
Last updated