Translations

You can provide your own translations for all translatable strings in the user interface elements rendered by Connector Script.

Translatable Elements With Defaults

These are the defaults of the currently available translatable elements for the locale English (US):

<script type="application/json" id="laterpay-connector">
    {
        "translations": {
            "purchaseOverlay": {
                "heading": "Read Now, Pay Later",
                "poweredBy": "Powered by",
                "currentArticle": "This article",
                "currentArticleDescription": "“{title}”"
            },
            "videoPurchaseOverlay": {
                "heading": {
                    "sellVideo": "Watch Now, Pay Later",
                    "skipAd": "Skip Ad Now, Pay Later"
                },
                "poweredBy": "Powered by",
                "currentArticle": "This Video",
                "currentArticleDescription": "“{title}”"
            },
            "purchaseButton": {
                "payLater": {
                    "label": "Buy Now, Pay Later",
                    "labelWithPrice": "Buy Now, Pay Later: {price}",
                    "title": "Buy Now, Pay Later With LaterPay",
                    "titleWithPrice": "Buy Now, Pay Later With LaterPay: {price}"
                },
                "payNow": {
                    "label": "Buy Now",
                    "labelWithPrice": "Buy Now: {price}",
                    "title": "Buy Now With LaterPay",
                    "titleWithPrice": "Buy Now With LaterPay: {price}"
                },
                "sub": {
                    "label": "Subscribe Now",
                    "labelWithPrice": "Subscribe Now For {price}",
                    "title": "Subscribe Now With LaterPay",
                    "titleWithPrice": "Subscribe Now With LaterPay For {price}"
                }
            },
            "identifyButton": {
                "label": "I already bought this",
                "title": "If you have already bought this item, a time pass, or a subscription with LaterPay, please click here to restore your purchase."
            },
            "testModeNotice": {
                "heading": "Site in Test Mode",
                "description": "– No payment required –"
            },
            "videoCancelButton": {
                "label": "Cancel",
                "title": "Cancel and return to video"
            },
            "videoSkipAdButton": {
                "label": "Skip Ad",
                "countdown": "{adTimeRemaining} Left"
            }
        }
    }
</script>

Here are some things to consider:

  • The labelWithPrice translations are used, when there is only one item in the purchase list.

  • These translations are interpolated so that they can contain a price string, which is represented by a {price} sequence in the translation string. This feature can be used in your custom translations, too.

  • Translations contained in the component purchaseButtonPpu are used, when the currently selected item in the purchase list is configured as payment model “Pay Later” (formerly named “Pay Per Use”).

  • Translations contained in the component purchaseButtonSis are used, when the currently selected item in the purchase list is configured as payment model “Pay Now” (formerly named “Single Item Sale”).

Note

Note that the interpolation format for translations has changed with Connector Script 3. In prior versions, the placeholder was %s, which is still supported, but deprecated. Connector Script 3 adopts the FormatJS Message Syntax. The placeholder for a price is now {price}.

Optional Translatable Elements

The following translatable elements are optional. They are hidden, unless you define translations for them:

<script type="application/json" id="laterpay-connector">
    {
        "translations": {
            "purchaseOverlay": {
                "headerDescription": null,
                "bodyText": null,
                "notesText": null,
                "footerText": null
            },
            "videoPurchaseOverlay": {
                "headerDescription": null,
                "bodyText": null,
                "notesText": null,
                "footerText": null
            }
        }
    }
</script>

Using HTML Tags

HTML tags can be used in the heading and the optional notesText sections by using the whitelisted HTML tags listed below

An example of this would be as follows:

Example For Heading Text

This sets the optional purchase_overlay:heading.

<script type="application/json" id="laterpay-connector">
    {
        "translations": {
            "purchaseOverlay": {
                "heading": "Read <i><b>Now</b></i>, Pay Later",
            }
        }
    }
</script>

Example For Notes Text

This sets the optional purchase_overlay:notes_text.

<script type="application/json" id="laterpay-connector">
    {
        "translations": {
            "purchaseOverlay": {
                "notesText": "<a href='http://yourlink.com/signin'>Sign in</a> if you are an existing customer"
            }
        }
    }
</script>

Encoding

HTML entities need to be encoded in translations strings, because they are passed through HTML attributes.

Sanitizing

To protect your website against XSS attacks, all translation strings are sanitized using DOMPurify. However, some tags and attributes are whitelisted:

Whitelisted HTML Tags In Translation Strings

[ "a", "img", "strong", "em", "b", "i", "ul", "ol", "li", "br" ]

Whitelisted HTML Attributes In Translation Strings

[ "href", "class", "src" ]

Examples

Example For Purchase Button Label

This replaces the default translation for purchaseButton.labelWithPrice with the string “Read article now for only {price}”. The sequence {price} is replaced by the current price and currency when the Purchase Overlay is rendered.

<script type="application/json" id="laterpay-connector">
    {
        "translations": {
            "purchaseButton": {
                "labelWithPrice": "Read article now for only {price}"
            }
        }
    }
</script>