You’ll find the installation instructions in the respective repos so we won’t repeat them here for the sake of brevity.
After installing, make sure you run the dev server on both projects (which run on ports 8000 and 9000 by default).
Set up Medusa for the US market
This walkthrough is designed for a US Storefront—though Lob has International Autocomplete support and could be used for non-US storefronts. We will need to make three adjustments so you get US dollars (USD) instead of Euros displayed in our starter store.
Seeding our store database
In your Medusa store project, open `my-medusa-store/data/seed.json`.
Swap the order of the regions, so NA (North America is first, and therefore the default).
The default checkout page of the Medusa store currently looks like this:
Our approach to adding address autocomplete will be:
Replace the “Address 1” field with the Lob autocomplete React component.
Add a “State” field (Medusa doesn’t provide this by default and it’s needed for US addresses).
When an address is selected through the autocomplete, programmatically fill the country, city, state, and postal code fields.
With this done, filling out the address form will be significantly faster—users only need to type a few characters to get a full address.
Creating address field component
The main component for the checkout form is in the file `components/checkout/information-step.jsx`. This is where you’ll find the address input that we’re going to replace with the address autocomplete component.
Let’s first make a copy of the `input-field` component and customize it to include the autocomplete. By doing it this way, we can keep the wrapper for error handling that is already present in the `input-field`.
To do this, go to terminal and copy the `input-field` component to a new component `address-field`:
To use the autocomplete API, we’ll need a Lob API key. The instructions for generating one are outlined here.
Grab the publishable test key and add it to your .env.local file. We’ll use a variable name `NEXT_PUBLIC_LOB_PUBLISHABLE_KEY`. By prefixing it with NEXT_PUBLIC_ we can make it accessible from the frontend source code.
With that done, the autocomplete component has now been integrated into the checkout. Go ahead and start typing into the form and you should see the address autocomplete working:
Setting up state field
As mentioned, the checkout form doesn’t include a field for the customer’s state by default. We’ll need this field as it’s required for US shipping addresses.
Although not in the form, the Medusa checkout API does include a field “province” which we should use for the state.
We’ll first create the field in the form’s validation schema which is handled by the library Yup. You’ll see the config object already has a value province that is set to be nullable. Let’s change this so it’s now required by removing nullable() and replacing it with `required("Required")`.
Finally, we’ll assign handleSelect to the onSelection prop. We’ll also add the primaryLineOnly prop. What this does is ensure that when the user makes a selection that the entire address (with state, country, zip code, etc.) is not populated in the address field—just the primary line is e.g., “12 Test St”.
With that done, we now have implemented a quick and stylish address autocomplete in Medusa! By typing a few characters into the autocomplete, customers get their validated address pre-filled, saving them a significant amount of time.
This blog provides general information and discussion about direct mail marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
Stay up-to-date with Lob’s latest
We have a lot cooking in the Lobster tank! Sign up for our newsletter to never miss a beat.