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

[G.W.Green]

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.



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.



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:




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

Non-qualifying amount -



Qualifying amount -



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:

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

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

Click OK.

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

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:

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





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