Checkout UX Guidelines
Assets
Assets
Brite Logotypes
Welcome to the Logotypes page, where you can access Brite’s hosted logotype assets.
Note!
While we offer hosted logotypes for use outside of the checkout experience, we strongly recommend using our Service Presentation API for your checkout. This API allows you to automate the delivery of localised Brite logotypes, text, and bank logos directly into your checkout, ensuring a seamless and high-performing checkout tailored to your specific needs. Go to documentation.
Payment Badge
Our payment badge has been specially designed for use in checkouts.
Colour
Always try to use the Brite payment badge in our Brite Yellow. If that’s not possible, use our secondary white or black options. Always ensure there is sufficient contrast between the colourof the badge and background.
Padding
25% of the full badge height defines the padding around the logo, ensuring legibility.
Minimum badge size
Where possible, our badge should be displayed at no less than 24px (height) to ensure sufficient legibility.
Primary badge
For optimal brand recognition, we recommend using our primary yellow payment badge.
Secondary variations
For use only when it’s not possible to use our primary yellow badge.
Acceptance Mark
When showing payment method logos before checkout, use the acceptance mark variation with the Brite Badge, a bank logo cluster, and the payment method name.
How it works
- Select the Target Country: Get the relevant method name and bank logo cluster for the chosen country.
- Choose the Layout: Pick the layout that best fits your UI design.
- Follow Dimensions: Stick to the recommended minimum dimensions.
- Use Default Font: The payment method name should match the UI’s default font, or use our provided versions with the text included.
Hosted Assets
To ensure you always display the most current and consistent branding, we provide hosted logos and payment badges that can be easily embedded into your website. By using these hosted assets, any future updates or changes to our logos will be automatically reflected on your site, eliminating the need for manual updates.
Benefits
- Automatic Updates: Always display the latest version of Brite logos without needing to manually update them.
- Consistency: Ensure that the logos are always aligned with Brite’s latest branding guidelines.
How to use
To use the hosted logos and payment badges, include the provided URLs in your HTML <img> tags.
Example usage
To embed a logo or payment badge in your website, use the following HTML snippet. Replace URL_OF_CHOICE with the URL of the desired logo or payment badge.
<img src=”URL_OF_CHOICE” alt=”Brite Logo“>
For example, to use the primary Brite logo in PNG format, your HTML code would be:
<img decoding="async" src="https://ext-assets.britepaymentgroup.com/assets/brite_badges/brite_badge_primary.png" alt="Brite Logo">
API Solution
Our Service Presentation API also provides the payment badge.
Go to documentation.
|
Version
|
Format
|
URL
|
|---|---|---|
Regular
|
PNG
|
|
|
SVG
|
||
Black on white
|
PNG
|
|
|
SVG
|
||
White on Black
|
PNG
|
|
|
SVG
|
