Medusa Express: One-page checkout flow

Overview

Medusa

Medusa Express

Medusa is an open-source headless commerce engine that enables developers to create amazing digital commerce experiences.

Medusa is released under the MIT license. PRs welcome! Discord Chat Follow @medusajs


Built with

Medusa: Commerce engine

Next.js: React framework

Stripe: Payment provider

Medusa React: Hooks and components for Medusa


Prerequisites: To use Medusa Express, you need a Medusa server. Check out medusa-starter-default for a quick setup.


๐Ÿš€ Get started!

1. Create your Medusa Express project

Use npx and select medusa.express (recommended)

Use git clone

  git clone --depth=1 https://github.com/medusajs/medusa-express-nextjs medusa-express

2. Navigate to project and install dependencies

  cd <your-express-folder>
  
  yarn
  # or
  npm install

3. Link your Medusa server

In your project, you should have a .env.template file with the following content:

NEXT_PUBLIC_MEDUSA_BACKEND_URL=http://localhost:9000

Copy the template into a file used for local development:

mv .env.template .env.local

Add Stripe API key as environment variable to complete orders:

# Stripe key is required for completing orders
NEXT_PUBLIC_STRIPE_API_KEY=pk_test_... 

Your Medusa server runs locally on port 9000 by default. Make sure to update the above environment variable, if you've changed the port.

4. Try it out!

Start up both your Medusa server and Medusa Express and try it out!

Medusa Express is running at http://localhost:8000!

Important: Medusa Express requires existing product. Either seed your Medusa server with some dummy products, or create your own through Medusa Admin.

Issues
Owner
Medusa
Open-source headless commerce engine
Medusa
Next.js + Redux + styled-components + Express = ๐Ÿ˜‡

Next.js redux starter An opinionated Next.js starter kit with Express, Redux, styled-components, and react-testing-library. About Next.js is an awesom

Codementor 318 Jan 19, 2022
Pankod 1.3k Jan 14, 2022
:rocket: Full stack web application skeleton (Next.js, Redux, RxJS, Immutable, Express)

Full stack web application skeleton Getting started Clone and install dependencies: $ git clone https://github.com/oh-my-c0de/oh-my-fullstack.git ./my

Oh My Code 140 Dec 29, 2021
2021 ์ˆ˜์ •๊ณผ ๋™์•„๋ฆฌ - React, Express ๊ฐ•์˜ ์ฝ”๋“œ ๋ฐ ์ž๋ฃŒ

sinamon-study 2021 ์ˆ˜์ •๊ณผ ๋™์•„๋ฆฌ - React, Express ๊ฐ•์˜ ์ฝ”๋“œ ๋ฐ ์ž๋ฃŒ ์ฃผ์ œ React (frontend) Express (backend) ์ˆ˜์ •๊ณผ ์ˆ˜์ •๊ณผ๋Š” ์ˆ˜์›์ •๋ณด๊ณผํ•™๊ณ ๋“ฑํ•™๊ต IT์†Œํ”„ํŠธ์›จ์–ด๊ณผ ์ธํŠธ๋ผ๋„ท ์„œ๋น„์Šค์ž…๋‹ˆ๋‹ค. ๋‹ค์Œ์—์„œ ์ˆ˜์ •๊ณผ ์ฝ”๋“œ๋ฅผ ํ™•์ธ

DaegyeomHa 7 Jun 4, 2021
MongoDB, Express, React (NextJS), Node - Stack Boilerplate

