Checkout Step 2: Set Shipping and Billing Addresses

The second step of the checkout flow is to ask the customer for their address. A cart has shipping and billing addresses that customers need to set.

You can either show a form to enter the address, or, if the customer is logged in, allow them 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. To update the cart's address, use the Update Cart API route to update the cart's addresses.

For example:

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.

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 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:

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.

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 dropdown to select the address, and when the customer selects an address, you send a request to update the cart's addresses.

Tip: For both examples, you send a request as an authenticated customer using the cookie session. Learn about other options to send an authenticated request in this guide.

Was this page helpful?

Edited Feb 3·Edit this page