This guide sums up all the requirements to be able to theme the Handpoint app. There are two theming options available for partners/merchants:

1. Partner/merchant logo on payment screen and receipt

2. Partner/merchant logo on payment screen and receipt, as well as full colour theme of screens and buttons as described below.

Please contact your account manager for commercials for app theming.

Overview

Handpoint has an intuitive, simple-to-use yet powerful app that enables any merchant (from pop-ups to big retailers) to accept payments instantly and securely. As a way to provide the same seamless experience to our partners’ customers, the app can be customized to include the partner’s logo and even colours. Thus, offer the same simple user experience with some of their own branding.

List of colours and fields to provide to the Handpoint integration team. Copy or Download to edit

Logos

Logos provided to Handpoint should be in SVG format. If SVG is not possible, a transparent PNG of max 100px of height would be required. Handpoint typically requires two logos, one that works for darker backgrounds and one for lighter ones.

Where will my logo appear in the App ?

1. On the numerical keypad in standalone mode

2. On the cloud ready screen in integrated mode

3. At the bottom of the settings screen ( along with “powered by Handpoint”)

    

Open

 

Open

 

 

Format example → --theme-image-logo: url('https://theme.handpoint.com/theme_name/logos/handpoint-logo-hvitt.svg');

Links to your website

Handpoint allows partners to add links to their website, user guides or FAQs directly in the settings of the app. For PAX devices, a QR code is generated to be scanned with a phone because the terminals do not have internet browsers installed for security reasons.

Receipts

The logo appearing on the receipt will be the same one as in the payment application, it is also possible to not display any logo on the receipts if required. At this point in time it is not possible to display a merchant specific logo on the receipt.

This is how the logo on the receipt looks rendered as HTML in the Handpoint app:

For payment devices with a printer, this the printed version of it:

Colors

• List of colours and fields to provide to the Handpoint integration team. Download to edit

Background colors:

There are background patterns that can be modified or removed.

--theme-bg-pattern-background: (Transparent white pattern with transparent background for dark backgrounds)

--theme-bg-pattern-background-inverted: (Transparent grey pattern with transparent background for light backgrounds)

--theme-gradient-bg: Used in onboarding, payment status and filter period.

--theme-gradient-clean: Used in currency, device and language configurations.

--theme-gradient-receipt:

--theme-keyboard-background: The background for the numeric-keyboard (this is white in the screenshots below)

--theme-keyboard-text-button-color (this is orange in the keyboard screenshot above)

--theme-keyboard-button-active-color (when the user taps an amount, the digit key briefly changes colour, although this is not necessary. An example is the number “5” key in the example above)

--theme-keyboard-button-border (this is light grey in the keyboard screenshot above)

--theme-pay-button-color (the button CHARGE in the screenshot above)

--theme-bg-config:

Toolbar:

--theme-toolbar-background:

--theme-toolbar-title-color:

Tabs:

Action colors: 

Buttons:

List:

card:

--theme-rounded-box-background:

--theme-rounded-box-title-text-color:

--theme-rounded-background-analytics:

Keyboard:

--theme-keyboard-button-active-color:

--theme-keyboard-text-button-color:

--theme-keyboard-button-border: format example → --theme-keyboard-button-border: 1px rgba(0, 0, 0, .1) solid;

Pay Button:

--theme-keyboard-button-pay-color: Pay button color when it is active

--theme-keyboard-button-pay-inactive-color: Pay button color when it is inactive

--theme-keyboard-button-pay-inactive-opacity: Opacity (button inactive) between 0 and 1

Screen:

--theme-screen-background-image: Format example → linear-gradient(0deg, #2c3059, #303b70);

--theme-screen-text-color: The text on the screen.

--theme-screen-text-weight

Toggle:

Texts:

--theme-text-color-light:

--theme-text-color-medium:

--theme-color-placeholder:

--theme-color-header:

--theme-color-footer:

--theme-clean-text-color: texts and icons with --theme-gradient-clean