Address component
Gain a better understanding of the address component, how to create and mount it, as well as how to submit the information it collects from customers
The address component collects a customer's shipping and/or billing information.
For many countries, the component:
Presents customers with a list of acceptable political subdivisions, such as states and provinces, and then requires that they make a selection.
Validates the format of a customer's postal code.
To successfully use the component, you'll need to create it, mount it, and submit its data.
In most cases, you'll need to implement this component. This is true whether your site sells physical and/or digital products. However, if your application only uses the wallet component (plus the mandatory compliance component), you might not have any need for it.
Once the component gathers and (in some cases) validates a customer's input, Digital River uses it to set the checkout-session's shipTo and/or billTo.
What inputs that the component requires and what options it presents, depends on whether the checkout involves:
Digital and physical products
Whether the address component collects shipping and/or billing information depends on items[] in the checkout-session. If any represent a physical product, then the component prompts customers for their shipping address and gives them the option to enter a different billing address.
If all the items[] are digital, then it only collects billing information.
Registered customers
If you define options.addresses[], the component presents these saved addresses to users for convenience.
Business to business transactions
If you activate the auto collect customer type feature, the component displays a checkbox that asks customers whether they’d like to purchase on behalf of a business.
If customers select this option or you pass a customerType of business , customers must provide their company's name when entering shipping and billing information.
Creating the address component
To create an instance of the address component, pass 'address' to createComponent().
Mounting the address component
To attach the address component to your DOM, pass the id of its container to mount().
Submitting the address component
The address component exposes done(), which submits the form and returns a boolean. The function requires the await operator and, therefore, must be called inside an async function.
The value returned by the function indicates whether the customer's shipping and/or billing information is complete, valid, and added to the checkout-session's shipTo and/or billTo.
If true, then your application can move on to the next stage in the checkout.
If false, Digital River determined that either the address is invalid (most likely because customers entered an incorrectly formatted postal code or email address) or customers failed to enter the required information.
For certain fields, the address component supplies customers with tips on how to format their input.
If false, make sure you implement logic that blocks the checkout from advancing to the next stage. In other words, the address component should remain displayed to customers.
Last updated
