Docs

Customising CSS

Custom CSS can be used to style the checkout webpages.

NOTE

Custom CSS doesn’t apply to emails

The payment submit button uses the accent colour to acheive a shine effect when the form is ready to submit.

Variables

CSS Variables are controlled by the accent and background colour fields.

:root {
  --accent-colour: #f27033;
  --accent-text-colour: #612d14;
  --bg-colour: #f27033;
  --text-colour: #612d14;
}

Examples

Dark

/* Change Text Colour */
body.theme-minimal {
  color: white;
}

/* Change Label Colour */
body.theme-minimal .Text.Text-color--gray600,
body.theme-minimal .Text.Text-color--gray500,
body.theme-minimal .Text.Text-color--gray700,
body.theme-minimal .Text.Text-color--gray800 {
  color: white;
}


/* Change Input Colour */
#mainInput {
  color: white;
}

Two Tone

/* make right side white*/
body.theme-minimal .App-Container:not(.App-Container--setupMode)::before,
body.theme-minimal .App-Payment-Card {
  background: #000;
  border-radius: 2px;
}

/* Increase the logo size */
body.theme-minimal .HeaderImage--icon:not(.HeaderImage--iconFallback) img {
  height: 60px;
  width: auto;
}

Ready to get started? Get in touch.

Contact