Magento

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 Magento.

How to Add the Widgets to Your Magento Store

Using the PayBright Plugin

The most simple way to add the widget to your Magento store is to use PayBright's built-in widget code. In the same section where you set your PayBright configurations you will see a toggle labelled 'Prequalify Widget'. By enabling this toggle the PayBright widget will display under in product pages under the 'Add to Cart' button and in the cart page under the 'Checkout' button.

Using the Manual Method

If the paybright plugin method does not work for adding the widget to your page, or you require a greater amount of customization to the widget, you may want to manually add the code.

To do so, ensure that the widget toggle is now disabled. Then use the following steps to add the code to the Product and Cart pages.

1. Product Page

Paste the following code provided into your theme’s > template > catalog > product > view > addtocart.phtml file after ‘Add to Cart’ button. (Path example – app/design/your_theme/namespace/template/catalog/product/view/addtocart.phtml)

Note: your path might be different

For Sandbox

<?php
 
$pb_product_price = Mage::helper('core')->currency($_product->getPrice(), true, false);
 
echo "<script id='pb_prequalify' type='text/javascript' src='https://sandbox.paybright.com/dist/sdk.js?public_key=PLEASE ENTER YOUR API KEY HERE&financedamount=$$pb_product_format'></script>
<script>
    pb_prequalify_init();
</script>
<div id='paybright-widget-container'></div>";

?>

For Production

<?php
 
$pb_product_price = Mage::helper('core')->currency($_product->getPrice(), true, false);
 
echo "<script id='pb_prequalify' type='text/javascript' src='https://app.paybright.com/dist/sdk.js?public_key=PLEASE ENTER YOUR API KEY HERE&financedamount=$$pb_product_format'></script>
<script>
    pb_prequalify_init();
</script>
<div id='paybright-widget-container'></div>";

?>

How to position the code on your page

If you need to customize this code - example: use the French widget or disable the leading text see the Customize Your Script Section

2. Cart Page

Paste the following code provided into your theme’s > template > checkout > cart > totals.phtml file after ‘shopping-cart-totals-table’. (Path example – app/design/your_theme/namespace/template/checkout/cart/totals.phtml)

Note: your path might be different

For Sandbox

<?php 
 $pb_cart_price = Mage::getModel('directory/currency')->format(Mage::helper('checkout')->getQuote()->getGrandTotal(),array('display'=>Zend_Currency::NO_SYMBOL),false);

echo "<script id='pb_prequalify' type='text/javascript' src='https://sandbox.paybright.com/dist/sdk.js?public_key=PLEASE ENTER YOUR API KEY HERE&financedamount=$$pb_cart_price'></script>
<script>
    pb_prequalify_init();
</script>
<div id='paybright-widget-container'></div>";
?>

For Production

<?php 
 $pb_cart_price = Mage::getModel('directory/currency')->format(Mage::helper('checkout')->getQuote()->getGrandTotal(),array('display'=>Zend_Currency::NO_SYMBOL),false);

echo "<script id='pb_prequalify' type='text/javascript' src='https://app.paybright.com/dist/sdk.js?public_key=PLEASE ENTER YOUR API KEY HERE&financedamount=$$pb_cart_price'></script>
<script>
    pb_prequalify_init();
</script>
<div id='paybright-widget-container'></div>";
?>

How to position the code on your page

If you need to customize this code - example: use the French widget or disable the leading text see the Customize Your Script Section

Customize Your Script

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.

<?php 
echo "<script id='pb_prequalify' type='text/javascript' src='https://app.paybright.com/dist/sdk.js?public_key=PLEASE ENTER YOUR API KEY HERE&financedamount=$$pb_product_format'></script>
<script>
    pb_prequalify_init({
        triggerElement: "link", 
        triggerClass: "my-class", 
        triggerText:"Find out more",
        lang: "en",
        hideTriggerLeadText: false,        
        noFiguresInModal: false,
        showDecimals: false,
    });
</script>
<div id='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:

<?php 
$pb_product_price = Mage::helper('core')->currency($_product->getPrice(), true, false);

echo "<script id='pb_prequalify' type='text/javascript' src='https://app.paybright.com/dist/sdk.js?public_key=PLEASE ENTER YOUR API KEY HERE&financedamount=$$pb_product_format'></script>
<script>
    pb_prequalify_init({      
        lang: "fr",
  });
</script>
<div id='paybright-widget-container'></div>";
?>

Removing the Leading Script on the Product Page:

<?php 
$pb_product_price = Mage::helper('core')->currency($_product->getPrice(), true, false);

echo "<script id='pb_prequalify' type='text/javascript' src='https://app.paybright.com/dist/sdk.js?public_key=PLEASE ENTER YOUR API KEY HERE&financedamount=$$pb_product_format'></script>
<script>
    pb_prequalify_init({       
        hideTriggerLeadText: true,               
    });
</script>
<div id='paybright-widget-container'></div>";
?>