Appearance

Note

Appearance Properties are available in Connector Script Classic only.

Overview of all customization options for the Connector purchase overlay

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

Example

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

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

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

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:

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

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

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

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

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

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

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

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

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

Text Color

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

Example

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

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

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

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

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

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

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

Variant

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

  • default

  • raw-white

Example

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

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