Partner Guide : Cobranding - Theme guide for the Handpoint app

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.

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”)

     

 

 

 

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

--theme-image-logo

--theme-screen-logo-size

--theme-screen-logo-position

--theme-screen-logo-padding-bottom

--theme-image-logo-inverted

 

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

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)

The following backgrounds are defined as a gradient color and the format to define them is “linear-gradient(‘inclination in deg’, ’color 1’, ‘color 2’)” where ‘color1’ is the bottom color and ‘color 2’ is the upper color (if you want to have a solid background color, you can choose color 1 = color 2).

Format example → linear-gradient(0deg, #2c3059, #303b70);

--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.

--theme-keyboard-text-button-color

--theme-keyboard-button-active-color

--theme-keyboard-button-border

--theme-pay-button-color

 

--theme-gradient-success: background for success actions.

--theme-gradient-error: background for error actions.

--theme-gradient-warn: background for warning actions.

--theme-bg-config:

 

The backgrounds described above can be combined with the background pattern.

Toolbar:

--theme-toolbar-background:

--theme-toolbar-title-color:

 

 

Tabs:

 

--theme-tab-active-color:

--theme-tab-inactive-color:

Action colors: 

--theme-color-success

 

--theme-color-danger

 

--theme-color-warning

 

Buttons:

The button colors are defined by their type of action

--theme-color-primary

--theme-color-positive

--theme-color-danger

--theme-color-light

--theme-color-main

--theme-color-selected

List:

 

--theme-color-light: Light color is also for the list divider 

--theme-color-placeholder: The label of the divider

--theme-color-super-light: Super light color is for odd items from the list and even items are white.

--theme-color-light is used in different component: buttons, lists and checkboxes.

card:

--theme-rounded-box-background:

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

 

 

 

--theme-rounded-background-analytics:

--theme-segment-background-color

--theme-segment-text-color

--theme-segment-activated-background-color

--theme-segment-activated-text-color

--theme-segment-border-color

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;

 

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

Note: ‘change due’ with positive values are always --theme-color-success and negative values are always --theme-color-danger

Toggle:

--theme-toggle-track-off

--theme-toggle-track-on

--theme-toggle-handle-on
--theme-toggle-handle-off

Texts:

--theme-text-color-light:

 

--theme-text-color-medium:

 

 

 

--theme-color-placeholder:

 

 

--theme-color-header:

toast messages

--theme-color-footer:

 

 

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

--theme-signin-text-color:

--theme-send-receipt-text-color:

--theme-transactions-filter-text-color:

 

 

 

 

The below login screen will not be displayed on Android payment terminals, it is only displayed in the Handpoint iOS/Android app for smartphones or tablets

--theme-rounded-background-signin

 

--theme-signing-logo-url

--theme-signin-logo-max-width

--theme-signin-mail-input-background-color