MERN Boilerplate UNDER DEVELOPMENT A MERN Stack Boilerplate NOTE: I used Next instead of the default CRA. This is to provide SSR (Server-Side Renderin

Prince Carlo Juguilon 6 Aug 13, 2021
๐Ÿš€ Free NextJS Landing Page Template written in Tailwind CSS 2.0 and TypeScript โšก๏ธ Made with developer experience first: Next.js, TypeScript, ESLint, Prettier, PostCSS, Tailwind CSS.

?? Free NextJS Landing Page Template written in Tailwind CSS 2.0 and TypeScript โšก๏ธ Made with developer experience first: Next.js, TypeScript, ESLint, Prettier, PostCSS, Tailwind CSS.

Rem W. 481 Jan 15, 2022
Load stripe's checkout.js as a react component. Easiest way to use checkout with React.

React Stripe Checkout Component Stripe's Checkout makes it almost too easy to take people's money. This should make it even easier if you're building

Adam Zmenak 958 Jan 19, 2022
Minimal-one-page-template - Clean and Minimalistic One Page Template Built With React.js

Minimal One Page Clean and Minimalistic One Page Template. Be sure to send your

Marcos Andre 1 Jan 5, 2022
A simple react one page landing page templates for startups/companies

React JS Landing Page Template ** ??๏ธ ??๏ธ Good news! New & improved V2 is out ** LIVE DEMO Description This is a ReactJS based landing page template,

Issaaf Kattan 512 Jan 12, 2022
One more Twitter clone, but this one is featureful yet concise and fast, built with MERN stack, with love โค.

React front-end for tclone Try it here back-end repo here looks like twitter, but not ?? It is my own take on building Twitter clone, I have tried to

muzamil 105 Dec 29, 2021
๐Ÿฟ React component for animating an element's children, one by one

react-smooth-list ?? React component for animating an element's children, one by one. Installation This package is distributed via npm. npm install re

Nikita Fedotov 17 Dec 10, 2021
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...

react-native-app-intro react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swipe

FuYaoDe 3.2k Jan 17, 2022
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...

react-native-app-intro react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swipe

Shinix 61 Nov 13, 2021
Most of the React Native styling material in one page

Most of the React Native styling material in one page

Vahe Hovhannisyan 4.5k Jan 11, 2022
winwiz1 130 Jan 18, 2022
Online Marketplace Built with MERN stack (MongoDB, Express, React and Node)Online Marketplace Built with MERN stack (MongoDB, Express, React and Node)

?? Shopping App ?? Online Marketplace Built with MERN stack (MongoDB, Express, React and Node). โšก๏ธ โšก๏ธ โšก๏ธ Kiwi Shop โšก๏ธ โšก๏ธ โšก๏ธ ?? Table of contents Main

Tomiwa Adeyemi 4 Dec 1, 2021
Docker Tutorial | Nodejs + Express + Mongodb + React + Redis + Nginx| Nodejs + Express + Mongodb + React + Redis + Nginx

Docker Tutorial | Nodejs + Express + Mongodb + React + Redis + Nginx How to use Docker to build and develop Nodejs, Express, Mongodb, React, and Redis

null 1 Jan 13, 2022
A flexible, stateless, declarative flow chart library for react.

A flexible, stateless, declarative flow chart library for react.

David Revay 1.2k Jan 11, 2022
React components for easier customization and smooth development flow.

Sha-el-design React components for easier customization and smooth development flow. ?? Features ?? Material inspired design. ?? A complete package of

null 29 Jan 10, 2022
Highly customizable library for building interactive node-based UIs, editors, flow charts and diagrams

React Flow is a library for building node-based graphs. You can easily implement custom node types and it comes with components like a mini-map and graph controls.

webkid 8.7k Jan 21, 2022
DataStory provides a workbench for designing data flow diagrams.

DataStory provides a workbench for designing data flow diagrams.

Anders Jรผrisoo 109 Jan 15, 2022
React Native component that implements the OAuth2 flow for the Appwrite BaaS. It's based on a Modal implementation

react-native-appwrite-oauth React Native component that implements the OAuth2 flow for the Appwrite BaaS (Backend-as-a-Service). It's based in a Modal

Diego BM 8 Jan 7, 2022
๐ŸŽฏ A React Native component that displays hotspots over desired components to help lead your users through an onboarding flow or direct them towards new UI elements

react-native-hotspot A React Native component that displays hotspots over desired components to help lead your users through an onboarding flow or dir

LawnStarter Organization 30 Dec 8, 2021
A highly customizable streaming flow builder can flexibly customize your nodes, different types of node display and form

A highly customizable streaming flow builder. The registration ability can flexibly customize your nodes, different types of node display and form, etc.

Bytedance Inc. 77 Jan 13, 2022
Bitflow is a library for building flow-based assessment systems.

Bitflow is a library for building flow-based assessment systems. Feel free to check out the examples to get started. Website: https://bitflow.

OpenPatch 20 Jan 21, 2022
This application contains end to end non blocking reactive flow. From Bankend( Database, Spring) and FrontEnd Angular

SpringReactiveApp This application has following projects Spring boot reactive with Mongo Database Angular with EventSource for reactive(non-blocking

null 1 Oct 26, 2021
Type is a directed typing experiment. You choose the direction the letters should flow.

Type A directed typing experiment. You choose the direction the letters should flow. https://type.constraint.systems About the tech Type uses a WebGL

Constraint Systems 8 Jan 2, 2022
Hello Its an Open git-hub repo of React-Curd which helps you to understand the whole curd flow and functionalities

Hello Its an Open git-hub repo of React-Curd which helps you to understand the whole curd flow and functionalities. You guys can also contribute in this project if you want to

Jacson Rai 1 Nov 27, 2021
Special Edge for React Flow that never intersects with other nodes

React Flow Smart Edge Special Edge for React Flow that never intersects with other nodes. Install npm install @tisoap/react-flow-smart-edge Usage impo

Tiso Alvarez Puccinelli 29 Jan 17, 2022