How to turn on Afterpay badge on CPB product pages

In the file customproductbuilder-initializer.liquid find the line:

{{ customproductbuilder.js | asset_url | script_tag }}

Add apostrophes to it, if it doesn't have:

{{ 'customproductbuilder.js' | asset_url | script_tag }}

If it doesn't exist, create a new asset called "customproductbuilder.js"

Open it. If it's a new created file, just paste the code:

(function() {

document.body.addEventListener('CPB_ON_PRODUCT_MOUNTED', init);

function init() {
addAfterPay();
}

function addAfterPay() {
if(!window.Afterpay || !window.jQuery) return;
const productPriceWrapper = document.querySelector('.cpb-panels-container .cpb-product-full-price');
const productPrice = productPriceWrapper.querySelector('.cpb-product-price');
productPriceWrapper.id = 'ProductPrice';
Afterpay.init(jQuery);
const afterpayEl = productPriceWrapper.parentNode.querySelector('.afterpay-paragraph');
let lastPrice = Afterpay.extractPriceFromHTML(productPrice.innerText);
document.body.addEventListener('CPB_ON_OPTIONS_UPDATE', function() {
const currentPrice = Afterpay.extractPriceFromHTML(productPrice.innerText);
if(lastPrice !== currentPrice) {
Afterpay.updateParagraph(jQuery(afterpayEl), currentPrice);
lastPrice = currentPrice;
} 
});
}

})();

If it already contains something then you'll need to add the addAfterPay function:

function addAfterPay() {
if(!window.Afterpay || !window.jQuery) return;
const productPriceWrapper = document.querySelector('.cpb-panels-container .cpb-product-full-price');
const productPrice = productPriceWrapper.querySelector('.cpb-product-price');
productPriceWrapper.id = 'ProductPrice';
Afterpay.init(jQuery);
const afterpayEl = productPriceWrapper.parentNode.querySelector('.afterpay-paragraph');
let lastPrice = Afterpay.extractPriceFromHTML(productPrice.innerText);
document.body.addEventListener('CPB_ON_OPTIONS_UPDATE', function() {
const currentPrice = Afterpay.extractPriceFromHTML(productPrice.innerText);
if(lastPrice !== currentPrice) {
Afterpay.updateParagraph(jQuery(afterpayEl), currentPrice);
lastPrice = currentPrice;
} 
});
}

And call it when the product is already mounted.

addAfterPay();