Clearpay Messagingjavascript-library

Style Messaging

Fonts

Clearpay Messaging inherits the Font Family that is used to style other paragraph elements on the page. If you would like to use a different font, you may specify it in a CSS rule that targets afterpay-placement:

1afterpay-placement {
2	font-family: Sans-Serif;
3}

Adjust the Size of Clearpay Messaging

Change the size of the Clearpay Messaging by adding the attribute data-size to the <afterpay-placement> tag

Accepted values are: xs, sm, md (default), and lg


The data-size attribute changes both the badge and font size. To change the size of only the Clearpay badge, assign a value to the CSS variable --logo-badge-width

CSS
1afterpay-placement { 
2   --logo-badge-width: 80px;
3}

Logo Types

BadgeLockup

Badge Themes

See the Examples page for implementations

Badge Theme Name
Black on Mint
Mint on Black
Black on White
White on Black

Add the attribute data-modal-theme to the <afterpay-placement> tag to use an alternate background color on the Afterpay Modal.

1<afterpay-placement
2     data-locale="en_GB"
3     data-currency="GBP"
4     data-amount="120.00"
5     data-modal-theme="white">
6</afterpay-placement>

Accepted values are: white, mint