# Custom Styling

Payment form can be stylized to match merchant's brand or website: font and colors can be customized using CSS. Default is the following:

{
    "variables": {
        "font_family":"DM Sans",
        "font_family_url": "[https://fonts.googleapis.com/css?family=DM Sans]",
        "primary_color": "#4836bf",
        "secondary_color": "#2d9f88",
    }
}

To override default style, merchant can share its own values of the properties with Integration Team. They will be included in the CSS configuration.

  • font_family: Font family used to display text on the Payment Page.
  • font_family_url: The link to load the font from a remote library.
  • primary_color: Color used for main buttons.
  • secondary_color: Color used for buyer's Dashboard and icons.

Example to change the payment button using 'primary_color':

Example to change the color in buyer's Dashboard for deferred payment using 'secondary_color':

Example to change the color in buyer's Dashboard for installment payment using 'primary_color' and 'secondary_color':