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
Last updated
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
Last updated
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 them to make a selection.
Validates the format of a customer's postal code.
To use the component successfully, you must create it, mount it, and submit its data.
In most cases, you'll need to implement this component, 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 the component requires and what options it presents, depends on whether the checkout involves:
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 they only collect billing information.
If you define options.addresses[], the component presents these saved addresses to users for convenience.
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.
To create an instance of the address component, pass 'address' to createComponent().
To attach the address component to your DOM, pass the id of its container to mount().
The address component exposes done(), which submits the form and returns a boolean. The function requires the await operator and 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.
