Cookie Consent by Free Privacy Policy Generator Update cookies preferences

Style Messaging


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

afterpay-placement { 
   --logo-badge-width: 80px;

Logo Types


Badge Themes

See the Examples page for implementations

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

Modal Themes

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


Accepted values are: white, mint