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>
Updated over 3 years ago