This tutorial is part of the « Cooking a Deliveroo clone with Nuxt (Vue.js), GraphQL, Strapi and Stripe »:
- 👋 Intro
- 🏗️ Setup (part 1)
- 🏠 Restaurants (part 2)
- 🍔 Dishes (part 3)
- 🔐 Authentication (part 4)
- 🛒 Shopping Card (part 5)
- 💵 Order and Checkout (part 6) - current
- 🚀 Bonus: Deploy (part 7)
- 👏 Conclusion
Note: the source code is available on GitHub: https://github.com/strapi/strapi-examples/tree/master/nuxt-strapi-deliveroo-clone-tutorial.
💵 Order and Checkout
You must start being starving... I am sure you want to be able to order!
Define Content Type
We need to store the orders in our database, so we are going to create a new Content Type in our API.
Same process as usual:
- Navigate to the Content Type Builder (http://localhost:1337/admin/plugins/content-type-builder).
- Click on
Add Content Type.
- Click on
Add New Fieldand create the followings fields:
- Click on Save.
To create new orders from the client, we are going to hit the
create endpoint of the
order API. To allow access, navigate to the Roles & Permissions section (http://localhost:1337/admin/plugins/users-permissions), select the
authenticated role, tick the
order/create checkbox and save.
In this section you will need Stripe API keys. To get them, create a Stripe account and navigate to https://dashboard.stripe.com/account/apikeys.
If you already used Stripe, you probably know the credit card information do not go through your backend server. Instead of that, they are directly sent to the Stripe API (ideally using their SDK). Then, your frontend receives a token. The
id of the must be sent to your backend which will create the Stripe charge.
In order to integrate the Stripe logic, we need to update the
create charge endpoint in our Strapi API. To do so, edit
server/api/order/controllers/order.js and replace its content with:
npm i stripe
Note: in a real-world example, the amount should be checked on the backend side and the list of dishes related to the command should be stored in a more specific Content Type called
Do not forget to restart the Strapi server.
pages/restaurants/_id.vue, add the click handler to the Order button and add the
Now we are going to create the Checkout page:
In this page, we display a form to get user's address and debit card informations. We use the Stripe Elements system to go faster. When the form is submitted, we get a token from Stripe. Then, we create the order in our Strapi API.
vue-stripe-elements-plus package to make it work:
npm i vue-stripe-elements-plus
And add the Stripe script in the nuxt config:
You are now able to let users submit their order.
Bon appétit! 🇫🇷
🚀 In the next (and last) section, you will learn how to deploy your Strapi app on Heroku and your frontend app on Netlify: https://blog.strapi.io/cooking-a-deliveroo-clone-with-nuxt-vue-js-graphql-strapi-and-stripe-bonus-deploy-part-7-7.