Announcement

Collapse
No announcement yet.

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

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

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

    Overview

    These instructions apply to all Sellerdeck Desktop versions which have PayPal Checkout enabled.

    Once Buy Now Pay Later has been enabled there are various customisations which can be implemented. These instructions will highlight some of the most important changes which can be implemented and provide the necessary information on how to do so.

    Styling, Configuration and Placement for Upstream Messaging and Buttons

    PayPal supports several styling and configuration options, here we will look at how to implement the different options available for:
    • Upstream messaging, which simply refers to the Pay Later related messaging placed throughout the website
    • Checkout buttons
    Upstream Messaging

    The strategic placement of messaging across a website is the most important factor in driving increased conversions through Buy Now Pay Later. Correctly positioned, it ensures that no matter where on the site the customer is, they are aware that the payment option is available to them, and that they can spread the cost of their purchase, interest free. It is designed to promote both more frequent and larger purchases.


    Types of messaging: Qualifying / Non-Qualifying amount

    Qualifying amount messages: This refers to messages which display the amount of the monthly instalment to be paid. These are to be used where a product / cart price is shown.

    Click image for larger version  Name:	Picture1.png Views:	0 Size:	36.6 KB ID:	555329

    Non-qualifying amount messages: This refers to messages which draw attention to the option of Buy now Pay Later but don’t specify an instalment amount. These are to be used throughout the site where a specific price is not available or relevant, on the home page for example.

    Click image for larger version  Name:	Picture2.png Views:	0 Size:	34.9 KB ID:	555327

    Message Placement


    The following table will highlight the recommended placement of messages, and whether those messages should be qualifying or non-qualifying amount messages.


    Page Message Type
    Home Non-qualifying amount
    Section / Category Depends on whether product prices are displayed or not:
    Prices displayed – qualifying amount
    Prices NOT displayed – non-qualifying amount
    Product Qualifying amount
    Cart Qualifying amount
    Checkout Qualifying amount


    Message Customisation and Styling

    Buy Now Pay Later messaging can be styled and customised in a number of ways, including their appearance and whether the message type is of qualifying or non-qualifying amount. To customise the appearance and styling of the messages, navigate to the ‘Buy Now Pay Later’ layout and locate the following code:


    Click image for larger version  Name:	Picture3.png Views:	0 Size:	18.1 KB ID:	555330

    This will output what is a standard message with the following styling:

    Non-qualifying amount -

    Click image for larger version  Name:	Picture4.png Views:	0 Size:	14.8 KB ID:	555326

    Qualifying amount -

    Click image for larger version  Name:	Picture5.png Views:	0 Size:	10.6 KB ID:	555325

    It is likely the case that different message stylings are required for different parts of the site. A common example would be a noticeable banner on the homepage vs more subtle messaging below a product.

    Creating duplicate layouts

    In order to achieve this it is required to create a duplicate of the ‘Buy Now Pay Later’ layout for each type of message. The new layouts should be named semantically so that it is easy to identify which layout to use in a given place on the site. For example, you may name some layouts as follows, ‘Buy Now Pay Later Home’, ‘Buy Now Pay Later Side Bar’, ‘Buy Now Pay Later Product and Cart’.

    Create the new layout as per the following instructions:


    1. Open the design library and locate the ‘Buy Now Pay Later’ layout within the PayPal Checkout category:

    Click image for larger version  Name:	Picture6.png Views:	0 Size:	1.4 KB ID:	555328


    2. Right click on the ‘Buy Now Pay Later’ layout and select ‘New Layout’. This will open the following dialog box:

    Click image for larger version  Name:	Picture7.png Views:	0 Size:	4.8 KB ID:	555332



    Leave the ‘Based On’ drop down as ‘Buy Now Pay Later’ but change the ‘Layout Name’ to the new desired layout name eg.

    Click image for larger version  Name:	Picture8.png Views:	0 Size:	1.1 KB ID:	555331

    Click OK.

    3. The layout we have just created can now be customised and used where appropriate.

    Click image for larger version  Name:	Picture9.png Views:	0 Size:	2.3 KB ID:	555333





    Message styling - Non-qualifying amount

    The focus here will be on the ‘Buy Now Pay Later Home’ layout which we have just created which will display a homepage banner to users.

    Delete all code from the layout so that the layout is empty, then add the following code:

    Code:
    <div
    class="pp-pay-later-message"
    data-pp-message
    data-pp-placement="home"
    data-pp-style-layout="flex"
    data-pp-style-ratio="8x1"
    data-pp-style-color="white"
    ></div></br>

    When placed at the top of the homepage of a standard shop, the above message element will render a banner as follows:


    Click image for larger version  Name:	Picture10.png Views:	0 Size:	68.3 KB ID:	555334


    This message is of the non-qualifying amount type.

    All Buy Now Pay Later messages will have a class of ‘pp-pay-later-message’ and the data attribute data-pp-message.

    We will now look at each subsequent data attribute and determine it’s use.


    1. data-pp-placement: The value of this data attribute gives information as to where on the site the message is situated. The above example has the value ‘home’ to indicate that the message is on the homepage. The full range of accepted values is as follows: home, category, product, cart, payment.

    2. data-pp-style-layout: This attribute can be set between flex as in the example or text for more subtle messaging.

    The flex setting is for larger more eye catching banners such as those on the homepage. They create a message in a flexible div which will expand or shrink to fit the space around it up to a maximum width. The maximum width depends on the ratio set in the next data attribute.

    3. data-pp-style-ratio: This attribute sets the aspect ratio of the message, in this case 8x1. A full list of all available ratios and what their output looks like, can be found in the link at the end of this section.

    4. data-pp-style-color: This attribute sets the background colour of the banner / message and is set to ‘white’ in the example. All further colours can be found in the link at the end of this section.





    There are further customisations, other than the ones mentioned here, such as text colour, logo type etc. which can be found in the documentation in the following link:

    https://developer.paypal.com/docs/ch...mize-messages/


    Click to go to PayPal’s Buy Now Pay Later styling and configuration. Part 2
    Last edited by G.W.Green; 14-Jun-2022, 04:04 PM.
Working...
X