Appearance
==========

.. note::

    Appearance Properties are available in :ref:`connector_script_classic` only.

.. image:: /connector/_static/customization-options.png
   :alt: Overview of all customization options for the Connector purchase overlay
   :align: right

The appearance of the Purchase Overlay can be customized using Appearance Properties.

**Example**

.. tabs::

    .. group-tab:: JSON

        .. code-block:: html

            <script type="application/json" id="laterpay-connector">
                {
                    "appearance": {
                        "primaryColor": "#0000FF"
                    }
                }
            </script>


    .. group-tab:: <meta>

        .. code-block:: html

            <meta property="laterpay:connector:appearance:primary_color" content="#0000FF">

This sets the Primary Color to ``#0000FF`` only for the Purchase Overlay.

Base Colors
-----------


Primary Color
~~~~~~~~~~~~~

The Primary Color defines the background color of the Purchase Button and the text color of the Identify Button below.
You can override the default green color with a color of your choice.

**Example**

.. tabs::

    .. group-tab:: JSON

        .. code-block:: html

            <script type="application/json" id="laterpay-connector">
                {
                    "appearance": {
                        "primaryColor": "#0000FF"
                    }
                }
            </script>


    .. group-tab:: <meta>

        .. code-block:: html

            <meta property="laterpay:connector:appearance:primary_color" content="#0000FF">

This results in a blue Purchase Button and a blue Identify Button.


Secondary Color
~~~~~~~~~~~~~~~

The Secondary Color defines the text color of the Purchase Button. You can override the default dark gray color with a color of your choice.

Example:

.. tabs::

    .. group-tab:: JSON

        .. code-block:: html

            <script type="application/json" id="laterpay-connector">
                {
                    "appearance": {
                        "secondaryColor": "#00FF00"
                    }
                }
            </script>


    .. group-tab:: <meta>

        .. code-block:: html

            <meta property="laterpay:connector:appearance:secondary_color" content="#00FF00">

This results in green text on the Purchase Button.


Header Properties
-----------------


Header Background URL
~~~~~~~~~~~~~~~~~~~~~

A header background image can be defined for the Purchase Overlay. The Header Background URL property accepts a valid URL to an existing image, which is then displayed as a background image for the header element of the Purchase Overlay..

**Example**

.. tabs::

    .. group-tab:: JSON

        .. code-block:: html

            <script type="application/json" id="laterpay-connector">
                {
                    "appearance": {
                        "headerBackgroundUrl": "https://upload.wikimedia.org/wikipedia/commons/1/15/Comet_P1_McNaught02_-_23-01-07.jpg"
                    }
                }
            </script>


    .. group-tab:: <meta>

        .. code-block:: html

            <meta property="laterpay:connector:appearance:header_background_url" content="https://upload.wikimedia.org/wikipedia/commons/1/15/Comet_P1_McNaught02_-_23-01-07.jpg">


Header Text Color
~~~~~~~~~~~~~~~~~

The Header Text Color defines a custom text color used in the header of the Purchase Overlay.

This can come in handy especially when used in combination with the property `Header Background URL`_.

**Example**

.. tabs::

    .. group-tab:: JSON

        .. code-block:: html

            <script type="application/json" id="laterpay-connector">
                {
                    "appearance": {
                        "headerTextColor": "#0000FF"
                    }
                }
            </script>


    .. group-tab:: <meta>

        .. code-block:: html

            <meta property="laterpay:connector:appearance:header_text_color" content="#0000FF">

This results in blue text in the header of the Purchase Overlay.


Logo URL
~~~~~~~~

The Purchase Overlay has no logo on top, by default.
A custom logo can be added, which is referenced by an external URL to the image file.

Custom logos can be free in their dimensions as they are being resized by CSS to fit into the layout.
This enables high resolution logos for retina displays, too. If possible, you should reference a
web optimized SVG file here.

**Example**

.. tabs::

    .. group-tab:: JSON

        .. code-block:: html

            <script type="application/json" id="laterpay-connector">
                {
                    "appearance": {
                        "logoUrl": "http://www.example.com/img/logo.svg"
                    }
                }
            </script>


    .. group-tab:: <meta>

        .. code-block:: html

            <meta property="laterpay:connector:appearance:logo_url" content="http://www.example.com/img/logo.svg">

