> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dintero.com/llms.txt
> Use this file to discover all available pages before exploring further.
## Submitting Feedback
If you encounter incorrect, outdated, or confusing documentation on this page, submit feedback:
POST https://docs.dintero.com/feedback
```json
{
"path": "/docs/checkout/display-payment-logos",
"feedback": "Description of the issue"
}
```
Only submit feedback when you have something specific and actionable to report.
# Display payment logos
> Display payment method logos on your website or app to promote trust and show available payment methods before customers enter your checkout.
export const useColorMode = () => {
const [colorMode, setColorMode] = useState('light');
useEffect(() => {
const update = () => setColorMode(document.documentElement.classList.contains('dark') ? 'dark' : 'light');
update();
const observer = new MutationObserver(update);
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ['class']
});
return () => observer.disconnect();
}, []);
return colorMode;
};
export const WebComponentLoader = () => {
useEffect(() => {
if (!document.querySelector('link[href*="logo-display-builder.css"]')) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = '/mintlify-docs/logo-display-builder.css';
document.head.appendChild(link);
}
}, []);
return null;
};
export const PaymentProfile = () => {
const colorMode = useColorMode();
const [params, setParams] = useState({});
useEffect(() => {
setParams(Object.fromEntries(new URLSearchParams(window.location.search).entries()));
}, []);
const Tag = 'payment-profile';
return ;
};
export const LogoDisplayBuilder = () => {
const colorMode = useColorMode();
const Tag = 'logo-display-builder';
return ;
};
Display your payment method logos on your website or app to promote trust and show available payment methods before customers enter your checkout. We recommend using the Payment profile as it automatically updates when you change payment methods in your Dintero account.
Use **Payment profile** to dynamically update when you add or remove payment methods from your Dintero account settings, or **Logo builder** to manually show your payment methods.
Payment profile automatically shows all payment methods configured in your Dintero account. Use the generated URL to display it on your website/app.
Use the logo builder to manually show your payment methods. Use the generated URL to display it on your website/app.
## Overview
The Checkout Branding API generates customized payment logo images by specifying payment types, colors, dimensions, and templates through URL parameters.
#### Branding image URL format
```text theme={null}
https://checkout.dintero.com/v1/branding/logos/{logos}/variant/{variant}/color/{color}/width/{width}/{template}.svg
```
## URL parameters
A list of payment logos separated by underscores (`_`).
**Example:** `visa_mastercard_applepay_googlepay_vipps_mobilepay_swish_walley_klarna_billie_clicktopay`
**Available logos:** `visa` `mastercard` `vipps` `swish` `walley` `klarna` `applepay` `googlepay` `mobilepay` `billie` `clicktopay` `two` `kravia`
Style variant for the logos.
| Value | Description |
| ------------ | ----------------------------------------------- |
| `colors` | Colorful logos with full branding |
| `mono` | Monochrome version |
| `darkcolors` | Optimized for dark backgrounds |
| `logomark` | Payment logos only, no Dintero branding |
| `smallmark` | Smaller payment logos only, no Dintero branding |
RGB hex code without the `#` character.
**Examples:** `444444`, `ee00ee`
For `colors` and `darkcolors` variants, color applies to text and frame elements only. Does not apply to `logomark` and `smallmark` variants.
Image width in pixels. Recommended range: 400–600px.
**Examples:** `600`, `450`, `800`
Layout template for the logo display.
| Value | Description |
| ------------------- | ------------------------------------------ |
| `dintero_top_frame` | Secure payment text above, logos below |
| `logos` | Logos only, no text |
| `logo` | A single logo (the first one in `/logos/`) |
**Use your payment profile** instead of manually specifying logos. The profile automatically shows all configured payment methods and updates when you change them in your Dintero account.
```text theme={null}
https://checkout.dintero.com/v1/branding/accounts/{account_id}/profiles/{profile_id}/variant/{variant}/color/{color}/width/{width}/{template}.svg
```
**Example:**
```text theme={null}
https://checkout.dintero.com/v1/branding/accounts/P11223351/profiles/P11223351.5GdDG8rrepTQKhrEqzoRSQ/variant/colors/color/cfcfcf/width/600/dintero_top_frame.svg
```
## Complete examples
```text theme={null}
https://checkout.dintero.com/v1/branding/logos/visa_mastercard_applepay_vipps_klarna/variant/colors/color/171717/width/600/dintero_top_frame.svg
```
```text theme={null}
https://checkout.dintero.com/v1/branding/logos/visa_mastercard_applepay_vipps_klarna/variant/mono/color/444444/width/600/dintero_top_frame.svg
```
```text theme={null}
https://checkout.dintero.com/v1/branding/logos/visa_mastercard_applepay_vipps_klarna/variant/darkcolors/color/eeeeee/width/600/dintero_top_frame.svg
```
No Dintero branding. Secure payment text is hidden.
```text theme={null}
https://checkout.dintero.com/v1/branding/logos/visa_mastercard_applepay_vipps_klarna/variant/logomark/color/444444/width/600/logos.svg
```
Smaller logos, no Dintero branding.
```text theme={null}
https://checkout.dintero.com/v1/branding/logos/visa_mastercard_applepay_vipps_klarna/variant/smallmark/color/444444/width/600/logos.svg
```
## Best practices
* Choose logos that match your accepted payment methods.
* Use the `darkcolors` variant on dark backgrounds for better visibility.
* Keep width between 400–600px for optimal display on most devices.
* Use `logomark` to minimize branding and focus on payment options; use `smallmark` for a smaller size.
* Match the `color` parameter to your website's text or border color.
* Test the generated SVG in your environment before deploying to production.
