Medusa is currently hosting a Hackathon where developers can create amazing projects with Medusa and win prizes and swag. An example of a Hackathon project is building an ecommerce app with React Native, which is covered in this article.
This is part 2 of Creating a React Native ecommerce App with Medusa series. In the previous article, you learned how to set up the Medusa server and admin, and how to create a basic ecommerce app.
In this part, you will learn how to implement cart and checkout functionalities. You can also find the source code of the React Native app on GitHub.
Prerequisites
- You need a Stripe account, you can signup here.
Clone the Starter Code
If you skipped part 1, you can clone the code from GitHub. To do that, simply run the below command:
Once you have cloned the repository, move to the newly-created directory,
, by runningCopy to clipboardreact-native-medusajs
. Run the below command to install the node modules:Copy to clipboardcd react-native-medusajs
The above command will install the necessary packages and dependencies from the NPM registry.
After the dependencies are installed successfully, run
to start the application. You can either scan the QR code using your device or run the app on an Android/iOS simulator. You should see a similar screen once the app is opened on your device/emulator.Copy to clipboardexpo start
Make sure that the Medusa server is running as well.
You might need to modify the URL in
if you can't see the products. You can update the base URL to the IP address where the backend server is running.Copy to clipboardconstants/urls.js
Creating the Cart
The first step is to implement the cart functionality. Install
to save the cart id in the device’s local storage. Run the below command to installCopy to clipboardasync-storage
in the project:Copy to clipboard@react-native-async-storage/async-storage
Once the package is installed, open the project in any code editor and paste the below code into
before the return function:Copy to clipboardApp.js
In the above code, you created a function named
and inside of that function, you are querying the backend API to get a cart id using Axios and then saving it in the device’s local storage usingCopy to clipboardgetCartId
.Copy to clipboardasync-storage
Make sure to import async-storage, useEffect, Axios and baseURL in thefile:Copy to clipboardApp.js
The above function (
) will not run since you didn’t call it yet. However, you want to run this function only if there is no cart id saved in the device’s local storage.Copy to clipboardgetCartId
Now, write another function to check if there’s already a cart id in the device’s local storage. If there isn’t, the function should call
. Lastly, call theCopy to clipboardgetCartId
inside of useEffect:Copy to clipboardcheckCartId
Adding Products to the Cart
First, let’s update the button component and add a prop to update the button layout based on the size provided. You can replace the code inside
with the code below:Copy to clipboardcomponents/Button.js
Recall that by the end of Part 1, you have created a component at
to display the description, size, and other information about the product. Go ahead and add a button component after the description:Copy to clipboardcomponents/ProductInfo/MetaInfo.js
Also, make sure to import the button component from
:Copy to clipboardcomponents/Button
As you can see, you are calling
function when the user presses the button, so declare that function.Copy to clipboardaddToCart
On top of
component before return, declare a new function named addToCart and add the below code inside of it:Copy to clipboardMetaInfo.js
In the above code, first, you are fetching the
from async storage and then posting the product’s first variant with 1 quantity to the cart API. Next, you are navigating users to the cart screen.Copy to clipboardcart_id
You also need to import AsyncStorage, axios and baseURL in the
file:Copy to clipboardMetaInfo.js
Cart Screen
This is the screen where the user will see the products they added to the cart. Create a new file named
and use it to render a simple `` component for now:Copy to clipboardscreens/Cart.js
Then, import the cart screen at the top of ``:
Add a new
component in the returned JSX:Copy to clipboardcomponent below the existing
In the `` directory, create a new file named
and add the following content:Copy to clipboardCartItem.js
The above code is a simple React Native cart component which will be rendered on the cart screen. You are passing the props to the component from the parent component. This is the component that will represent an item in the cart.
Next, in the
file, add the below function and useState before the return statement to fetch the products from the cart API and store them in the state:Copy to clipboardscreens/Cart.js
In the above code, you are getting the cart id from the device storage, fetching the products from the cart API and saving the data to the state. Next, you are calling the function inside of useEffect. Replace the import at the top of the
file with the code below:Copy to clipboardscreens/Cart.js
Now that you have fetched the data and saved it to the state, it's time to render the products on the cart screen. Replace everything below useEffect function with the below code:
Next, you’ll add a basic and simple button component in the
in order to navigate to the cart screen.Copy to clipboardscreens/Products.js
Add the below code after the
component in theCopy to clipboardScrollView
screen:Copy to clipboardscreens/Products.js
Make sure to also add the style object inside
function:Copy to clipboardStyleSheet.create
You also need to import the feather icons from
at the top of the file:Copy to clipboard@expo/vector-icons
Test Cart Screen
The cart screen is ready. Make sure that the Medusa server is running, then re-run your React Native app.
Try adding a few products into the cart, and then view the cart. Your cart screen should look like this:
Checkout & Payment
Now that we have completed the cart flow, it is time for checkout flow.
Configure the Stripe Plugin
Navigate to the Medusa server directory and install the Stripe plugin by running the command below:
Add the following code at the end of the plugins array in the
.Copy to clipboardmedusa-config.js
For this tutorial, I used Stripe to handle payments. Navigate to the Stripe dashboard and make sure to turn on the toggle button of Test Mode on the top right. Click the developers button beside the Test Mode. On the left, choose API key and you can find the Publishable key and Secret key. Copy the two keys, as you will need them later.
In the
file, paste your secret key where is it writtenCopy to clipboard.env
.Copy to clipboardSTRIPE_API_KEY
Enable Stripe as a Payment Provider
Make sure that the Medusa server and admin panel is running. Now, open the Medusa admin panel and choose Settings from the Sidebar. Then, choose Regions.
Then, choose the regions you want to add Stripe as a payment provider. In the right-side settings, click on the three dots icon and choose “Edit Region Details”.
In the new window that opens, choose Stripe in the payment providers field. Once you’re done, click the save and close button.
Checkout Screen
Coming back to the React Native app, create a new file
and add a simple Text component to it:Copy to clipboardscreens/Checkout.js
Then, import the checkout screen at the top of ``:
Add a new
components in the returned JSX:Copy to clipboardcomponent below the existing
In the components folder, create a new file named
and you can add the following code to it:Copy to clipboardShippingAddress.js
In the above code, you imported a few components and created a function that handles the
event for the inputs. You have also created a fewCopy to clipboardonChange
for the shipping address.Copy to clipboardTextInputs
Create a new file named
in the components folder and add the below code to it. It is a very simple component that will render radio buttons:Copy to clipboardRadioButton.js
Create another file named
in the constants folder and add the below code. Make sure to update theCopy to clipboardstripe.js
with your publishable key:Copy to clipboardYOUR_STRIPE_PUBLISHABLE_KEY
Next, install the Stripe SDK for react native using the command below:
Now, update the checkout screen (
) by replacing the imports with the below components and dependencies:Copy to clipboardscreens/Checkout.js
Next, create a few
that will be used to capture the input values in theCopy to clipboarduseStates
component:Copy to clipboardCheckout
Create two functions that will be used to capture the input values that we will declare later on.
When the page opens and before the payment providers are displayed to the customer to choose from, you must initialize the payment sessions. To do that, we create a function named
and call it onCopy to clipboardInitializePaymentSessions
function. Here is what the code should look like:Copy to clipboarduseEffect
Next, create other functions to handle payment. Add the below functions the the
:Copy to clipboardCheckout.js
These functions handle retrieving payment and shipping options from Medusa. It also handles processing the payment through Stripe, and then handles the checkout in Medusa.
You can also replace the return function with the below code:
Lastly, add the below style object at the end of the file:
And that’s it! You should now be able to make payments and purchase items from the store.
Test Checkout
Now, try adding a few items to the cart and navigate to the checkout screen, you should be able to add an address and make payment. Here is what the checkout screen should look like:
What’s Next?
This article is part 2 of Creating an ecommerce app using Medusa and React Native. You can also add more functionalities using Medusa:
- Add a search engine using MeiliSearch.
- Check out the documentation for what more you can do with Medusa.
Should you have any issues or questions related to Medusa, feel free to reach out to the Medusa team via Discord.
Share this post
Try Medusa
Spin up your environment in a few minutes.

You may also like
On this page