Demo Application

Learn to build a fully functional React e-commerce application using Square APIs.

We'll cover the following...

This lesson will walk us through a React e-commerce application that is integrated with Square APIs. We used the following APIs in the application workflow:

  1. Orders API
  2. Invoices API

Application workflow

The first page that appears after running the demo application is the home page. It shows three categories for buying products. These categories are "Homes", "Cars", and "Laptops". After clicking any category, the product page is opened, listing several products of that category. After adding a product to the cart, the cart page is opened showing all the products in the cart with their respective quantity and price. From there, an order can be created using the Orders API. The Order page contains a button "Generate Invoice", and clicking it generates an invoice for the order using the Invoices API. The final step in this workflow is to complete the purchase by paying for the order. The invoice page displays the "Payment URL" field where the buyer can navigate to and pay for their order. The Square-supported credit card numbers discussed in the Create an Invoice lesson can be used to complete the payment.

The demo application can be run by pressing “Run” in the widget below. When the server has started, click the URL given against “Your app ...