search
System Status

Configuring components

Gain a better understanding of how to configure components

The configuration object you're required to pass to components() allows you to:

let components;
...
const configuration = {
    checkoutSessionId: await createComponentsCheckoutSession(),
    redirectUrl: window.location.protocol + '//' + window.location.hostname + ':' + window.location.port + '/v1/thank-you.html',
    onReady: function (data) {},
    onChange: function (data) {},
    onSuccess: function (data) {}
}
...
components = digitalRiverCheckout.components(configuration);

hashtag
Identify the checkout-session

In the components() configuration object, you're required to define checkoutSessionId.

DigitalRiverCheckout.js needs this identifier so that it can access the checkout-session.

To set this property, call an asynchronous function that creates a checkout-session and returns its unique identifier. For details, refer to Build a configuration object on the Components checkout page.

hashtag
Redirect after successful checkouts

In the components() configuration object, the optional redirectUrl can be assigned a URL. This represents where you'd like Digital River to redirect customers after payment is authorized, and the checkout-session is successfully converted to an order.

You could use redirectUrl to send your customers to a custom order confirmation page, but if you display the thank you component, then don't define this property.

hashtag
Callback methods in components

You can use the components() configuration object to be notified of (1) ready, (2) change, and (3) success events.

hashtag
Ready event

Define onReady to be notified when components have successfully initialized.

hashtag
onReady

The onReady property can be assigned a method that accepts data, and executes when the checkout-session has been successfully created and components are ready to accept input.

The method returns a data object that contains the requiresShipping and showTaxIdentifiers booleans.

hashtag
Change event

Define onChange to be notified of changes that occur in components.

hashtag
onChange

The onChange property can be assigned a method that accepts data and executes when customers use a component to submit their information successfully.

The returned data object, which represents the updated checkout-session, always contains requiresShipping and showInvoiceAttribute.

It might also contain optionalTaxIdentifiers[] or requiredTaxIdentifiers[]. If the former array exists, your application can optionally display the tax identifier component to users. If the latter exists, you're required to do so.

hashtag
Success event

Define onSuccess to be notified of a successfully completed components checkout.

hashtag
onSuccess

The onSuccess property can be assigned a method that accepts data and executes when a customer's payment is authorized, and Digital River successfully converts the checkout-session to an order.

The method returns a data object, which represents the order.

hashtag
requiresShipping

The requiresShipping boolean indicates whether it's necessary to display the shipping component. If false, then the checkout-session's items[] might only contain digital products, or the customer might have used the wallet component. In either case, you won't need to display the shipping component to process the transaction successfully.

hashtag
showTaxIdentifiers

The showTaxIdentifiers boolean indicates whether it's necessary to display the tax identifier component. It's often true when the checkout-session's customerType is business and (1) the customer selects a non-United States shipping and/or billing country in the address component, or (2) you assign shoppingCountry a non-US value.

hashtag
showInvoiceAttribute

The showInvoiceAttribute boolean indicates whether it's necessary to display the invoice component. If truethis indicates that a Taiwanese-based customer is purchasing as an individual (i.e., a B2C transaction).

PreviousComponentsNextAddress component

Last updated