🍝 Cooking a Deliveroo clone with Nuxt (Vue.js), GraphQL, Strapi and Stripe - πŸ’΅ Order and Checkout (part 6/7)

Tutorial illustration

This tutorial is part of the Β« Cooking a Deliveroo clone with Nuxt (Vue.js), GraphQL, Strapi and Stripe Β»:

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!

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.
  • Set order as name.
  • Click on Add New Field and create the followings fields:
    • address with type String.
    • postalCode with type String.
    • city with type String.
    • dishes with type JSON.
    • amount with type Number (float).
  • Click on Save.

Order Content Type Builder

Allow access

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.

Stripe setup

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.

Add logic

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:

Path: server/api/order/controllers/order.js

Install the stripe package:

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 orderDetail.

Do not forget to restart the Strapi server.

Checkout page

In pages/restaurants/_id.vue, add the click handler to the Order button and add the goToCheckout method:

Path: pages/restaurants/_id.vue

Now we are going to create the Checkout page:

Path: pages/checkout.vue

Explanations πŸ•΅οΈ

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.

Install the vue-stripe-elements-plus package to make it work:

npm i vue-stripe-elements-plus  

And add the Stripe script in the nuxt config:

Path: nuxt.config.js

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.