This adds a custom logo at the top of the Purchase Overlay, loaded from http://www.example.com/img/logo.svg.


Text Properties
---------------


Font Family
~~~~~~~~~~~

The Purchase Overlay inherits the font of the website. However, you can specify the font-family of your choice with this property. Please be aware that the font needs to be available already and that Connector Script does not load any webfont itself. Please use a valid CSS ``font-family`` value.

**Example**

.. tabs::

    .. group-tab:: JSON

        .. code-block:: html

            <script type="application/json" id="laterpay-connector">
                {
                    "appearance": {
                        "fontFamily": "'Source Sans Pro', Helvetica, Arial, sans-serif"
                    }
                }
            </script>


    .. group-tab:: <meta>

        .. code-block:: html

            <meta property="laterpay:connector:appearance:font_family" content="'Source Sans Pro', Helvetica, Arial, sans-serif">


Text Color
~~~~~~~~~~

The Text Color defines a custom base text color for the Purchase Overlay.

**Example**

.. tabs::

    .. group-tab:: JSON

        .. code-block:: html

            <script type="application/json" id="laterpay-connector">
                {
                    "appearance": {
                        "textColor": "#0000FF"
                    }
                }
            </script>


    .. group-tab:: <meta>

        .. code-block:: html

            <meta property="laterpay:connector:appearance:text_color" content="#0000FF">

This results in blue text in the Purchase Overlay.


Other Properties
----------------


Purchase Button Color
~~~~~~~~~~~~~~~~~~~~~

The Purchase Button Color allows you to define a custom background color for the Purchase Button.

**Example**

.. tabs::

    .. group-tab:: JSON

        .. code-block:: html

            <script type="application/json" id="laterpay-connector">
                {
                    "appearance": {
                        "purchaseButtonColor": "#FF0000"
                    }
                }
            </script>


    .. group-tab:: <meta>

        .. code-block:: html

            <meta property="laterpay:connector:appearance:purchase_button_color" content="#FF0000">

This results in a red background color of the Purchase Button.


Show Payment Methods
~~~~~~~~~~~~~~~~~~~~

The available payment methods are displayed at the bottom of the Purchase Overlay, by default.

You can choose to hide them.

**Example**

.. tabs::

    .. group-tab:: JSON

        .. code-block:: html

            <script type="application/json" id="laterpay-connector">
                {
                    "appearance": {
                        "showPaymentMethods": false
                    }
                }
            </script>


    .. group-tab:: <meta>

        .. code-block:: html

            <meta property="laterpay:connector:appearance:show_payment_methods" content="false">

This hides the payment methods in the Purchase Overlay.


Show Single Item Purchase List
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

If there is only one purchase option available (Single Purchase, Time Pass or Subscription),
the purchase list can be hidden by setting this property to ``false``.

In this case, the price of that purchase option is included in the label of the Purchase Button.

.. note::

    This property has no effect on purchase lists with more than one purchase option.

**Example**

.. tabs::

    .. group-tab:: JSON

        .. code-block:: html

            <script type="application/json" id="laterpay-connector">
                {
                    "appearance": {
                        "showSingleItemPurchaseList": false
                    }
                }
            </script>


    .. group-tab:: <meta>

        .. code-block:: html

           <meta property="laterpay:connector:appearance:show_single_item_purchase_list" content="false">


Variant
~~~~~~~

Currently, Connector Script provides two different Variants of the Purchase Overlay, changing the overall appearance:

- default
- raw-white

**Example**

.. tabs::

    .. group-tab:: JSON

        .. code-block:: html

            <script type="application/json" id="laterpay-connector">
                {
                    "appearance": {
                        "variant": "raw-white"
                    }
                }
            </script>


    .. group-tab:: <meta>

        .. code-block:: html

            <meta property="laterpay:connector:appearance:variant" content="raw-white">

This sets the Variant of the Purchase Overlay to ``raw-white``.