Announcement

Collapse
No announcement yet.

Enabling PayPal 'Buy Now Pay Later' messages

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

    Enabling PayPal 'Buy Now Pay Later' messages

    The PayPal 'Buy Now Pay Later' (BNPL) feature is now available in the UK. It is possible to add messaging to your website to promote it, with many different options available. For more information see https://developer.paypal.com/docs/bu...mize-messages/

    This article gives details of how to enable it in the standard Sellerdeck Desktop layouts, along with a sample message placement. Thought must be given to the messaging that you want to use, and also to the placement in your layouts. Typically messages appear after a short delay so they should be below the fold to avoid triggering a poor 'Cumulative Layout Shift' score in the 'Google PageSpeed' metric, which may penalise your rankings.

    Note that this only works when using PayPal Checkout, from version 18.0.5 and version 16.0.8 onwards.

    Enabling Messaging

    Please go to 'Design | Library | Layouts' and scroll down to the group 'JavaScript Header Functions' and expand it, then open the layout 'Standard Javascript Header Functions'.

    In the layout that opens, right click and select 'Find' and enter: -

    PAYPALSDKLIBRARY

    into the 'Search for Text' field and click the 'Find Next in Code' button.

    This should then take you to the following code: -

    Click image for larger version  Name:	PPCodeBlock.png Views:	0 Size:	57.9 KB ID:	554378

    Which appears below the line 'Google Analytics Tracking Code Split SSL'

    Highlight this code from the beginning of the 'block if' to the end of '/block' and replace it with the following code: -

    Code:
    <actinic:block if="%3cactinic%3avariable%20name%3d%22IsPayPalCheckoutEnabled%22%20%2f%3e" >
    <Actinic:PAYPALSDKLIBRARY PAGETYPE="<actinic:variable name="PageType" />">
    <script src="https://www.paypal.com/sdk/js?components=messages,buttons&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-client-token="your-client-token" data-partner-attribution-id="SELLERDECK_Ecom_PPCP"></script>
    </Actinic:PAYPALSDKLIBRARY>
    </actinic:block>
    and click 'OK' to close the layout, and then close the library.


    Example Message Placement

    Messages are inserted into your page using a div as per the instructions at https://developer.paypal.com/docs/bu...mize-messages/

    As an example, a standard message could be placed into the header. To do this, go to the 'Design' tab within the software, and select 'Content Page' in the 'Select Page Type' drop down box.

    Go to the menu 'Window' and ensure that 'Design Tree' and 'Layout Code' are selected, and then go to the bottom right of the panel and click the tab 'Design Tree' and highlight the very top layout in the tree which will be your 'Outer Layout'. In the example used here, the 'Outer Layout' is 'Responsive Outer Layout'.

    Move to your left and select the tab 'Layout Code - <OUTER LAYOUT NAME>', in the example used here, it would say 'Layout Code - Responsive Outer Layout'.

    Then, wherever you would like the PayPal message to display enter the following layer: -

    Code:
    <div data-pp-message></div>
    and click 'Apply' and upload the site.

    In the example used here, it was entered just below the 'HeaderArea' layer:


    Click image for larger version  Name:	DefaultSite.png Views:	0 Size:	256.0 KB ID:	554380

    Which produced a display as shown below:

    Click image for larger version  Name:	PayPalMessage.png Views:	0 Size:	28.2 KB ID:	554379


    NOTE: There are alternative coding options available given on the PayPal site here: https://developer.paypal.com/docs/bu.../gb/integrate/
    Attached Files
    Last edited by G.W.Green; 13-Aug-2021, 08:44 AM.
Working...
X