Shipping component

Gain a better understanding of the shipping component along with how to create and mount it

The shipping component allows customers to select how they want their goods to be 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.

Your application doesn't always need to display this component to customers. In some cases, the checkout-session's 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.

Creating the shipping component

To create an instance of the shipping component, pass 'shipping' to createComponent().

let shippingComponent;
...
shippingComponent = components.createComponent('shipping');

Mounting the shipping component

To attach the shipping component to your DOM, pass the id of its container to mount().

<div id="shipping-container" style="display: block">
...
shippingComponent.mount('shipping-container');

Submitting the shipping component

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.

const shippingComponentStatus = await shippingComponent.done();

If done() returns true, then customers made a selection and the checkout-sessison's shippingChoice has been updated. As a result, you can move the checkout process forward.

If false, then don't advance customers to the next stage of the checkout.