Shipping component
Gain a better understanding of the shipping component along with how to create and mount it
Last updated
Gain a better understanding of the shipping component along with how to create and mount it
Last updated
The shipping component allows customers to select how they want their goods shipped.
It retrieves options.shippingMethods[] from the checkout-session, presents these options to customers, prompts them to make a selection, and then uses their input to set the checkout-session's shippingChoice.
To use the shipping component, you'll need to create it, mount it, and submit its data.
To create an instance of the shipping component, pass 'shipping' to createComponent().
To attach the shipping component to your DOM, pass the id of its container to mount().
The shipping component exposes done(), which submits the customer's selection and returns a boolean. It requires that you use the await operator and, therefore, must be called inside an async function.
If false, then don't advance customers to the next stage of the checkout.
Your application doesn't always need to display this component to customers. In some cases, the items[] might only contain digital products. Alternatively, customers might have opted to use the wallet component, meaning the customer's shipping method choice is collected within the payment component. To determine whether a transaction requires the shipping component, check requiresShipping in the data returned by onReady and onChange.
If done() returns true, then customers made a selection, and the shippingChoice was updated. As a result, you can move the checkout process forward.
