Enabling PayPal 'Buy Now Pay Later' messages (pre v18.2.0)

[G.W.Green]

Overview

These instructions apply to Sellerdeck Desktop versions v16 and v18 prior to 18.2.0 which have PayPal Checkout enabled.

The following instruction will enable the Buy Now Pay Later messages and the option for buyers to Pay by instalments.

After applying these changes, upgrading to 18.2.0 or later, will replace some of the code to bring it into line with 18.2.0 but the positioning of the messages will not be altered.

Applying these changes implies ‘Enable Buy Now Pay Later’. The feature cannot subsequently be turned off without either removing the changes or upgrading to 18.2.0 where the feature can be turned off in the PayPal configuration in Sellerdeck desktop.

The PayPal SDK Javascript needs to be loaded for al pages but the URL is different depending on the page being loaded.
Change the PayPal SDK

Edit the layout 'Standard Javascript Header Functions' and locate the code highlighted in this screenshot:-




Replace the highlighted code with the following code: -

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsNotPreviewMode%22%20%2f%3e%20AND%0d%3cactinic%3avariable%20name%3d%22IsPayPalCheckoutEnabled%22%20%2f%3e" >
<script>g_PayPalPayLater=true</script>
<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%21%3d%20%27Shopping%20Cart%27%20AND%0d%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%21%3d%20%27Checkout%20Page%200%27%20AND%0d%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%21%3d%20%27Checkout%20Page%202%27" >
<script src="https://www.paypal.com/sdk/js?components=messages&client-id=<actinic:variable name="PayPalCheckoutClientKey" />&integration-date=2020-02-20&currency=<actinic:variable name="DefaultIntCurrencySymbol" />" data-partner-attribution-id="SELLERDECK_Ecom_PPCP"></script>
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Shopping%20Cart%27%20OR%0d%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Checkout%20Page%200%27%20OR%0d%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Checkout%20Page%202%27" >
<Actinic:PAYPALSDKLIBRARY PAGETYPE="<actinic:variable name="PageType" />">
<script src="https://www.paypal.com/sdk/js?components=buttons,messages&enable-funding=paylater&client-id=<actinic:variable name="PayPalCheckoutClientKey" />&integration-date=2020-02-20<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Shopping%20Cart%27%20OR%0d%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Checkout%20Page%200%27" >&commit=false</actinic:block>" data-partner-attribution-id="SELLERDECK_Ecom_PPCP" <actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Checkout%20Page%202%27" >data-client-token="your-client-token"</actinic:block>></script>
</Actinic:PAYPALSDKLIBRARY>
</actinic:block>
</actinic:block>

The new code should look like the highlighted code in this screen shot: -




Changes to 'actinicextras.js'

Locate the following code in 'actinicextras.js' :-

if (elemPriceExc)
{
elemPriceExc.innerHTML = FormatPrices(nTotalExcTax);
}
if (elemPriceInc)
{
elemPriceInc.innerHTML = FormatPrices(nTotalIncTax);
}

and replace this with: -

var sProductPrice;
if (elemPriceExc)
{
elemPriceExc.innerHTML = FormatPrices(nTotalExcTax);
sProductPrice = elemPriceExc.innerHTML;
}
if (elemPriceInc)
{
elemPriceInc.innerHTML = FormatPrices(nTotalIncTax);
sProductPrice = elemPriceInc.innerHTML;
}
if (IsPayPalPayLaterEnabled() &&
sProductPrice)
{
var nPrice = Number(sProductPrice.match(/[0-9,]+\.[0-9][0-9]/)[0].replace(',',''));
var elemMessage = document.getElementById('id' + oProd.sProdRef + 'PayLaterMessage');
elemMessage.setAttribute("data-pp-amount", nPrice);
paypal.Messages().render(".pp-pay-later-message");
}

Add the following code to the end of 'actinicextras.js': -

function UpdatePayPalPayLaterMessages()
{
//
// Grab all product listings on the page
//
var listProducts = Array.from(document.querySelectorAll(".product-details, #product-page-body, .std-product-details"));
//
// Loop through each product listing
//
$.each(listProducts, function(key, elemProduct )
{
//
// Grab child element of this .listing element that has the "pp-pay-later-message" classname
//
var elemMessage = elemProduct.querySelector(".pp-pay-later-message");
if (elemMessage) // nothing to do if no message element
{
//
// Extract the price of the product by grabbing the text content of the
// element which contains the price.
//
var sProductPrice = elemProduct.querySelector("span.product-price");
if (!sProductPrice)
{
//
// No span defined price so try p tag
//
sProductPrice = elemProduct.querySelector("p.product-price");
}
if (sProductPrice) // nothing to do if no price element
{
var nPrice = Number(sProductPrice.innerText.match(/[0-9,]+\.[0-9][0-9]/)[0].replace(',',''));
//
// Set data-pp-amount on this element. The PayPal SDK continuously
// monitors message elements for changes to it's attributes, so the
// message is updated automatically to reflect this amount. This is
// useful if you need to update the amount based on cart amount, sales,
// coupon codes, etc.
//
elemMessage.setAttribute("data-pp-amount", nPrice);
elemMessage.setAttribute("data-pp-placement", 'product');
}
}
});
}

