Skip to main content

Checkout app

This article introduces you to our custom Checkout app and its core features.

Info

The Checkout app is deployed to customer servers per request. To learn more contact our support at sales@wallboard.info!

Please note

This custom app is under active development and any information in this documentation could be inaccurate or outdated! If you have any questions please contact our support at support@wallboard.info

checkout1.png

What is Checkout?​

With the Checkout app you can easily create a straightforward self-service ordering process. To utilize the functionalities of the Checkout app, use it alongside our MenuBoard app.

Prerequisites​

To keep track of orders the Checkout app needs a mock datasource. This mock datasource has to be the same as your ordering selector MenuBoard's target dataset. If you don't already have a mock datasource, head over to Content tab > Base data path > Edit mock datasource and click add new. Name your datasource then insert the following into the data (json) field: {"Items:[]}

checkout2.png

Setting up the widget​

Datasource binding​

After you've successfully created your mock datasource you can place the Checkout app widget and configure the datasource binding. Make sure you select the same mock datasource that you use as your MenuBoard's target dataset.

checkout3.png

Layouts​

In the cart layout style the contents of your cart are displayed:

checkoutCart.png

Generic Settings​

  • Layout style: Change the basic layout of the widget.
  • Cart layout type: Change how you want the items to display.
  • Split box area: Adjust the height of your cart and summary.
  • No items text: Change the placeholder text for the cart when it's empty.

Cart Settings​

Customize the visual appearance of your cart, including font family, size, color, and more.

Cart Align Settings​

Set the width of each cell in your cart.

Middle Line Settings​

Customize the color of the separator line between the Cart and Summary sections if you're using the Checkout layout style.

Summary Settings​

Customize the visual appearance of your summary, including font family, size, color, and setup options for discount, service fee, tax, and tip percentages.

Price Settings​

Customize how prices are displayed by adding text, currency symbols, spaces before and after, and enabling decimal points.

Quantity Settings​

Customize the formatting of quantities, including adding text and spaces before and after.

Percentage Settings​

Customize the formatting of percentage-based fields (service fee, discount, tax, tip). You can add text, spaces before and after, and enable decimal points.

Touch Events​

You can place other widgets (e.g., text widget) and configure touch events for them that interact with the checkout widget.

Available touch events are:​

  • Clear cart: Clears all items placed in the cart.
  • Add tip: Adds a tip to your order depending on the static value you provide. You can choose whether it is a percentage or a fixed value under the widget's summary settings in the Tip type dropdown.
  • Submit: Adds the items in your cart to your order.
  • Checkout: Finalizes your order.
Last updated on