Components

Learn about the functionality exposed by components

Components are UI building blocks that allow you to create customizable checkout flows that collect information from and present information to customers.

On this page, you'll find information on:

• Creating components

• The components object

• The component object

Creating components

The DigitalRiverCheckout object exposes components().

components(configuration)

This function, which accepts a required configuration object, creates components, which you can use to manage one or more component instances.

...
let digitalRiverCheckout;
let components;
...
digitalRiverCheckout = new DigitalRiverCheckout(publicApiKey);
components = digitalRiverCheckout.components(configurationOptions);
...

The components configuration object

Refer to Configuring components.

The components object

The components object, which exposes createComponent(), manages a group of individual component instances.

createComponent(componentType)

The createComponent() function, which requires passing a supported type, creates an individual component.

let paymentComponent;
...
components = digitalRiverCheckout.components(configurationOptions);
paymentComponent = components.createComponent('payment');

Supported component types

• 'address'

• 'shipping'

• 'taxidentifier'

• 'invoiceattribute'

• 'wallet'

• 'payment'

• 'compliance'

• 'ordersummary'

• 'thankyou'

The component object

The individual component object, which exposes mount() and, in some cases, done(), allows you to collect information from and present information to customers.

mount(elementId)

The mount() function, which requires that you pass the id of an HTML element, attaches that component to your DOM.

<div id="payment-container" style="display: block">
...
paymentComponent.mount('payment-container');
...

done()

The address component, tax identifier component, shipping component, and invoice component expose done(), which submits a customer's data and returns a boolean indicating whether it's valid. For details, refer to:

• Submitting the address component

• Submitting the tax identifier component

• Submitting the shipping component

• Submitting the invoice component