/***********************************************************************
*
* RenderPayPalPayLaterMessages - Render all Pay Later messages
*
***********************************************************************/

function RenderPayPalPayLaterMessages()
{
paypal
.Messages({
style: {
layout: "text",
logo: {
type: "alternative",
},
text: {
size: 16
}
},
})
.render(".pp-pay-later-message");
}

/***********************************************************************
*
* IsPayPalPayLaterEnabled - Check if PayPal Pay Later is enabled
*
* Returns: - true/false
*
************************************************************************/

function IsPayPalPayLaterEnabled()
{
if (typeof(g_PayPalPayLater) !== "undefined" && g_PayPalPayLater)
{
return true;
}
return false;
}

$(document).ready(function() {
//
// Set any PayPal PayLater messages on the page unless this is a filter page
//
if (!IsFilterAsDefaultView() &&
IsPayPalPayLaterEnabled())
{
UpdatePayPalPayLaterMessages();
RenderPayPalPayLaterMessages();
}
});

Changes to 'actinicsearch.js'

Edit ActinicSearch.js and look for the code:-

function UpdateProductDetails(arrayJSONResponse, bNeedFilter)
{
var nProductCount = arrayJSONResponse.ProductDetails.ProductInfoCount;
if (typeof(arrayJSONResponse.SectionDetails) !== 'undefined' &&
arrayJSONResponse.SectionDetails.SectionInfoCount != 0) // section details found
{
CacheSectionDetails(arrayJSONResponse.SectionDetails.SectionInfoSet); // cache section details
}
if (nProductCount != 0) // product details found
{
var arrProductDetailsSet = new Array();
arrProductDetailsSet = arrayJSONResponse.ProductDetails.ProductInfoSet;
CacheProductDetails(arrProductDetailsSet);// cache product details
CacheProductDetailsWithFullPermutation(bNeedFilter);
}
}

And replace with: -

function UpdateProductDetails(arrayJSONResponse, bNeedFilter)
{
var nProductCount = arrayJSONResponse.ProductDetails.ProductInfoCount;
if (typeof(arrayJSONResponse.SectionDetails) !== 'undefined' &&
arrayJSONResponse.SectionDetails.SectionInfoCount != 0) // section details found
{
CacheSectionDetails(arrayJSONResponse.SectionDetails.SectionInfoSet); // cache section details
}
if (nProductCount != 0) // product details found
{
var arrProductDetailsSet = new Array();
arrProductDetailsSet = arrayJSONResponse.ProductDetails.ProductInfoSet;
CacheProductDetails(arrProductDetailsSet);// cache product details
CacheProductDetailsWithFullPermutation(bNeedFilter);
//
// Set any PayPal PayLater messages on the page
//
if (IsPayPalPayLaterEnabled())
{
UpdatePayPalPayLaterMessages();
RenderPayPalPayLaterMessages();
}
}
}

Place holders for the PayPal Buy Now Pay Later messages

Download and import the partial design snapshot appropriate for your Sellerdeck Desktop version. This will add new design elements that are needed for Buy Now Pay Later without affecting your current site design: -

• For Sellerdeck Desktop v16: https://downloads.sellerdeck.com/PayPal-BNPL-v16.acd

• For Sellerdeck Desktop v18: https://downloads.sellerdeck.com/PayPal-BNPL-v18.acd

Then add the following wherever the product message is required: -

<actinic:variable name="BuyNowPayLater" />

Message Positioning

The changes described above will present a Buy Now Pay Later message under the PayPal button during checkout. The instalment details are included in the message of the order total is between £30 and £2,000.

Similar message may also be shown for individual products by adding the selector described above in the appropriate product layouts.

When placed in the appropriate layouts, the message can be shown on section pages, single product pages, filtered pages and search results. Where applicable, the messages are adjusted for dynamic prices.

The recommended positions are: -

1. For the Product Page: in the 'Product Page Body RWD layout (or in older designs in the Product Page Body layout) as shown.





2. For product entries in Subsection pages: in the Responsive Product List layout, below the ProductLayoutRWD selector (or in older designs in the Tabular Product List layout) as shown.





3. For product entries in search results: near the bottom of the Standard Search Result layout (or in older designs the Tabular Search Result layout) as shown.





Message styling and options

PayPal supports several styling and configuration options, see https://developer.paypal.com/docs/ch...mize-messages/.

Future proof

When upgrading to a newer version of Sellerdeck, the scripts 'actinicextras.js' and 'actinicsearch.js' will get replaced. So long as the site is upgraded to 18.2 or later and no changes have been made to the 2 scripts then the Pay later feature will continue to work as before.

For this reason, any styling should be applied to the DIVs added to the product pages and not via the javascript in 'actinicextras.js'.