Widget Playground
The Widget playground provides a configurable environment where you can see a preview of the different widget layout designs depending on your promo type and term. A sample integration code snippet is provided that can be used to configure the widget on your website's product pages.
| Widget Playground URL | https://checkout.latitudefinancial.com/playground/widget/ |
How to use the widget playground#
- Select the currency
a. default selected value is AUD
b. the script will update "currency": "AUD" or "NZD"
c. the Latitude lockup will change between Latitude Interest Free vs. Gem Interest Free - Select the Layout
a. default selected value is Standard
b. the script will update "layout": "standard" or "logo only" or "inversed" or "single line" or "single line inversed" or "disabled"
C. Layout options are
| Parameter | Option | Description |
| layout | Standard | Customers will see content displayed on a separate line  |
| Logo only | Customers will see content displayed inline with other payment icons. This will also not display indicative price  | |
| Inversed | Customers will see the logo followed by the text  | |
| Single Line | Customers will see the Short version of our snippet  | |
| Single Line Inversed | Customers will see the Short version of our snippet inversed  | |
| Disabled | Customers will not see the widget  |
- Select the Interest Free plan type
a. default selected value is Equal Monthly
b. Equal Monthly refers to the widget with price per month breakdown (Please discuss with your RM if you are eligible to use Price per Month breakdown widget)
c. the script will update "paymentOption": "equal" or "minimum" - Select the Payment Plan Period
a. default selected value is 12 Months
b. the script will update “promotionMonths”: "12" or "24" , etc
c. select only the applicable promo plan period from the list
d. this field will be used to show the number of payment instalments
e. merchants who qualify for "Equal Monthly" will be provided with an indicative monthly amount - Select the appropriate widget playground environment
a. If integrating to a Merchant’s non-production environment, select Test
b. If integrating to a Merchant’s Production environment, select Production
c. the script will automatically call out the appropriate url on the script on the right - Enter your merchantID (only for direct integration) so that it is copied across the script on the right
- Advanced Fields
a. Define minimum amount for widget to show (Note: this is a free text field and there is no validation here but a note has been supplied to ensure this should be a value equal or greater than 0.5)
b. Container Class - to be able to add customization on the widget, you can use a CSS selector by defining a container class. Adding your container class in this field will automatically add it in the script on the right and therefore will be included in the customization when your widget is shown on the product pages. Please reach out to support.latitudecheckout@latitudefs.com if you need further help on this. - Select your platform the from the dropdown list
- Follow the instructions on the right hand side to embed the code snippet into your product page
Advanced Configuration
To dynamically update widget when there's a change to product's price because of product variants or discounts:
- Update window.LatitudeCheckout variable with the new price value.
window.LatitudeCheckout.product.price = "[UPDATED_PRICE]" - Then call
window.LatitudeCheckout.renderProductBanner()to re-render product widget based on that new value.
If further configuration of the Latitude Checkout Widget is required, please contact your Relationship Manager to discuss requirements.
Following the Widget Guidelines#
Your widget should be configured based on what plan type you have selected to provide to your customers eg: ‘Equal monthly’ or ‘minimum monthly’ options for the widget.
The Price Per Month (PPM) break-down is only shown for the ‘Equal Monthly’ plan option. A PPM break-down will not be shown when only ‘Minimum Monthly or Flexible’ plans are available.
For ‘Equal Monthly’ plan types the product price is divided by the payment plan term to show the PPM
For ‘Minimum Monthly or Flexible’ plan types only the payment term is shown
Please use the widget playground above to be guided on the specific wording and links to include within the widget
Please use the correct widget playground environment to match your environment, Sandbox/Test or Production (Live site or to-be Live)