Announcement

Collapse
No announcement yet.

PayPal’s Buy Now Pay Later styling and configuration. Part 2

Collapse
This topic is closed.
X
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    PayPal’s Buy Now Pay Later styling and configuration. Part 2

    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:

    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:


    Click image for larger version

Name:	Picture11.png
Views:	255
Size:	10.2 KB
ID:	555336


    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:


    Click image for larger version

Name:	Picture12.png
Views:	147
Size:	28.8 KB
ID:	555337


    Customised message:


    Click image for larger version

Name:	Picture13.png
Views:	152
Size:	29.0 KB
ID:	555338


    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>
    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:


    Click image for larger version

Name:	Picture14.png
Views:	163
Size:	80.8 KB
ID:	555342


    This will output the following banner:


    Click image for larger version

Name:	Picture15.png
Views:	144
Size:	44.1 KB
ID:	555340


    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:

    Click image for larger version

Name:	Picture16.png
Views:	115
Size:	66.6 KB
ID:	555341


    This will output the following banner:


    Click image for larger version

Name:	Picture17.png
Views:	139
Size:	38.3 KB
ID:	555339


    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>';
    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.


Working...
X