Custom Integration

Note: this is a migration guide for migrating to the new Paybright Prequalify SDK. This guide details how to implement the widget on custom platforms and integrations. Generally follows similar guidelines as the Shopify integration as it is HTML based.

Placing the Script

Once you’ve determined the appropriate place to add the tag, render it in the following way:

<script id="pb_prequalify" src="https://app.paybright.com/dist/sdk.js?public_key=YOUR_PUBLIC_KEY&financedamount=$1700.00"></script>

If your price is variable it will be necessary to edit the script so the price can be pulled from a stored amount. Example:

<script id="pb_prequalify" src="https://app.paybright.com/dist/sdk.js?public_key=YOUR_PUBLIC_KEY&financedamount=${{ product.price | divided_by: 100.00 | round: 2 }}"></script>

While you are testing, please use the sandbox URL and your sandbox API key.

<script id="pb_prequalify" src="https://sandbox.paybright.com/dist/sdk.js?public_key=YOUR_PUBLIC_KEY&financedamount=${{ product.price | divided_by: 100.00 | round: 2 }}"></script>

Adding the Widget Container

Next add one or more widget container. This will hold the Call to Action text and button/link:

<div id="paybright-widget-container"></div>

Multiple Widget Containers with Different Pricing in Each

If you’d like the individual widget containers to have different pricing than what is passed to the script simply add this as a data attribute. A use case for this would be a product page with multiple products with different prices.

<div data-pb_financedamount="$29.99" class="paybright-widget-container"></div>

Often this will be dynamically added rather than hard-coded.

Initalize the Script

Unlike the previous versions of the script, nothing happens until you explicitly execute the script. This allows you call the script in your own code after a certain event. For example your product page may load dynamically and it is necessary for that action to be complete before the widget has the appropriate product pricing. If you have no reason to believe you need to defer executing the script, you can do so on the next line:

<script>
    pb_prequalify_init();
</script>

Customization

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>
    pb_prequalify_init({
        triggerElement: "link", 
        triggerClass: "my-class", 
        triggerText:"Find out more",
        lang: "en",
        hideTriggerLeadText: false,        
        noFiguresInModal: false,
        showDecimals: false,
    });
</script>

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 | divided_by: 100.00 | round: 2 }}"></script>
<script>
    pb_prequalify_init({
    	lang: "fr",
    });
</script>		
<div class="paybright-widget-container"></div>