Lightspeed

Note: this is a migration guide for migrating to the new Paybright Prequalify SDK. This guide details how to implement the widget on the platform Lightspeed. The Lightspeed widget can only be added to the product pages.

How to Add the Widgets to Your Lightspeed Store

Go to your Lightspeed backend for your ecommerce store. You will see a tab called Design, click on it and then select Advanced.

Then select the 'Edit Code' option.

🚧

No 'Edit Code' Option

Some stores may not give you the option to edit code this way. If this is the case the widget option may not be available to you on product pages, but you can still add marketing content as well as an FAQ page for PayBright.

Once in the code files go to the Pages section and select product.rain. Find where on the product page you would like to add the widget.

📘

Where to add the Widget

If, for example, you are looking to see the widget under the product price, Ctrl-F 'price' to locate where the price element is in the code. Add it under the price's final

Once located add the following code

In Sandbox

<script id="pb_prequalify" src="https://sandbox.paybright.com/dist/sdk.js?public_key=PUBLIC_KEY_HERE&financedamount=${{- product.price.price}}"></script>
<script>
    pb_prequalify_init();
</script>       
<div class="paybright-widget-container"></div>

In Production

<script id="pb_prequalify" src="https://app.paybright.com/dist/sdk.js?public_key=PUBLIC_KEY_HERE&financedamount=${{- product.price.price}}"></script>
<script>
    pb_prequalify_init();
</script>       
<div class="paybright-widget-container"></div>

Customize your Widget

When initializing the script you can pass additional data as an object literal. All values are optional and the defaults are described below. Leave out any where the default matches what you already need.

<script id="pb_prequalify" src="https://app.paybright.com/dist/sdk.js?public_key=PUBLIC_KEY_HERE&financedamount=${{- product.price.price}}"></script>
<script>
     pb_prequalify_init({
        triggerElement: "link", 
        triggerClass: "my-class", 
        triggerText:"Find out more",
        lang: "en",
        hideTriggerLeadText: false,        
        noFiguresInModal: false,
        showDecimals: false,
     });
</script>       
<div class="paybright-widget-container"></div>

The Following are the Customization Options and the Default Values

• triggerElement
  Default Value: “link”
  Type: one of [“link“, “button”]
  Controls if the html element which acts as the clickable trigger to open the modal is a text link
  element or a button element. It has no particular styling and can be easily styled by applying your
  CSS class to it (see triggerClass below)

• triggerClass
  Default Value: ““
  Type: string
  Adds a custom class to the trigger element. Use this to change the styling or over-ride the click action and prevent the modal from opening. You can even use this to hide the trigger entirely if you simply want the text with no modal

• triggerText
  Default Value: one of [“Learn more“, “Prequalify now“] or similar
  Type: string
  Sets the text content of the trigger

• lang
  Default Value: “en“
  Type: one of [“en“, “fr”]
  Sets the language of the text content of the both the link and modal

• hideTriggerLeadText
  Default Value: false
  Type: boolean
  Hides the text immediately before the trigger. Use case would be if you’d like to substitute your own text.

• noFiguresInModal
  Default Value: false
  Type: boolean
  Replaces the specific pricing and terms in the first modal screen with more generic messaging

• showDecimals
  Default Value: false
  Type: boolean
  Displays the price installations with or without the decimal place (rounded)

Examples

Adding the French Version of the Script to the Product Page:

<script id="pb_prequalify" src="https://app.paybright.com/dist/sdk.js?public_key=PUBLIC_KEY_HERE&financedamount=${{- product.price.price}}"></script>
<script>
     pb_prequalify_init({        
        lang: "fr",       
</script>       
<div class="paybright-widget-container"></div>

Showing the Decimals for a Price Breakdown on the Product Page

<script id="pb_prequalify" src="https://app.paybright.com/dist/sdk.js?public_key=PUBLIC_KEY_HERE&financedamount=${{- product.price.price}}"></script>
<script>
     pb_prequalify_init({        
        showDecimals: true,       
</script>       
<div class="paybright-widget-container"></div>