> ## Documentation Index
> Fetch the complete documentation index at: https://devdocs.paywithatoa.co.uk/llms.txt
> Use this file to discover all available pages before exploring further.

# Design Guidelines for Atoa Payments

> Atoa brand and UI guidelines: logos, colours, QR codes and 'Pay by bank' button variants for adding Atoa to your checkout.

At Atoa, our goal is to streamline the payment process to make it as smooth as possible. This guide outlines key design elements you can incorporate for better integration with Atoa's payment system.

<Card
  title=""
  icon="figma"
  iconType="solid"
  href="https://www.figma.com/file/DODCiX4Mbj8tfdN4NelqgL/Integration-Design-Guide?type=design&node-id=1%3A397&mode=design&t=xd4d8bxbXeek5JyM-1
"
>
  Feel free to use the Figma file to customize and make any necessary
  adjustments.
</Card>

**Displaying Atoa QR Codes**

For POS systems and till screens, our [Payment-Process](../api-reference/Payment/process-payment) API offers a unique feature. By specifying EXTERNAL\_DISPLAY and RECEIPT in the template parameter, you will receive links to two distinct images. These images are designed for integration into your system:

<img src="https://mintlify.s3.us-west-1.amazonaws.com/atoa-payments-limited/images/kiosk_and_qr_v1.webp" loading="eager" height="400" width="600" loading="eager" alt="Atoa QR code shown on a self-service kiosk screen and printed on a customer receipt to scan and pay by bank." />

**Till Screen:** Display Atoa's QR code directly on your kiosk or till screen to let customers scan and pay easily. This is ideal for self-serve restaurants with kiosk setups, or if your till features a customer-facing display.

**Invoice Receipts:** Add Atoa's dynamic QR code to invoice receipts for a smooth payment process. This method is particularly effective in restaurants, giving customers more time to pay without waiting for staff.

**Buttons in the Payment flow**

To add Atoa as a payment option to your system, we provide a set of assets designed for seamless integration and to align with Atoa's branding and user interface guidelines. You'll find these ready-to-use assets below, ready for implementation into your payment gateway or web integrations.

<img src="https://mintlify.s3.us-west-1.amazonaws.com/atoa-payments-limited/images/ecommerce_v1.webp" loading="eager" height="400" width="600" loading="eager" alt="Online checkout showing an Atoa 'Pay by bank app' payment option, with three checkout button variants." />