Store Selected Region in Storefront

In this guide, you'll learn how to store a customer's selected region in your storefront, then retrieve it for later use.

Why Select and Store Region?#

In your store, prices, taxes, and available payment methods can vary between regions.

So, you should allow customers to select their region to see the correct prices, taxes, and payment methods.

Store Selected Region ID#

To allow the customer to select a region, you should show them the list of regions as explained in the List Regions guide. You can show them in a select input, for example.

Then, once the customer selects their region, store that region's ID in the localStorage.

For example:

localStorage.setItem("region_id", region.id)

Then, you can retrieve it later using the localSorage.getItem method:

const regionId = localStorage.getItem("region_id")

Retrieve Selected Region's Details#

As you build your storefront, you may need to retrieve the full details of a region. For example, to get the region's currency code.

To retrieve the selected region's details from Medusa, use the Retrieve Region API route:

const regionId = localStorage.getItem("region_id")

sdk.store.region.retrieve(regionId)
.then(({ region }) => {
  console.log(region)
})

The response has a regions field, which is an array of regions.

Store Region Details in React Context#

If you're using React, it's then recommended to create a context that stores the region details and make it available to all components in your application, as explained in the Region React Context in Storefront guide.