🍝 Cooking a Deliveroo clone with Next.js (React), GraphQL, Strapi and Stripe - 💵 Order and Checkout (part 6/7)
Tags: react, graphql, beginners, tutorial
Published: 2019-02-04 02:49:52

---
title: 🍝 Cooking a Deliveroo clone with Next.js (React), GraphQL, Strapi and Stripe - 💵 Order and Checkout (part 6/7)
published: true
description: Part 6/7 Cooking a deliveroo tutorial with React, GraphQL, Strapi and Stripe
tags: #react #graphql #beginners #tutorial
cover_image: https://thepracticaldev.s3.amazonaws.com/i/o43jprp2ehbd5qyo5106.png
series: 🍝 Cooking a Deliveroo clone with Next.js (React), GraphQL, Strapi and Stripe - 💵 Order and Checkout (part 6/7)
---

![Strapi Next.js tutorial](https://thepracticaldev.s3.amazonaws.com/i/o43jprp2ehbd5qyo5106.png)

*This tutorial is part of the « Cooking a Deliveroo clone with Next.js (React), GraphQL, Strapi and Stripe » tutorial series.*

**Table of contents**

- 🏗️ [Setup](https://dev.to/ryanrez/-cooking-a-deliveroo-clone-with-nextjs-react-graphql-strapi-and-stripe----setup-part-17-ked) (part 1) 
- 🏠 [Restaurants](https://dev.to/ryanrez/-cooking-a-deliveroo-clone-with-nextjs-react-graphql-strapi-and-stripe----restaurants-list-part-27-10ce) (part 2)
- 🍔 [Dishes](https://dev.to/ryanrez/-cooking-a-deliveroo-clone-with-nextjs-react-graphql-strapi-and-stripe----dishes-list-part-37-5eh/) (part 3)
- 🔐 [Authentication](https://dev.to/ryanrez/-cooking-a-deliveroo-clone-with-nextjs-react-graphql-strapi-and-stripe----authentication-part-47-eho) (part 4)
- 🛒 [Shopping Cart](https://dev.to/ryanrez/-cooking-a-deliveroo-clone-with-nextjs-react-graphql-strapi-and-stripe----shopping-cart-part-57-2h1e) (part 5)
- 💵 [Order and Checkout](https://dev.to/ryanrez/-cooking-a-deliveroo-clone-with-nextjs-react-graphql-strapi-and-stripe----order-and-checkout-part-67-fph) (part 6) **- current**
- 🚀 [Bonus: Deploy](https://dev.to/ryanrez/-cooking-a-deliveroo-clone-with-nextjs-react-graphql-strapi-and-stripe----bonus-deploy---part-77-1i8e) (part 7) - 

Note: the **source code** is **available on GitHub**: https://github.com/strapi/strapi-examples/tree/master/nextjs-react-strapi-deliveroo-clone-tutorial*.

## 💵 Order and Checkout

You must start being starving... I am sure you want to be able to order!

![Order](https://thepracticaldev.s3.amazonaws.com/i/8bf6tg40xioe9jzenr83.gif)

### 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`.
   - `city` with type `String`.
   - `dishes` with type `JSON`.
   - `amount` with type `Integer` (decimal).
 - Click on Save.

![Order Content Type Builder](https://thepracticaldev.s3.amazonaws.com/i/4ahcuy3dyh635z14in2u.png)

### 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 does not go through your backend server. Instead, the credit card information is sent to the Stripe API (ideally using their SDK). Then, your frontend receives a token that can be used to charge credit cards. The `id` must be sent to your backend which will create the Stripe charge.

Not passing the credit card information through your server relieves you the responsibility to meet complicated data handling compliance, and is just far easier than worrying about securely storing sensitive data.

In order to integrate the Stripe logic, we need to update the `create` charge endpoint in our Strapi API. To do so, edit `backend/api/order/controllers/order.js` and replace its content with:

*Path: `/backend/api/order/controllers/order.js`*

 {% gist https://gist.github.com/ryanbelke/5906773c23babbafc3e6b9e8fe4a71c0.js %}

*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`.*

Install the `stripe` package inside the backend directory:

```
cd ..
cd ..
cd ..
cd backend 
npm i stripe --save
```

Do not forget to restart the Strapi server.

*Note: if an error occurs, run `npm i strapi-hook-mongoose`.*

To interact with the Stripe API, we will use the [react-stripe-elements](https://github.com/stripe/react-stripe-elements) which will give us a StripeProvider and Elements components to style our credit card form and submit the information properly to Stripe.

### Checkout page

Create a new page: `pages/checkout.js/`,

```
cd ..
cd frontend
yarn add react-stripe-elements
cd pages
touch checkout.js
```

*Path: `/frontend/pages/checkout.js`*

 {% gist https://gist.github.com/ryanbelke/9637ba5da503cbdcedd8c9089748d01a.js %}

------------------

Now we are going to create the checkout form and card section component to capture the credit card info and pass it to Stripe using the react-stripe-elements package:

Create the checkout form files:

```
cd ..
cd components
mkdir Checkout
cd Checkout
touch CheckoutForm.js
```

*Path: `/frontend/components/Checkout/CheckoutForm.js`*

 {% gist https://gist.github.com/ryanbelke/d93386a554303f2147cffd6e3adae3c1.js %}

Now create a `CardSection.js` file to use the React Elements in, this will house the input boxes that will capture the CC information.

```
touch CardSection.js
```

*Path: `/frontend/components/Checkout/CardSection.js`*

 {% gist https://gist.github.com/ryanbelke/655e1ff66291490292d303f4f311bc44.js %}

Now if you select a dish and click order you should see:

![CheckoutPicture](https://thepracticaldev.s3.amazonaws.com/i/kzzgwbnj8a1627jimffa.png)

Now if you submit your order, you should see the order under the Strapi dashboard as follows:

![Strapi](https://thepracticaldev.s3.amazonaws.com/i/wjby2kfqnnpp3ro1dknl.png)


**Explanations 🕵️**

-----------------
**Note: explanations of code samples only, do not change your code to match this as you should already have this code this is simply a snippet**

For server side rendering with [react-stripe elements](https://github.com/stripe/react-stripe-elements), some modifications need to be made as Stripe will only be available on the client not the server.

To account for this, the stripe pk_key is set in the ComponentDidMount lifecycle hook that only fires on the browser:

 {% gist https://gist.github.com/ryanbelke/2df4d4d4827a8866cfa2d879c8a5bdca.js %}

Stripe will use a `<StripeProvider>` component that will take in your stripe pk_key as a prop. This allows the children of the component access to the stripe key.

To use the integrated stripe components we will wrap our CheckoutForm component in the `<Elements>` component.

The downstream `import { injectStripe } from "react-stripe-elements"` inside the CheckoutForm component is required for the Elements children components to pass the CC information to Stripe. 

Stripe will automatically detect which components are generating the CC information and what information to send to receive the token.

This submitOrder function will first make the call to Stripe with the CC information and receive back the Token if the CC check passed. If the token is received we next call the Strapi SDK to create the order passing in the appropriate information and token id.

This is what creates the order in Stripe and creates the DB entry in Strapi. If successful you should see your Stripe test balances increase by the amount of the test order.

 {% gist https://gist.github.com/ryanbelke/f7857af36f5d8d79f8635453dde030f5.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 [NOW](https://zeit.co/now#get-started)** : https://dev.to/ryanrez/-cooking-a-deliveroo-clone-with-nextjs-react-graphql-strapi-and-stripe----bonus-deploy---part-77-1i8e