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

{
  purchase_overlay: {
    heading: 'Read Now, Pay Later',
    powered_by: 'Powered by',
    current_article: 'This article',
    current_article_description: '“{title}”'
  },
  video_purchase_overlay: {
    heading: {
      sell_video: 'Watch Now, Pay Later',
      skip_ad: 'Skip Ad Now, Pay Later'
    },
    powered_by: 'Powered by',
    current_article: 'This Video',
    current_article_description: '“{title}”',
  },
  purchase_button: {
    title: 'Buy now with LaterPay'
  },
  purchase_button_ppu: {
    label: 'Buy Now, Pay Later',
    label_with_price: 'Buy Now, Pay Later: {price}'
  },
  purchase_button_sis: {
    label: 'Buy Now',
    label_with_price: 'Buy Now For {price}'
  },
  purchase_button_ppu_subs: {
    label: 'Subscribe Now, Pay Later',
    label_with_price: 'Subscribe Now, Pay Later: {price}'
  },
  purchase_button_sis_subs: {
    label: 'Subscribe Now',
    label_with_price: 'Subscribe Now For {price}'
  },
  identify_button: {
    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.'
  },
  test_mode_notice: {
    heading: 'Site in Test Mode',
    description: '– No payment required –'
  },
  video_cancel_button: {
    label: 'Cancel',
    title: 'Cancel and return to video'
  },
  video_skip_ad_button: {
    label: 'Skip Ad',
    countdown: '{adTimeRemaining} Left'
  }
}

Here are some things to consider:

  • The label_with_price 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 purchase_button_ppu 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 purchase_button_sis 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:

{
  purchase_overlay: {
    header_description: '',
    body_text: '',
    notes_text: '',
    footer_text: ''
  },
  video_purchase_overlay: {
    header_description: '',
    body_text: '',
    notes_text: '',
    footer_text: ''
  }
}

Examples

Connector Script Classic

When using Connector Script Classic, translatable strings are identified by translation keys of the format $component:$element.

Example 1:

<meta property="laterpay:connector:translations:purchase_button:label_with_price" content="Read article now for only {price}">

This replaces the default translation for purchase_button:label_with_price 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.

Example 2:

<meta property="laterpay:connector:translations:purchase_overlay:notes_text" content="&lt;a href=&quot;http://yourlink.com/signin&quot;&gt;Sign in&lt;/a&gt; if you are an existing customer">

This sets the optional purchase_overlay:notes_text.

Note

When using Connector Script Classic, the names of In-Page Configuration Properties are written in lower_case_underscore_style.

Connector Script For Video Players

When using Connector Script Classic, translatable strings are defined directly in the player configuration object.

Example 1:

{
  // More player configuration would go here
  laterpayConnector: {
    translations: {
      purchaseButton: {
        labelWithPrice: 'Read article now for only {price}'
      }
    }
  }
}

This replaces the default translation for purchase_button:label_with_price 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.

Example 2:

{
  // More player configuration would go here
  laterpayConnector: {
    translations: {
      purchaseOverlay: {
        notesText: '&lt;a href=&quot;http://yourlink.com/signin&quot;&gt;Sign in&lt;/a&gt; if you are an existing customer'
      }
    }
  }
}

This sets the optional purchase_overlay:notes_text.

Note

When using Connector Script For Video Players, the names of In-Page Configuration Properties are written in camelCase.

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