Manage Customer Addresses in Storefront

In this guide, you'll learn how to manage a customer's addresses in a storefront. This is useful in the customer's profile page, or when the customer adds an address during checkout and you want to save it for future orders.

List Customer Addresses#

To retrieve the list of customer addresses, send a request to the List Customer Addresses API route:

Tip:

Learn how to install and configure the JS SDK in the JS SDK documentation.
Since only authenticated customers can view their addresses, this example assumes that the JS SDK is already configured for authentication and the customer's authentication token was set as explained in the Login in Storefront and Third-Party Login guides.

The List Customer Addresses API route accepts pagination parameters to paginate the address.

The request returns in the response the addresses field, which is an array of addresses. You can check its structure in the customer schema.

The request also returns the count field, which is the total number of addresses in the Medusa application. You can use it to check if there are more addresses to retrieve.

Add Customer Address#

To add a new address for the customer, send a request to the Add Customer Address API route:

Tip:

This example uses the useRegion hook defined in the Region Context guide.
This example uses the useCustomer hook defined in the Customer Context guide.
Since only authenticated customers can add addresses, this example assumes that the JS SDK is already configured for authentication and the customer's authentication token was set as explained in the Login in Storefront and Third-Party Login guides.

In this example, you send a request to the Add Customer Address API route to add a new address for the customer.

The response of the request has a customer field, which is a customer object. You can access the new address in the addresses property of the customer object.

Edit an Address#

To edit an address, send a request to the Update Customer Address API route:

Tip:

This example uses the useRegion hook defined in the Region Context guide.
This example uses the useCustomer hook defined in the Customer Context guide.
Since only authenticated customers can edit their addresses, this example assumes that the JS SDK is already configured for authentication and the customer's authentication token was set as explained in the Login in Storefront and Third-Party Login guides.

In this example, you send a request to the Update Customer Address API route to edit an address.

The response of the request has a customer field, which is a customer object. You can access the updated address in the addresses property of the customer object.

Delete Customer Address#

To delete a customer's address, send a request to the Delete Customer Address API route:

Tip: Since only authenticated customers can delete their addresses, this example assumes that the JS SDK is already configured for authentication and the customer's authentication token was set as explained in the Login in Storefront and Third-Party Login guides.

Code
1sdk.store.customer.deleteAddress(addrId)2.then(({ parent: customer }) => {3  // use customer...4  console.log(customer)5})

In this example, you send a request to the Delete Customer Address API route to delete an address.

The response of the request has a parent field, which is a customer object. You can access the updated customer in the parent property of the response.

Was this page helpful?