Message styling - Qualifying amount
The focus here will be on a new layout named ‘Buy Now Pay Later Product’ layout which we have just created which will display a message under the product details including the monthly instalment amount.
In order to customise the product level messaging added by simply inserting the variable <actinic:variable name="BuyNowPayLater" /> we can either edit this layout directly or create a new one if different message styling is required for sections vs product pages.
For this example we will create a new layout called ‘Buy Now Pay Later Product’ in the same way as was done for the homepage banner. Delete all code from the layout so that the layout is empty, then add the following code:
Which will look as follows in the layout:
Again, all Buy Now Pay Later messages will have a class of ‘pp-pay-later-message’ and the data attribute data-pp-message.
The example above is currently the same as the message output by the standard ‘Buy Now Pay Later’ layout. We will make some customisations to it and then compare with the standard message.
The following is the above message code updated with some customisations:
As the standard message output for the attribute ‘data-pp-style-layout’ is of type text anyway, it is actually unnecessary, its inclusion here is for demonstrative purposes to show that the message is of the more subtle type to accompany product listings.
The following two data attributes and their uses are described below:
Standard message:
Customised message:
There are further customisations, other than the ones mentioned here, such as text colour, text align (which situates a message to the left, centre or right) etc. which can be found in the documentation in the following link:
https://developer.paypal.com/docs/ch...mize-messages/
Cart and Checkout Page Banners
It is advisable to add a banner to your cart and checkout pages advising buyers of the Pay Later option and displaying the monthly amount.
To do this, set up two new layouts as before, this time named ‘Buy Now Pay Later Cart/Checkout Code’ and ‘Buy Now Pay Later Cart/Checkout Message’.
Open the layout named ‘Buy Now Pay Later Cart/Checkout Code’ and replace all code within with the following:
Now open the layout named ‘Buy Now Pay Later Cart/Checkout Message’ and replace all code within with the following:
Now the ‘Buy Now Pay Later Cart/Checkout Code’ layout must be placed on the cart and checkout pages in a place where the total cart value is available.
Cart Pages
In a standard shop it is recommended to place it at the bottom of the ‘Total Row in Cart’ layout for cart pages. The ‘Buy Now Pay Later Cart/Checkout Message’ page can now be placed anywhere on the page that the message is required. In this example it will be situated directly above the ‘Buy Now Pay Later Cart/Checkout Code’ layout as follows:
This will output the following banner:
Checkout Pages
In a standard shop, for checkout pages, it is recommended to place it in the ‘Checkout Shopping Cart Grid’ layout, directly below the ‘checkout’ table element. The ‘Buy Now Pay Later Cart/Checkout Message’ page can now be placed anywhere on the page that the message is required. In this example it will be situated directly above the ‘Buy Now Pay Later Cart/Checkout Code’ layout as follows:
This will output the following banner:
If you wish to customise the style of the above banner it can be done by opening the ‘Buy Now Pay Later Cart/Checkout Code’ layout and locating the following code:
All code in red above MUST be left unchanged. The code in green pertains to the styling of the message and may be freely changed as discussed earlier in this document and inline with the Pay Pal documentation.
The focus here will be on a new layout named ‘Buy Now Pay Later Product’ layout which we have just created which will display a message under the product details including the monthly instalment amount.
In order to customise the product level messaging added by simply inserting the variable <actinic:variable name="BuyNowPayLater" /> we can either edit this layout directly or create a new one if different message styling is required for sections vs product pages.
For this example we will create a new layout called ‘Buy Now Pay Later Product’ in the same way as was done for the homepage banner. Delete all code from the layout so that the layout is empty, then add the following code:
Code:
<div <actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%21%3d%20%22Search%20Results%22%20AND%20%3cactinic%3avariable%20name%3d%22IsFilteringEnabled%22%20%2f%3e%20%21%3d%20true" >id="id<actinic:variable name="ProductID" />PayLaterMessage"</actinic:block> class="pp-pay-later-message" data-pp-message > <actinic:block if="%3cactinic%3avariable%20name%3d%22IsPreviewMode%22%20%2f%3e">PayPal Pay Later message will appear here</actinic:block> </div>
Which will look as follows in the layout:
Again, all Buy Now Pay Later messages will have a class of ‘pp-pay-later-message’ and the data attribute data-pp-message.
The example above is currently the same as the message output by the standard ‘Buy Now Pay Later’ layout. We will make some customisations to it and then compare with the standard message.
The following is the above message code updated with some customisations:
Code:
<div <actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%21%3d%20%22Search%20Results%22%20AND%20%3cactinic%3avariable%20name%3d%22IsFilteringEnabled%22%20%2f%3e%20%21%3d%20true" >id="id<actinic:variable name="ProductID" />PayLaterMessage"</actinic:block> class="pp-pay-later-message" data-pp-message data-pp-style-layout="text" data-pp-style-logo-type="inline" data-pp-style-text-size="13" > <actinic:block if="%3cactinic%3avariable%20name%3d%22IsPreviewMode%22%20%2f%3e">PayPal Pay Later message will appear here</actinic:block> </div>
As the standard message output for the attribute ‘data-pp-style-layout’ is of type text anyway, it is actually unnecessary, its inclusion here is for demonstrative purposes to show that the message is of the more subtle type to accompany product listings.
The following two data attributes and their uses are described below:
1. data-pp-style-logo-type: This attribute sets the style of the logo in the message, in this case inline so as to be inline with the text content of the message.
2. data-pp-style-text-size: This attribute sets the font size of the message text, in this case 13. It accepts values from 10 – 16 so that the message can be made more / less prominent and in-keeping with the look and feel of your website.
Below is a comparison of a product the standard generated message vs the customised message that we just created.Standard message:
Customised message:
There are further customisations, other than the ones mentioned here, such as text colour, text align (which situates a message to the left, centre or right) etc. which can be found in the documentation in the following link:
https://developer.paypal.com/docs/ch...mize-messages/
Cart and Checkout Page Banners
It is advisable to add a banner to your cart and checkout pages advising buyers of the Pay Later option and displaying the monthly amount.
To do this, set up two new layouts as before, this time named ‘Buy Now Pay Later Cart/Checkout Code’ and ‘Buy Now Pay Later Cart/Checkout Message’.
Open the layout named ‘Buy Now Pay Later Cart/Checkout Code’ and replace all code within with the following:
Code:
<script type="text/javascript">
var decodeEntities = (function() {
// this prevents any overhead from creating the object each time
var element = document.createElement('div');
function decodeHTMLEntities (str) {
if(str && typeof str === 'string') {
// strip script/html tags
str = str.replace(/<script[^>]*>([\S\s]*?)<\/script>/gmi, '');
str = str.replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gmi, '');
element.innerHTML = str;
str = element.textContent;
element.textContent = '';
}
return str;
}
return decodeHTMLEntities;
})();
var pg_cartTotal = '<actinic:variable name="Total" />';
pg_cartTotal = decodeEntities(pg_cartTotal);
pg_cartTotal = pg_cartTotal.substring(1);
console.log('PRICE: ' + pg_cartTotal);
var cartMessageString = '<div id="pp-pay-later-message" class="pp-pay-later-message" data-pp-amount="' + pg_cartTotal + '" data-pp-message data-pp-style-layout="flex" data-pp-style-ratio="20x1" data-pp-style-color="white"></div>';
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById("cartMessage").innerHTML = cartMessageString;
});
</script>
Now open the layout named ‘Buy Now Pay Later Cart/Checkout Message’ and replace all code within with the following:
Code:
<div id="cartMessage"></div>
Cart Pages
In a standard shop it is recommended to place it at the bottom of the ‘Total Row in Cart’ layout for cart pages. The ‘Buy Now Pay Later Cart/Checkout Message’ page can now be placed anywhere on the page that the message is required. In this example it will be situated directly above the ‘Buy Now Pay Later Cart/Checkout Code’ layout as follows:
This will output the following banner:
Checkout Pages
In a standard shop, for checkout pages, it is recommended to place it in the ‘Checkout Shopping Cart Grid’ layout, directly below the ‘checkout’ table element. The ‘Buy Now Pay Later Cart/Checkout Message’ page can now be placed anywhere on the page that the message is required. In this example it will be situated directly above the ‘Buy Now Pay Later Cart/Checkout Code’ layout as follows:
This will output the following banner:
If you wish to customise the style of the above banner it can be done by opening the ‘Buy Now Pay Later Cart/Checkout Code’ layout and locating the following code:
Code:
var cartMessageString = '<div id="pp-pay-later-message" class="pp-pay-later-message" data-pp-amount="' + pg_cartTotal + '" data-pp-message data-pp-style-layout="flex" data-pp-style-ratio="20x1" data-pp-style-color="white"></div>';