WooCommerce

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

How to Add the Widgets to Your WooCommerce Store

Go to your backend server or platform where your cp-content files are held. This could be in a web hosting control panel like cPanel or another similar hosting software.

Cart Page

You will need to find the file where your cart page is stored - the file will be named cart.php

📘
Hint
There are likely multiple files named cart.php in your directory. The one you should look for is under the path wp-content/plugins/woocommerce/templates/cart/cart.php. Alternatively add it to your child theme under wp-content/themes/your-theme-child/functions.php

Once located add the following code

In Sandbox

<?php
function pb_modal_cart() {
    $pb_cart_price =  WC()->cart->total; 
    
   echo "<script id='pb_prequalify' type='text/javascript' src='https://sandbox.paybright.com/dist/sdk.js?public_key=INSERT_PUBLIC_KEY&financedamount=$$pb_cart_price'></script>
<script>
    pb_prequalify_init();
</script>
<div id='paybright-widget-container'></div>";
}
add_action( 'woocommerce_after_cart', 'pb_modal_cart', 1);
 
?>

In Production

<?php
function pb_modal_cart() {
    $pb_cart_price =  WC()->cart->total; 
    
   echo "<script id='pb_prequalify' type='text/javascript' src='https://app.paybright.com/dist/sdk.js?public_key=INSERT_PUBLIC_KEY&financedamount=$$pb_cart_price'></script>
<script>
    pb_prequalify_init();
</script>
<div id='paybright-widget-container'></div>";
}
add_action( 'woocommerce_after_cart', 'pb_modal_cart', 1);
 
?>

The code snippet in the cart.php page should be positioned like this

do_action( 'woocommerce_before_cart' ); ?>
<?php
function pb_modal_cart() {
    $pb_cart_price =  WC()->cart->total; 
    
   echo "<script id='pb_prequalify' type='text/javascript' src='https://app.paybright.com/dist/sdk.js?public_key=INSERT_PUBLIC_KEY&financedamount=$$pb_cart_price'></script>
<script>
    pb_prequalify_init();
</script>
<div id='paybright-widget-container'></div>";
}
add_action( 'woocommerce_after_cart', 'pb_modal_cart', 1);
 
?>


<form class="woocommerce-cart-form" action="<?php echo esc_url( wc_get_cart_url() ); ?>" method="post">
	<?php do_action( 'woocommerce_before_cart_table' ); ?>

To customize your widget, see Section Customize Your Widget

Product Page

You will need to find the file where your product page content is stored - the file will be named single-product.php

📘
Hint
There are likely multiple files named single-product.php in your directory. The one you should look for is under the path wp-content/plugins/woocommerce/templates/single-product.php. Alternatively add it to your child theme under wp-content/themes/your-theme-child/functions.php

Once located add the following code

In Sandbox

<?php
function pb_modal() {
    $pb_product_price = get_post_meta( get_the_ID(), '_price', true);
 
    $pb_product_format = number_format((float)$pb_product_price, 2, '.', '');
    echo "<script id='pb_prequalify' type='text/javascript' src='https://sandbox.paybright.com/dist/sdk.js?public_key=INSERT_PUBLIC_KEY&financedamount=$$pb_product_format'></script>
<script>
    pb_prequalify_init();
</script>
<div id='paybright-widget-container'></div>";
}
add_action( 'woocommerce_after_add_to_cart_form', 'pb_modal', 1);
 
?>

In Production

<?php
function pb_modal() {
    $pb_product_price = get_post_meta( get_the_ID(), '_price', true);
 
    $pb_product_format = number_format((float)$pb_product_price, 2, '.', '');
    echo "<script id='pb_prequalify' type='text/javascript' src='https://app.paybright.com/dist/sdk.js?public_key=INSERT_PUBLIC_KEY&financedamount=$$pb_product_format'></script>
<script>
    pb_prequalify_init();
</script>
<div id='paybright-widget-container'></div>";
}
add_action( 'woocommerce_after_add_to_cart_form', 'pb_modal', 1);
 
?>

The code snippet in the single-product.php page should be positioned like this

defined( 'ABSPATH' ) || exit;

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly
}

get_header( 'shop' ); ?>

<?php
function pb_modal() {
    $pb_product_price = get_post_meta( get_the_ID(), '_price', true);
 
    $pb_product_format = number_format((float)$pb_product_price, 2, '.', '');
    echo "<script id='pb_prequalify' type='text/javascript' src='https://app.paybright.com/dist/sdk.js?public_key=INSERT_PUBLIC_KEY&financedamount=$$pb_product_format'></script>
<script>
    pb_prequalify_init();
</script>
<div id='paybright-widget-container'></div>";
}
add_action( 'woocommerce_after_add_to_cart_form', 'pb_modal', 1);
 
?>

	<?php
		/**
		 * woocommerce_before_main_content hook.
		 *
		 * @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
		 * @hooked woocommerce_breadcrumb - 20
		 */
		do_action( 'woocommerce_before_main_content' );
	?>

		<?php while ( have_posts() ) : the_post(); ?>

To customize your widget, see Section Customize Your Widget

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.

<?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
function pb_modal() {
    $pb_product_price = get_post_meta( get_the_ID(), '_price', true);
 
    $pb_product_format = number_format((float)$pb_product_price, 2, '.', '');
    echo "<script id='pb_prequalify' type='text/javascript' src='https://app.paybright.com/dist/sdk.js?public_key=INSERT_PUBLIC_KEY&financedamount=$$pb_product_format'></script>
<script>
     pb_prequalify_init({      
        lang: 'fr',
  });
</script>
<div id='paybright-widget-container'></div>";
}
add_action( 'woocommerce_after_add_to_cart_form', 'pb_modal', 1);
 
?>

Removing the Leading Script on the Product Page:

<?php
function pb_modal() {
    $pb_product_price = get_post_meta( get_the_ID(), '_price', true);
 
    $pb_product_format = number_format((float)$pb_product_price, 2, '.', '');
    echo "<script id='pb_prequalify' type='text/javascript' src='https://app.paybright.com/dist/sdk.js?public_key=INSERT_PUBLIC_KEY&financedamount=$$pb_product_format'></script>
<script>
     pb_prequalify_init({      
        hideTriggerLeadText: false, 
  });
</script>
<div id='paybright-widget-container'></div>";
}
add_action( 'woocommerce_after_add_to_cart_form', 'pb_modal', 1);
 
?>

WooCommerce

How to Add the Widgets to Your WooCommerce Store

Cart Page

📘
Hint

Product Page

📘
Hint

Customize your Widget

Examples

How to Add the Widgets to Your WooCommerce Store

Cart Page

📘Hint

Product Page

📘Hint

Customize your Widget

Examples

📘
Hint

📘
Hint