# Set up Self-Checkout

> Configure the Self-Checkout languages, idle screen, payment screen, card terminal payment, and theme, and set the online payment link shown as a QR code.

## How to access Self-Checkout settings

1. Your new installation will be available in the sidebar under **Apps** → **Installations**
2. Open the installation and select the **Settings** tab to access Self-Checkout options
3. For the initial setup, go to the **Global settings** section and click **Edit settings**. You will be able to provide [space and device overrides](https://learn.phystack.com/additional-explanations/what-are-global-settings-and-settings-overrides/) after you add devices to the installation.

## How to configure Self-Checkout basics

1. Set or change the installation name. This is the title visible in **Apps** → **Installations**
2. Pick an existing or create a new installation group that this installation belongs to. This is also visible in **Apps** → **Installations**
3. Enable at least one language for the app by clicking on **Multi-language support** (see [Glossary](https://learn.phygrid.com/glossary/#multi-language-support))
4. 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
5. Save the changes and refresh the page to properly enable language support
6. **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
7. **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.

1. Open the **Idle** section
2. 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**
3. Upload the **Splash Media**: an image or a video (PNG, JPEG, SVG, GIF, MP4, or WebM)
4. Optionally, enter the **CTA label** for the button. When it is empty, the button reads "Tap to get started"
5. For **Full Screen**, optionally enter the **Hero section Heading** and **Hero section content**, and choose whether to **Show CTA Button**
6. 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.

1. Open the **Features** section and turn on **Bag**
2. Set **Checkout method** to **External**
3. Enter a **Checkout Label**. The form requires it, but the payment screen doesn't show it
4. Enter the **Checkout URL** of your online checkout page
5. Optionally, under **Additional Checkout Parameters**, click **Add** and enter a **Key** and **Value** for each extra parameter your checkout page needs
6. 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**.

1. **Display Total Discount Calculation?:** Show the number of items, subtotal, savings, coupons, and service charges above the total, instead of the total only
2. **Hint text that is placed under the checkout button:** Optionally, enter a text to show under the bag totals
3. **Separate RFID scanned items:** Show items read by the RFID reader in their own section of the bag

## How to customise Self-Checkout appearance

1. Upload custom **Fonts** for the app (Light, Regular, and Bold)
2. Under **Theme**, choose the **Theme style**: light or dark
3. Choose the **Buttons border type**: rounded or straight corners
4. Set the **Colors** for the app
5. 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](https://learn.phygrid.com/self-checkout/self-checkout-settings-explained/) for all the settings.

## How to deploy the settings

1. Save the settings
2. 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