Components make it even easier to integrate with Digital River, reducing the time spent launching and managing your solution.
You can use all available components to create traditional checkout flows. Alternatively, you might decide to use them selectively to construct specialized flows. For example, by pairing the wallet component with the compliance component, you can offer customers an expedited checkout experience.
During the early stages of an eCommerce transaction, customers land on your storefront, review products, and build a cart. Digital River is typically not involved in these pre-checkout interactions unless you're engaging our local pricing service. However, once customers initiate checkout, you must start interacting with components.
Designing the checkout experience
For each component you implement, your DOM needs to contain a unique HTML element to display it.
The following example uses all of the available components, but how you design your experience is highly customizable.
If you implement multiple components that accept customer input, such as address, shipping, and payment, your experience should also contain buttons or some other type of navigational control that allows customers to move the checkout process forward and backward. These button-click events should activate your checkout flow control functionality.
...
onReady: function (data) {
if (data.requiresShipping === false) {
//Update the variable that controls whether to display the shipping component
}
if (data.showTaxIdentifiers === false) {
//Update the variable that controls whether to display the tax identifier component
}
//Call a function that determines the correct component(s) to display
},
...
Change events
If you're using the tax identifier component, handle onChange by determining whether optionalTaxIdentifiers[] or requiredTaxIdentifiers[] exists in the returned data. If either does, set a variable that controls whether that component is displayed during checkout.
onChange: function (data) {
...
if (('optionalTaxIdentifiers' in data) || ('requiredTaxIdentifiers' in data)){
//Set a display tax identifier component boolean variable to true
//At some point in the checkout process, display the tax identifier component
};
},
...
If, for whatever reason, you decide not to use the order summary component, you can also use onChange to update your custom-built order summary section. There are a variety of ways to do this.
The example below retrieves locale, currency, totalAmount, totalShipping, totalTax, and subTotal, along with each items[].amount, from the data returned by onChange and then constructs JavaScript Int.NumberFormat objects which are then used to set the innerText of the appropriate HTML element.
In this example, the sku.image and sku.name of each items[] is also displayed.
Alternatively, you could retrieve order.id (and whatever else you need) from data and use it to build your custom order confirmation page.
...
onSuccess: function (data) {
// Display the thank you component or a customized order confirmation page
},
...
Controlling the checkout flow
To control the flow of the checkout experience, you'll need to implement asynchronous functionality.
One possible approach is to define a function that checks a position enumeration, each value of which corresponds to a stage in the checkout process, and then, depending on the value, uses document to access each HTML element in your experience that holds a component, displaying and hiding the appropriate ones.
As you progress through the various checkout stages, make sure you also call done() to ensure the customer's inputs are submitted and valid. For details, refer to Submitting components.
Submitting components
Some of the available components collect data from customers. Digital River handles submitting that data for a subset of these, but you must initiate the process for others.
On the other hand, the address, shipping, tax identifier, and invoice components require that you invoke a function that submits the data they collect and determines whether it's valid. Specifically, these components require that, inside of an async function, you call done() using the await operator and then check the returned value to determine whether the checkout should advance to the next stage.
...
const addressComponentStatus = await addressComponent.done();
if (!addressComponentStatus) {
//Do not advance checkout to the next stage
return;
} else {
//Advance checkout to the next stage
}
...
...
const taxIdentifierComponentStatus = await taxIdentifierComponent.done();
if (!taxIdentifierComponentStatus) {
//Do not advance checkout to the next stage
return;
} else {
//Advance checkout to the next stage
}
...
...
const shippingComponentStatus = await shippingComponent.done();
if (!shippingComponentStatus) {
//Do not advance checkout to the next stage
return;
} else {
//Advance checkout to the next stage
}
...
...
const invoiceComponentStatus = await invoiceComponent.done();
if (!invoiceComponentStatus) {
//Do not advance checkout to the next stage
return;
} else {
//Advance checkout to the next stage
}
...
To set checkoutSessionId in the components configuration object, you should invoke an asynchronous function, wrapped by your initialize components function, that defines a on your front end and then passes that data to your server so that it can .
Alternatively, before loading your checkout page, you could define and create a completely server-side.
For example, in the payment component, DigitalRiver.js handles the button click event by sending a create source request, performing any required SCA or redirects to the payment provider, and then, assuming those processes are successful, requesting that the payment object be added to the sources[].
