Pay Later Messages with Custom Fonts

PayPal offers some merchants the option to customize the font used in Pay Later Messages, for both text and flex layouts. This feature consist of two options: fontFamily and fontSource. If both options are given, the fontFamily value will be used as a fallback. If the browser fails to use all of the merchant provided values, then messaging will fallback to using the fonts PayPal specifies (Helvetica, Arial, sans-serif).

Font Family

fontFamily allows the merchant to supply one or more values they want messaging to use as their font-family value.

These values should be the literal name of a font the browser should attempt to use. Using this option requires the font is installed on the client for the browser to use.

Alternatively, you can also use a generic font-family name, such as:

• serif
• sans-serif
• monospace
• cursive
• fantasy

The browser will then attempt to use a font that most closely matches the generic. For example, if given monospace, the browser may render the font using Consolas, Courier, or some other font that could be considered monospaced.

Examples

Here are some examples of how to use fontFamily.

Inline HTML, One Custom Font

1<div 
2    data-pp-message 
3    data-pp-style-text-fontfamily="Times New Roman">
4</div>

Inline HTML, Multiple Custom Fonts

1<!--
2    The browser will attempt to use the fonts in order, 
3    falling back to the next available value if one cannot be used.
4-->
5<div 
6    data-pp-message 
7    data-pp-style-text-fontfamily="['Georgia','Calibri']">
8</div>

Javascript, One Custom Font

1<script>
2    paypal
3        .Messages({
4            style: {
5                text: {
6                    fontFamily: 'Arial'
7                }
8            }
9        })
10        .render('.messages1');
11</script>

Javascript, Multiple Custom Fonts

1<script>
2    // The browser will attempt to use the fonts in order, 
3    // falling back to the next available value if one cannot be used.
4    paypal
5        .Messages({
6            style: {
7                text: {
8                    fontFamily: ['Courier', 'Consolas', 'monospace']
9                }
10            }
11        })
12        .render('.messages2');
13</script>

Font Source

fontSource allows the merchant to supply one or more values that are a uri to some font they wish messaging to use. PayPal uses an allow list to ensure that only approved values are used, protecting against security and compliance concerns. Please reach out to your account manager and provide them a list or the exact url values you wish to use, and we wil add them to the allow list for your account.

After the values have been added to PayPal's allow list, the merchant will be able to use the values in fontSource to change the font used by the Pay Later message.

This works by creating a custom font-face definition for each fontSource value provided. Each fontSource value should be the literal url PayPal has added to the allowlist, and will be used in the src descriptor for the font-face. The PayPal iframe should then load these fonts from the cache or make a web request to the url to retrieve the font. These custom font-faces are then provided as the font-family for the messaging html elements.

The merchant may use whichever font formats they wish.

Examples

Inline HTML, One Custom Font

You can set the data-pp-style-text-fontsource html attribute to specify the fontSource it should use.

1<div 
2    data-pp-message 
3    data-pp-style-text-fontfamily="https://merchant.com/Meie_Script.woff2">
4</div>

Inline HTML, Multiple Custom Fonts

1<!--
2    The browser will attempt to use the fonts in order, 
3    falling back to the next available value if one cannot be used.
4-->
5<div 
6    data-pp-message 
7    data-pp-style-text-fontsource="['https://merchant.com/assets/fonts/Droid+Sans+Mono+Awesome.ttf', 'https://merchant.com/assets/fonts/SourceCodePro%20Powerline%20Awesome%20Regular.ttf']">
8</div>

Javascript, One Custom Font

1<script>
2    paypal
3        .Messages({
4            style: {
5                text: {
6                    fontSource: 'https://merchant.com/Open_Sans.woff2'
7                }
8            }
9        })
10        .render('.messages1');
11</script>

Javascript, Multiple Custom Fonts

1<script>
2    // The browser will attempt to use the fonts in order, 
3    // falling back to the next available value if one cannot be used.
4    paypal
5        .Messages({
6            style: {
7                text: {
8                    fontSource: [
9                        'https://merchant.com/assets/fonts/Droid+Sans+Mono+Awesome.ttf',
10                        'https://merchant.com/assets/fonts/SourceCodePro%20Powerline%20Awesome%20Regular.ttf'
11                    ]
12                }
13            }
14        })
15        .render('.messages2');
16</script>

Developing in Sandbox

While developing in sandbox, merchants can test the appearance of their Pay Later Messages by one of the following methods.

Local Font Family

If the merchant installs the font onto their local machine, then the merchant can use the fontFamily attribute select the name of their custom font.

Edit Iframe

The merchant can also edit the html within the messaging iframe to directly specify which urls they wish to test. For example,

1<style>
2@font-face {
3     font-family: 'Merchant Custom Font 0';
4     src: url('https://merchant.com/assets/fonts/CustomFontA.ttf');
5}
6
7@font-face {
8     font-family: 'Merchant Custom Font 1';
9     src: url('https://merchant.com/assets/fonts/CustomFontB.woff');
10}
11
12.message__messaging,
13.message__messaging .message__headline span,
14.message__messaging .message__sub-headline span,
15.message__messaging .message__disclaimer span { 
16    font-family: 'Merchant Custom Font 0', 'Merchant Custom Font 1', Helvetica, Arial, sans-serif;
17    font-size: 12px; 
18}
19</style>