Strapi blog logo
  • Product

      Why Strapi?Content ArchitectureRoadmapIntegrationsTry live demo
      OverviewContent Types BuilderCustomizable APIMedia LibraryRoles & Permissions
      Discover Strapi Enterprise EditionDiscover our partners
  • Pricing

  • Solutions

      Static WebsitesMobile ApplicationsCorporate websitesEditorial SitesEcommerce
      Delivery HeroL'EquipeSociete GeneralePixelDustBanco International
      Discover all our user stories
  • Community

      CommunityWrite for the communityWall of LoveStrapi Conf 2021
      SlackGitHubYoutubeCommunity Forum
      Meet the Strapi Community StarsDiscover the Strapi Showcase
  • Resources

      BlogStartersNewsroomSupport
      Strapi AcademyTutorialsVideos GuidesWebinars
      The Guide to Headless CMS Strapi Community Forum
  • Docs

      Getting StartedInstallationConfigurationsDeploymentUpdate versionContent API
      Getting StartedContent ManagerContent-Types BuilderUsers, Roles & PermissionsPlugins
      Developer DocumentationStrapi User Guide

Looking for our logo ?

Logo Brand download
Download Logo Pack
See more Strapi assets
Strapi blog logo
  • Product

    Product

    • Why Strapi?
    • Content Architecture
    • Roadmap
    • Integrations
    • Try live demo

    Features

    • Overview
    • Content Types Builder
    • Customizable API
    • Media Library
    • Roles & Permissions
    • Discover Strapi Enterprise Edition
    • Discover our partners
    Features cover

    Unlock the full potential of content management

    See all features
    Strapi Enterprise Edition

    Discover the advanced features included in Strapi Enterprise Edition.

    Get Started
  • Pricing
  • Solutions

    Solutions

    • Static Websites
    • Mobile Applications
    • Corporate websites
    • Editorial Sites
    • Ecommerce

    Stories

    • Delivery Hero
    • L'Equipe
    • Societe Generale
    • PixelDust
    • Banco International
    • Discover all our user stories
    Delivery Hero team

    Delivery Hero manages their partner portal with Strapi.

    Read their story
    turn 10 studios website

    How 1minus1 delivered a creative website for Turn10 Studios 25% faster with Strapi

    Discover their story
  • Community

    Community

    • Community
    • Write for the community
    • Wall of Love
    • Strapi Conf 2021

    Resources

    • Slack
    • GitHub
    • Youtube
    • Community Forum
    • Meet the Strapi Community Stars
    • Discover the Strapi Showcase
    Strapi Conf

    The first Strapi Global User Conference.

    Register now
    Write for the community

    Contribute on educational content for the community

    Discover the program
  • Resources

    Resources

    • Blog
    • Starters
    • Newsroom
    • Support

    Learning

    • Strapi Academy
    • Tutorials
    • Videos Guides
    • Webinars
    • The Guide to Headless CMS
    • Strapi Community Forum
    Introducing Strapi Academy

    Everything you need to know to master Strapi.

    Go to the academy
    Strapi Repository on GitHub

    Get started with the Strapi repository

    Go to repository
  • Docs

    Developers

    • Getting Started
    • Installation
    • Configurations
    • Deployment
    • Update version
    • Content API

    User Guide

    • Getting Started
    • Content Manager
    • Content-Types Builder
    • Users, Roles & Permissions
    • Plugins
    • Developer Documentation
    • Strapi User Guide
    Install Strapi

    Install Strapi locally or wherever you need.

    Get Started
    Migration Guides Strapi

    Using a previous version of Strapi? Migrate to the latest.

    Read Guides
Get Started
Back to articles

Deliveroo clone with Next.js, GraphQL, Strapi and Stripe (6/7)

strapi-next-order-checkout
  • Share on facebook
  • Share on linkedin
  • Share on twitter
  • Share by email
Ryan Belke

Ryan Belke

November 12, 2018

Strapi Next.js tutorial

Disclaimer You can find the updated version of this tutorial here

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

Table of contents

  • 🏗️ Setup (part 1)
  • 🏠 Restaurants (part 2)
  • 🍔 Dishes (part 3)
  • 🔐 Authentication (part 4)
  • 🛒 Shopping Cart (part 5)
  • 💵 Order and Checkout (part 6) - current
  • 🚀 Bonus: Deploy (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

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

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

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


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

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

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

CheckoutPicture

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

Strapi

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, 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:

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.

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://blog.strapi.io/strapi-next-deploy.

  • Share on facebook
  • Share on linkedin
  • Share on twitter
  • Share by email

Unleash content.

Starters
Get Started

Strapi is the leading open-source Headless CMS. Strapi gives developers the freedom to use their favorite tools and frameworks while allowing editors to easily manage their content and distribute it anywhere.

Product

  • Why Strapi?
  • Content Architecture
  • Features
  • Enterprise Edition
  • Partner Program
  • Roadmap
  • Support
  • Integrations
  • Try live demo
  • Changelog

Resources

  • How to get started
  • Meet the community
  • Tutorials
  • API documentation
  • GitHub repository
  • Starters
  • Strapi vs Wordpress
  • The Guide to headless CMS

Integrations

  • Gatsby CMS
  • React CMS
  • Vue.js CMS
  • Nuxt.js CMS
  • Next.js CMS
  • Angular CMS
  • Gridsome CMS
  • Jekyll CMS
  • 11ty CMS
  • Svelte CMS
  • Sapper CMS
  • Ruby CMS
  • Python CMS

Company

  • About us
  • Blog
  • Careers
  • Contact
  • Newsroom
  • © 2021, Strapi
  • LicenseTermsPrivacy