Theming lets you brand the SportsPay hosted payment page so it feels like a natural extension of your registration flow — not a hand-off to a third-party processor.

Theming applies to both Customized Checkout and Embedded Components. The same brand theme is used for both; you don't configure them separately.

What Gets Themed

The payment page is styled using CSS custom properties (design tokens). You customize the token values to match your brand; the layout itself stays consistent so new gateway features pick up your theme automatically.

How It Works

SportsPay provides a CSS theme template with customizable tokens. You fill in the values for your brand, send the file back, and we apply it to all of your merchant's terminals.

1. Request Your Theme Template

Email [email protected] to request the theme template. You'll receive a single CSS file that looks like this:

:root {
    /* === Primary (edit these hexes) === */
    --color-primary: #004158;
    --color-primary-dark: #00354B;
    --gradient-primary-start: #409EC7;
    --gradient-primary-end: #409EC7;
    ...
}

Comments in the file group tokens by purpose and flag which ones are intended for partner customization.

2. Fill In Your Brand Values

Edit the hex codes, opacity values, and border radii to match your brand. Most partners only need to change a handful of tokens — typically the primary color, accent color, and maybe the button radius — because downstream tokens derive from them.

Important: Only modify the :root token block. Do not add or change CSS selectors — the layout CSS is maintained by SportsPay and changes may break rendering on new gateway features.

3. Send It Back

Email the completed theme file to [email protected]. Include:

• Your partner name
• Your logo (PNG or JPG, transparent background recommended)

SportsPay reviews the theme, installs it on the gateway, and sets the PPTHEME setting on the relevant terminal profiles so the branded page is served automatically.

4. Review

Once applied, run a test StartSession against a terminal on the theme and open the returned URL in a browser to see your branded page. See Development & Testing for test credentials and test card numbers.

Updating Your Theme

To change your theme later — new brand colors, a refreshed logo, a different button radius — email a revised CSS file to [email protected]. We replace the installed theme in place, so no changes are needed on your side.

Theme updates apply instantly to new payment sessions. In-flight sessions continue using the theme that was loaded when their StartSession was processed.

Partner Logo

Your platform's logo is set separately from the CSS theme. Send it as a PNG or JPG (transparent background recommended). SportsPay hosts the logo and sets the LOGOFILE terminal setting so it renders in the brand block at the bottom of the payment page, next to the SportsPay logo.

Note: This is distinct from the merchant logo (the logo of the individual sports organization accepting payments). Merchant logos are set on each merchant's profile during onboarding and render near the top of the payment page next to the merchant name. The theming system does not control merchant logos.

Default Theme

If no custom theme is assigned to a terminal, the SportsPay default theme is used. You can see the current default colors on the Quick Start test flow.