Demo Application
Explore how to integrate Twilio APIs into a React e-commerce application. Learn to display products, manage shopping carts, collect customer details, send WhatsApp verification codes, and verify orders within the app workflow.
We'll cover the following...
So far, we’ve looked into different endpoints available in Twilio. Now, let’s try to use these endpoints to build a real-world application.
Workflow
- The first page we land on is the homepage, where we can see different categories of products available in our application.
- Different products are displayed once the user opens a category.
- After adding some products to the cart, the user can see their individual details by clicking the “Cart” button.
- The user is required to add their details once they click “Create Order.”
- A verification code is sent to the user once they click “Confirm Order.”
- The user is asked to enter the verification code sent to their WhatsApp number.
- The verification code is verified, and the response is displayed.
Run the application
Click “Run” to run the application. Then, click the URL provided to open the application in a new web browser tab.
{
"name": "backend",
"version": "1.0.0",
"description": "Backend Server",
"main": "app.js",
"type": "module",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"cors": "^2.8.5",
"express": "^4.18.1",
"node-fetch": "^3.2.10"
}
}
Integration with Twilio
We have used several endpoints available in Twilio in our application. Let’s take a closer look into the code to see how the endpoints have been integrated into our application:
In
./backend/app.js, we create a backend server that assists in making API calls.In
./utils/useFetch.js, we create a custom hook to fetch data from the API.The
Navbarcomponent is rendered as the page header in the entire application. It’s a simple navigation panel that allows us to visit different pages available in the application.We gather the customer’s data in the
Customerdetails.jsx. It contains a simple form that asks for the customer’s basic information.The data gathered in
Customerdetails.jsxis sent toVerify.jsx. Here, we have the following:Lines 19–27: We create a verification service using Twilio’s Services endpoint.
Lines 31–49: We send a verification code to the customer’s WhatsApp number.
We verify the code provided by the customer in
ConfirmOrder.jsx. Here, we have the following:Lines 24–32: We call the verify token endpoint to check whether the verification code provided is correct.