How to access Self-Checkout settings
- Your new installation will be available in the sidebar under Apps → Installations
- Open the installation and select the Settings tab to access Self-Checkout options
- For the initial setup, go to the Global settings section and click Edit settings. You will be able to provide space and device overrides after you add devices to the installation.
How to configure Self-Checkout basics
- Set or change the installation name. This is the title visible in Apps → Installations
- Pick an existing or create a new installation group that this installation belongs to. This is also visible in Apps → Installations
- Enable at least one language for the app by clicking on Multi-language support (see Glossary)
- Select the app’s supported languages and its default language. The kiosk switches back to the default language each time it returns to the idle screen
- Save the changes and refresh the page to properly enable language support
- App Timeout in seconds: Set how long the kiosk waits without a touch or scan before it clears the bag and returns to the idle screen. Default 45
- Product Types coverage: Optionally, click Add and enter product type IDs to limit the products the kiosk can find to a subset of your catalogue
How to set up the idle screen
The idle screen is shown when nobody is using the kiosk. Customers start by tapping the screen or by scanning their first item, which opens the bag.
- Open the Idle section
- Choose the Display Options:
- Default: The Splash Media on one side and a button on the other
- Full Screen: The Splash Media across the whole screen, with a heading, a text, and an optional button over it
- Custom (Home Screen): The kiosk’s home screen with the categories and banners set under Active → Home
- Upload the Splash Media: an image or a video (PNG, JPEG, SVG, GIF, MP4, or WebM)
- Optionally, enter the CTA label for the button. When it is empty, the button reads “Tap to get started”
- For Full Screen, optionally enter the Hero section Heading and Hero section content, and choose whether to Show CTA Button
- Optionally, choose the Button Theme. For Default, you can also choose the Background Theme behind the button
How to set the online payment QR code
When the bag has items, customers tap Pay to open the payment screen. It shows the total, a Pay now panel that asks the customer to follow the instructions on the payment terminal, and a Pay online QR code. The QR code opens your checkout page with the bag contents.
- Open the Features section and turn on Bag
- Set Checkout method to External
- Enter a Checkout Label. The form requires it, but the payment screen doesn’t show it
- Enter the Checkout URL of your online checkout page
- Optionally, under Additional Checkout Parameters, click Add and enter a Key and Value for each extra parameter your checkout page needs
- Optionally, in the Payment section, upload Background Media for the payment screen
The QR code links to the Checkout URL with a cart parameter that lists the product IDs and quantities in the bag, followed by your additional parameters. For example: https://example.com/checkout?cart=[{"i":"<product ID>","q":1}]&<key>=<value>, URL-encoded.
How to set up payment on the card terminal
The Pay now panel asks customers to pay by card on the payment terminal next to the kiosk. In version 1.0.4, the panel only shows instructions: the kiosk doesn’t send the amount to the terminal, so the terminal is set up and operated outside the app.
Ask your PhyGrid contact to set up the payment terminal for your kiosk.
How to set up the bag
These settings are in Features, after you turn on Bag.
- Display Total Discount Calculation?: Show the number of items, subtotal, savings, coupons, and service charges above the total, instead of the total only
- Hint text that is placed under the checkout button: Optionally, enter a text to show under the bag totals
- Separate RFID scanned items: Show items read by the RFID reader in their own section of the bag
How to customise Self-Checkout appearance
- Upload custom Fonts for the app (Light, Regular, and Bold)
- Under Theme, choose the Theme style: light or dark
- Choose the Buttons border type: rounded or straight corners
- Set the Colors for the app
- Under Layout, choose the Omnibar Layout type for the bar with the Back and Pay buttons at the bottom of the screen
See Self-Checkout settings explained for all the settings.
How to deploy the settings
- Save the settings
- Check the kiosk on the device. Tap the idle screen, scan a product, and check that it appears in the bag with the right price