Checkout Step 2: Set Shipping and Billing Addresses

In this guide, you'll learn how to set the cart's shipping and billing addresses. This typically should be the second step of the checkout flow, but you can also change the steps of the checkout flow as you see fit.

Approaches to Set the Cart's Addresses#

A cart has shipping and billing addresses that customers need to set. You can either:

Show a form to enter the address;
Or allow the customer to pick an address from their account.

This guide shows you how to implement both approaches. You can choose either or combine them, based on your use case.

Approach One: Address Form#

The first approach to setting the cart's shipping and billing addresses is to show a form to the customer to enter their address details.

Then, to update the cart's address, use the Update Cart API route.

For example:

Tip:

This example uses the useCart hook defined in the Cart React Context guide.
Learn how to install and configure the JS SDK in the JS SDK documentation.

In the example above:

The same address is used for shipping and billing for simplicity. You can provide the option to enter both addresses instead.
You send the address to the Update Cart API route under the shipping_address and billing_address request body parameters.
The updated cart object is returned in the response.
React example: in the address, the chosen country must be in the cart's region. So, only the countries part of the cart's region are shown in the Country input.

Approach Two: Select Customer Address#

The second approach to setting the cart's shipping and billing addresses is to allow the logged-in customer to select an address they added previously to their account.

To retrieve the logged-in customer's addresses, use the List Customer Addresses API route. Then, once the customer selects an address, use the Update Cart API route to update the cart's addresses.

Good to Know: A customer's address and a cart's address are represented by different data models in the Medusa application, as they're managed by the Customer Module and the Cart Module, respectively. So, addresses that the customer used previously during checkout aren't automatically saved to their account. You need to save the customer's address using the Create Customer Address API route.

For example:

Tip:

This example uses the useCart hook defined in the Cart React Context guide.
This example uses the useCustomer hook defined in the Customer React Context guide.

In the example above, you retrieve the customer's addresses and, when the customer selects an address, you update the cart's shipping and billing addresses with the selected address.

Tip: The JS SDK automatically sends an authenticated request as the logged-in customer as explained in the Login Customer guide. If you're using the Fetch API, you can either use credentials: include if the customer is already authenticated with a cookie session, or pass the Authorization Bearer token in the request's header.

In the React example, you use the Customer React Context to retrieve the logged-in customer, who has a list of addresses. You show a select input to select an address.

When the customer selects an address, you send a request to Update Cart API route passing the selected address as a shipping and billing address.

Was this page helpful?