Skip to main content

Ecommerce with React

Reflow gives you a full backend for integrating ecommerce functionality into any React project. You can list products using our APIs, let users add products to their cart and display a shopping cart to capture payments using Stripe, PayPal or other payment methods.

Integration​

A typical integration consists of two parts:

  • Displaying product information. This is done by using our public JSON APIs. Depending on the architecture of your React project, you can fetch these endpoints in the browser and display the products dynamically, or retrieve the API data during build time if you use a static site generator.
  • Embedding a Shopping Cart. This is done by installing the open source Reflow CartView component, and cart manager libraries, which we cover below. This allows users to add products to their carts and checkout.
Obtaining your project id

Both the API and code examples below require that you pass the id of your Reflow project. You can obtain it from the dashboard settings page.

Displaying your Project's Products​

To display your product catalog, you can use our product APIs to fetch products. We've also included the Toastify library for displaying notifications.

Cart and checkout​

In this example we again use the product API, but also add the CartView component. You can learn more about it in the repo.

Notes:

  • In the example below we've activated Test mode by passing testMode: true in the config object. This enables you to enter one of Stripe's test credit cards to make a simulated payment. Visit the test mode docs to learn more.
  • Stripe's checkout doesn't work in iframes for security, so the below embed won't work. You will need to open the demo in a new tab to test out the payment flow.