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:

afterpay-placement {
	font-family: Sans-Serif;
}

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
afterpay-placement { 
   --logo-badge-width: 80px;
}

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.

<afterpay-placement
     data-locale="en_GB"
     data-currency="GBP"
     data-amount="120.00"
     data-modal-theme="white">
</afterpay-placement>

Accepted values are: white, mint