Appointment Scheduling & Payment Processing App Blueprint

by on December 6, 2021

Scheduling appointments or meetings using a custom calendar widget can be invaluable for all kinds of businesses. Whether you’re running a shop, salon, or consulting firm, adding an easy-to-manage calendar to your app or website can be highly valuable.

App Blueprints are more than just templates from which to build a specific type of application. We design all of our free App Blueprints to provide one or more key functions that a developer would want to add to their application, regardless of the app’s business use.

The Small Business Booking App Blueprint was designed to enable Backendless users to see how to configure a scheduling tool for their apps. The entirety of this app blueprint was built without code using Backendless’ UI Builder.

The scheduling capabilities include multiple interfaces that you can recreate in your own app. These capabilities include (click the link to jump to the appropriate section):

Additionally, all App Blueprints include thorough instructions to guide you through how to make your own modifications and customizations.

Click here to view the live demo app and follow along (opens in a new tab).

The web app, which functions identically to a website, can be purchased for free when creating a new app in Backendless Console. It features a beautiful, responsive design that will look great on any size screen.

The app includes five pages, each with customizable sections that can be easily modified from the app’s backend.

Interactive Calendar Widget

Hero section

The calendar widget is located in two spots on the home page. When a customer (user) selects an available date, the calendar expands to allow the user to choose from the times available that day.

The hero section also features a fully functional calendar for clients to book through. When a visitor selects a date, they will see all available times available to book. Admin users can set the hours they are available at the admin dashboard (described below).

Admin also has the ability to toggle user registration. This means that the administrator can decide whether users must register for an account to schedule an appointment, or if guest users can schedule one.

With registration required, when booking, visitors will create an account where they can track their appointment history and upcoming appointments.

User Registration And Appointment Booking Modal Window

Calendar with available time slots

When a user chooses a date for booking, they will be presented will all available time slots on that date. Time slot availability is set by the site admin in the Admin Management Portal, discussed in the next section.

Upon selecting a time slot, a modal window opens. What the use sees depends on whether or not the user is logged into the site.

Booking modal

If the user is logged in, they will simply choose their service and submit an appointment request. If the user is not logged in, they will choose their service and then either register as a new user or login to their existing account.

Admin Management Portal

Appointment Manager section

The Admin portal provides multiple valuable functions for a site administrator that does not want or need to access the Backendless backend.

Using the portal, the admin can view past and upcoming appointments, toggle user registration on and off, and set their availability (pictured above).

Admin can also toggle payment processing with Stripe on and off. We discuss setting up payment processing below.

Customer / User Portal

When Registered Booking is enabled, customers create their own profile when registering an appointment. Returning customers can then login to see their appointment history and to save time when booking since their information is already saved.

The customer portal is pictured below. It can be found at the booked-profile page in the app blueprint.

Customer profile page

Registered customers can see their visit history, upcoming appointments, and update their profile information like email and phone number. Customers can even upload their own profile picture.

Stripe API Integration

Stripe Integration Plugin

The app includes integration with Backendless’ Stripe API plugin. Using the plugin, the app owner is able to collect payment from users via the business’s Stripe account.

To utilize this feature, a Stripe API key must be added to the backend. To do so, visit Backend -> Marketplace -> API Services and get the Stripe Integration Plugin.

Follow the instructions on this page to complete setting up the plugin.

Database-Driven Content

Differentiators section

Many on-page elements can be modified using the database. In cases such as the “differentiators” section, you can show more or fewer (than three, pictured) items, change the order, the text, and the icon images in the OurDifference data table.

By being able to modify this content from the database, you can ensure the app’s content is up to date without having to republish the app. This is particularly valuable for apps that are published through app stores, as you can avoid the approval process for every small change.

Dynamic Pricing Section

Pricing section

The Pricing section lets the business display its most popular pricing packages. Pricing packages are also customized from the database, meaning that the app will not need to be republished to update this section.

Each package can be customized with as many items as necessary. Additionally, the business is not limited to three price packages; additional packages can easily be added (or packages removed) in the database. You can also set which package to highlight from the database.


The Small Business Booking App is a versatile app for a wide range of business types. More importantly, it provides Backendless users with a template to follow for a variety of key Backendless functions.

Using this template, you can see first-hand how to:

  • Create and implement a calendar widget
  • Collect registrations and other user-input data using a modal window
  • Build a simple admin and user portal
  • Implement payment processing with Stripe
  • Deliver database-driven content to the frontend

Happy Codeless Coding!

Leave a Reply