
How to Implement Ecommerce Cart Functionality
This article outlines the crucial aspects to consider for a successful ecommerce cart that satisfies both user needs and technical requirements.

Medusa won the Golden Kitty Award for Best Ecommerce Product ✨ Learn More
In today's digital age, it's crucial for businesses to have a seamless and secure payment system in place. Using an ecommerce platform that enables the integration of third-party payment providers like Stripe will simplify the payment process for customers and enhance the overall shopping experience, thereby increasing sales.
Stripe is a widely-used payment gateway that offers a suite of payment APIs to help businesses accept payments online. Using a flexible ecommerce platform like Medusa to set up your ecommerce site could be a game changer.
Medusa provides the building blocks to create an ecommerce system with the necessary components, including processing payments and handling customer data with other advanced features that come with it.
In this tutorial, you will explore the benefits of using Stripe and Medusa, and learn how to set up a complete ecommerce store with Stripe and Medusa.
Stripe is one of the biggest payment providers supporting thousands of businesses in the United States and globally. It provides a platform for businesses to process online payments. Stripe offers tools and services for businesses to accept customer payments, including a payment gateway, a payment processor, and a suite of developer-friendly APIs.
Stripe supports a variety of payment methods, including credit cards, debit cards, Apple Pay, Google Pay, Microsoft Pay, Afterpay/Clearpay, Alipay, and ACH payments. Additionally, Stripe has fraud detection tools and can manage subscriptions and recurring payments.
Stripe is particularly popular among SMEs (Small and Medium-Sized Enterprises), developers, and online marketplaces. It is a good choice for ecommerce platforms looking to sell both locally and internationally. It provides tools for managing and analyzing transactions, as well as the ability to integrate with other software and services.
Medusa is an open source, Node.ja-based, composable commerce engine. Its APIs can be integrated with frontend tools to create a scalable ecommerce store.
Medusa allows developers to build sophisticated commerce systems seamlessly. It’s great for developers who want full control over their development process. Medusa has three main components: the headless server, the admin panel, and the storefront for speed enhancement.
Medusa is a highly customizable platform that allows for seamless integration with various third-party services. This allows users to utilize the best solutions available in different areas, maximizing efficiency and optimizing their workflow.
It has various features, including multiple payment options, a shopping cart, a multi-currency feature, and third-party payment integration. Medusa commerce engine comes with a manual payment provider by default.
To follow through this tutorial effectively, ensure you have the following:
For this tutorial, you will use the Medusa commerce engine to build an ecommerce store; this will enable you to utilize all prebuilt features of Medusa for an easy development process. You’ll use the Medusa Server, Medusa Admin, and Medusa Storefront.
To create your new Medusa project, follow the steps below:
Medusa CLI gets your computer ready to run the Medusa codebase locally. You can run this command below to install it:
npm install @medusajs/medusa-cli -g
Creating a new Medusa project is simple; run the command below:
medusa new my-medusa-store --seed
my-medusa-store
is the name of the project folder, so you can edit it as you wish. If you have completed the above step successfully, switch to your new project:
cd my-medusa-store
Next, start your Medusa server with the command below:
medusa develop
Medusa runs by default on port 9000
. You can navigate to localhost:9000/store/products/
to see your store products.
The Stripe plugin is a package in Medusa that enables Stripe payment on your project. In the root of your Medusa project, run the following command to install the Stripe plugin:
npm install medusa-payment-stripe
Next, in your .env
file, add the code snippet below:
STRIPE_API_KEY=<STRIPE-API-KEY>STRIPE_WEBHOOK_SECRET=<STRIPE-WEBHOOK-SECRET>
In the above code snippet, replace <STRIPE-API-KEY>
and <STRIPE-WEBHOOK-SECRET>
with keys from your Stripe dashboard.
Firstly, in medusa-config.js
, add the following at the end of the plugins
array:
const plugins = [// ...{resolve: `medusa-payment-stripe`,options: {api_key: process.env.STRIPE_API_KEY,webhook_secret: process.env.STRIPE_WEBHOOK_SECRET,},},]
Medusa Admin is a component of Medusa that allows merchants to handle all administrative functions which include product management, order management, customer management, discounts, currencies, regions, prices, settings, and more.
The steps below will guide you in creating Medusa Admin:
Clone the Medusa Admin repository and switch the directory to the newly created folder:
git clone https://github.com/medusajs/admin medusa-admincd medusa-admin
Run the command below to install all necessary dependencies:
npm install
Test it. Before you test the Medusa Admin, make sure your Medusa store server is running.
npm start
By default, Medusa Admin runs on port 7000
; navigate to localhost:7000
.
Medusa has default admin login details: admin@medusa-test.com
as the email address and supersecret
as the password. The default admin credentials are added because you used the --seed
option while installing the Medusa server.
Before you can use Stripe as a payment option during the checkout process of your storefront, you need to add it as a payment provider to every region in your store. Medusa Region is used to control the market in which your store operates. It supports multiple countries, payment options, and currencies.
Follow the steps below to add Stripe in Medusa Region:
1. On your Medusa Admin dashboard, go to _Settings → Regions_.2. Click on the region you want to edit from the _Regions_ section. This enables you to edit different information and data related to the region.3. Click on the three-dot icon at the top right of the selected region. Select _Edit Region Details_ from the dropdown. This opens a new window where you can edit the region's details.4. Select Stripe as the only payment method from the _Payment Provider_ input field.5. Once done, click the _Save and close_ button.
You can repeat the steps above for other regions as well.
Medusa has prebuilt storefronts in two frameworks: Next.js and Gatsby. This tutorial will focus on setting up a working storefront with Next.js and Stripe as its payment providers.
To create a Medusa Storefront, follow the steps below:
Create a new Next.js project using the Medusa starter template.
npx create-next-app -e https://github.com/medusajs/nextjs-starter-medusa my-medusa-storefront
Switch to the newly created directory, my-medusa-storefront
, and rename the template environment variable file to use environment variables in development:
cd my-medusa-storefrontmv .env.template .env.local
In your .env.local
file (or the file you’re using for your environment variables), add the following variable:
NEXT_PUBLIC_STRIPE_KEY=<YOUR_PUBLISHABLE_KEY>
Make sure to replace <YOUR_PUBLISHABLE_KEY>
with your Stripe Publishable Key.
Before you test Stripe payment in your storefront, ensure your Medusa server is running. Run the command below to start your storefront:
npm run dev
After running the above command, navigate to localhost:8000
to test your storefront.
You can try adding products to your shopping cart and checkout; you should be able to pay with Stripe.
When a payment is successfully made by a customer from your storefront, the payment is authorized but not captured. You’ll need to capture the payment from your admin panel.
Follow the steps below to capture payments:
In the admin, go to Orders ⇒ Select the particular order.
Scroll down the page to Payment Card and click on Capture Payment.
Once you capture the payment, the payment status will automatically turn to Paid. Next, you can check your Stripe dashboard to view the payment.
This article explained what ecommerce is. It highlighted the features and benefits of Stripe and Medusa and showed a step-by-step guide to using Medusa ecommerce with Stripe.
You can add the following integrations to your store:
You can learn more from Medusa Documentation.
Should you have any issues or questions related to Medusa, feel free to reach out to the Medusa team via Discord.
This article outlines the crucial aspects to consider for a successful ecommerce cart that satisfies both user needs and technical requirements.