Implementing a Components checkout
Acquire a basic understanding of how to integrate components
Last updated
Acquire a basic understanding of how to integrate components
Last updated
are a that consists of UI building blocks. They allow you to create customized checkout flows that connect to Digital River's address validation, , , , fraud detection, tax computation, and compliance services.
make it even easier to integrate with Digital River, reducing the time spent launching and managing your solution.
You can use all to create traditional checkout flows. Alternatively, you might decide to use them selectively to construct specialized flows. For example, by pairing the with the , you can offer customers an expedited checkout experience.
On this page, you'll find information on:
After customers complete the checkout process, your application must also .
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 . However, once customers initiate checkout, you must start interacting with .
For each component you implement, your DOM needs to contain a unique HTML element to display it.
On your checkout page, you should:
When your checkout page loads, invoke an asynchronous function that initializes components.
In either case, the function you implement needs to return the checkout-session's id.
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.
To control the flow of the checkout experience, you'll need to implement asynchronous functionality.
For details, refer to:
The following example uses all of the , but how you design your experience is highly customizable.
If you implement multiple components that accept customer input, such as , , and , 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 functionality.
In the head of your html, script. If you'd like, you can also include a link to the DigitalRiver.css style sheet.
Use your to .
The you implement should:
To set checkoutSessionId in the , you should invoke an asynchronous function, wrapped by your , 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.
In the configuration object, you'll also need to define how you want to .
Pass your to .
Use the object returned by components() to that you want customers to interact with.
For each component, pass the id of its HTML container to .
Ensure you define how you'd like to handle the , , and callback functions.
Some of the ways you might handle is by:
Using to set a boolean variable that controls whether the needs to be displayed during the checkout process.
Using to set a boolean that controls whether the needs to be displayed.
Calling a function that .
If you're using the , handle 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.
If, for whatever reason, you decide not to use the , you can also use 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 objects which are then used to set the innerText of the appropriate HTML element.
One way to handle is by passing an argument to your , instructing it to display the .
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 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 .
Some of the collect data from customers. Digital River handles submitting that data for a subset of these, but you must initiate the process for others.
For example, in the , DigitalRiver.js handles the button click event by sending a create request, performing any required or redirects to the payment provider, and then, assuming those processes are successful, requesting that the payment object be added to the sources[].
On the other hand, the , , , and 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 , you call done() using the operator and then check the returned value to determine whether the checkout should advance to the next stage.
