What if you could fit a whole ecommerce experience into just one page?
Some online sellers like to simplify ecommerce experiences, especially when they have only one or a few products to sell. Medusa.Express enables online sellers to sell products through a simple URL-link guiding them to a one-page checkout. You can see the demo here.
In this tutorial, you’ll learn how to set up a one-page swag store with Medusa using Medusa.Express as a frontend. This includes setting up the Medusa server, installing the Medusa admin, and finally installing the Medusa.Express storefront.
Required Stripe Account
Before going through this tutorial, you must have a Stripe development account set up as you’ll need to use API keys to configure both the Medusa server and Medusa.Express storefront.
Make sure that the account is set to test mode.
The 5-Minute Version of this Tutorial
If you’re not interested in following along with this tutorial and want the easy way to directly deploy your one-page swag store, here’s how you can do it in 5 minutes:
Deploy Medusa Server to Heroku
You can deploy the Medusa server to Heroku for free using this button:
You also need to configure the Stripe plugin.
Please keep in mind that to upload products you’ll need to install a file storage plugin. You can use MinIO, S3, or Spaces.
Alternatively, if you just want to test out how everything works first, you can run the following command to add demo products:
heroku run -a <APP_NAME> -- npm run seed
Where <APP_NAME> is the name you chose for the Heroku app.
Deploy Medusa Admin to Netlify
You can deploy the Medusa Admin to Netlify for free using this button:
Please keep in mind you must set the ADMIN_CORS environment variable on your Heroku server to the URL of the Medusa Admin.
Deploy Medusa.Express to Netlify
You can deploy the Medusa.Express storefront to Netlify for free using this button:
Please keep in mind you must set the STORE_CORS environment variable on your Heroku server to the URL of the Medusa.Express storefront.
Test it Out
You can test out your deployment by going to <MEDUSA_EXPRESS_URL>/<PRODUCT_HANDLE>, where <MEDUSA_EXPRESS_URL> is the URL of your Medusa.Express storefront, and <PRODUCT_HANDLE> is the handle of a product you want to test the purchase.
If you’re unsure what the product handle is, you can open the product edit form on the Medusa Admin and see the value in the Handle input field.
For example, if you used the seed command, you can open <MEDUSA_EXPRESS_URL>/t-shirt and you can go through the full checkout flow.
Prerequisites
If you’re following along with the rest of the tutorial, you’ll need Node.js installed with at least version 14.
Install Medusa Server
In this section, you’ll install the Medusa server locally. This is the server that the Medusa.Express storefront will connect to.
Start by installing the Medusa CLI tool:
npm install @medusajs/medusa-cli -g
Then, run the following command to install the Medusa server:
medusa new swag-store --seed
This installs the Medusa server under the directory swag-store. The --seed option creates an SQLite database and seeds it with demo data.
Finally, change to the newly created directory and run the server:
cd swag-store
npm start
This runs the Medusa server on localhost:9000. You can test that it’s working by going to localhost:9000/store/products. You should receive a JSON response with the demo products you’ve seeded into your database.
Configure Stripe Plugin
In medusa-config.js, add the following to the plugins array:
const plugins = [
...,
{
resolve: `medusa-payment-stripe`,
options: {
api_key: process.env.STRIPE_API_KEY,
webhook_secret: process.env.STRIPE_WEBHOOK_SECRET,
},
},
];
Then, add the following environment variable:
STRIPE_API_KEY=<YOUR_SECRET_KEY>
Where <YOUR_SECRET_KEY> is your Stripe’s secret key. You can retrieve it from your Stripe dashboard by going to Developers at the top right, choosing API Keys from the left sidebar, and copying the value of the Secret Key.
Additional Steps
To upload images for your products, you must install a file storage plugin. You can do that using MinIO, S3, or DigitalOcean Spaces.
Install Medusa Admin
In this section, you’ll install the Medusa Admin. The Medusa Admin allows you to manage orders, products, and much more all from an intuitive dashboard.
In your terminal and in a separate directory, run the following command to install the admin:
git clone https://github.com/medusajs/admin swag-admin
Then, change to the newly created directory swag-admin and install the dependencies:
cd swag-admin
npm install
Test Medusa Admin
While the Medusa server is still running, run the following command to start the Medusa admin:
npm start
This runs the Medusa admin on localhost:7000 by default. If you open it in your browser, you’ll see a login screen.
Enter the email admin@medusa-test.com and password supersecret to log in. These are the credentials of a demo user that’s available when you seeded the server’s database.
After you log in, click on Products on the left dashboard. You should see the demo products you added, and you should be able to create new products.
Enable Stripe Payment Provider
To ensure that Stripe is available as a payment provider on the Medusa.Express storefront, go to Settings then Choose Regions.
For each region, select the region from the left side, scroll down in the right-side form to the Payment Providers input, and choose Stripe from the list. Then, click Save.
Install Medusa.Express Storefront
The Medusa.Express storefront is available in both Gatsby and Next.js. In this tutorial, you’ll use the Next.js storefront.
In a separate directory than the previous ones, run the following command to install Medusa.Express storefront:
git clone https://github.com/medusajs/medusa-express-nextjs.git swag-storefront
Then, change to the newly created swag-storefront directory and install the necessary dependencies:
cd swag-storefront
npm install
Next, rename the .env.template file to .env:
mv .env.template .env
And add the following variable to .env:
NEXT_PUBLIC_STRIPE_API_KEY=<YOUR_PUBLISHABLE_KEY>
Where <YOUR_PUBLISHABLE_KEY> is your Stripe’s publishable key. You can retrieve it from your Stripe’s dashboard by going to Developers at the top right, choosing API Keys from the left sidebar, and copying the value of Publishable Key.
Test Medusa.Express
While your Medusa server is still running, run the following command to start your Medusa.Express storefront:
npm run dev
This starts your storefront at localhost:8000. You can test out the one-page checkout flow by going to localhost:8000/<PRODUCT_HANDLE>, where <PRODUCT_HANDLE> is the handle of the product you want to test the checkout with.
If you’re unsure of the handle of a product, you can go to the product’s edit form on the Medusa Admin and check out the value in the Handle input.
Since you seeded the database with demo products, you should be able to find a product at localhost:8000/t-shirt.
Choose the size, color, and quantity, then click Continue. In the next step, provide Shipping information. After that, you can use Stripe to purchase the item.
Once you’re done, click Complete order. You’ll see a confirmation message that your order was placed.
If you check your Medusa Admin dashboard, you can see the order and its details.
When to Use Medusa.Express
Medusa.Express is helpful for many cases, here are a few examples;
- Shopping on Social Media: When setting up a shop on social media platforms such as Instagram Shopping, or just linking to your products on social media, it’s very helpful to use a platform like Medusa.Express. The customer can use the link to directly make the purchase.
- Promotional Purposes on Blogs: Influencers and blog owners that sell swag don’t need to have a full-fledged store. They can link to the items they offer in their posts and have their customers directly make the purchase.
- Unique Marketing Strategy: When marketing your store and products, you’ll often find that while your customer does go to your website and might even add the item to the cart, they’ll often leave that cart abandoned and never make the purchase. Medusa.Express encourages customers to make the purchase directly and in a minute.
What’s Next?
After following the previous setup, you’ll need to deploy your Medusa server and admin. You can also deploy the Medusa Express storefront using the button shown earlier in the tutorial or following a similar process to deploying the Gatsby storefront.
After that, you can start using those product links on your social media accounts, blog, and emails, or just send them directly to your customers to make purchases!
Should you have any issues or questions related to Medusa, then feel free to reach out to the Medusa team via Discord.
Top comments (1)
What's a cool idea to write about next? 🤩