Display Payment Logos
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 you add or remove payment methods from your Dintero account settings, or Logo builder to manually show your payment methods.
- Payment profile
- Logo Builder
- Documentation
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 allows you to generate customized payment logo images by specifying payment types, colors, dimensions, and templates through URL parameters.
Branding image URL format
https://checkout.dintero.com/v1/branding/logos/{logos}/variant/{variant}/color/{color}/width/{width}/{template}.svgURL Parameters
Customize your logo display with these parameters.
Required logos
A list of payment logos separated by underscores (_).
Example:
visa_mastercard_applepay_googlepay_vipps_mobilepay_swish_walley_klarna_billie_clicktopay
Available logos:
Required variant
Defines the style variant for the logos.
colors- Colorful logos with full brandingmono- Monochrome versiondarkcolors- Optimized for dark backgroundslogomark- Simplified version - payment logos only (no "Dintero" branding)smallmark- Smaller simplified version - payment logos only (no "Dintero" branding)
Required color
Color as RGB hex code without the # character.
Examples:
color/444444
color/ee00ee
Note: For the colors and darkcolors variants the color only applies to the text and frame elements. The color does not apply to the logomark and the smallmark variants.
Required width
Integer value for the image width in pixels.
Examples:
width/600
width/450
width/800
Recommended range: 400-600px for most checkout layouts
Required template
Layout template for the logo display.
dintero_top_frame- Show secure payment text above, logos belowlogos- Only shows logos, no textlogo- A singular logo, only the first logo defined after/logos/
Recommended Payment Profile URL
This is the recommended approach as it automatically updates when you change payment methods in your account.
Instead of manually specifying logos, you can use your payment profile ID to automatically display all configured payment methods.
URL Format:
The template parameter is specified without the .svg extension; the .svg suffix is appended after {template} in the URL.
https://checkout.dintero.com/v1/branding/accounts/{account_id}/profiles/{profile_id}/variant/{variant}/color/{color}/width/{width}/{template}.svg
Example:
https://checkout.dintero.com/v1/branding/accounts/P11223351/profiles/P11223351.5GdDG8rrepTQKhrEqzoRSQ/variant/colors/color/cfcfcf/width/600/dintero_top_frame.svgComplete Examples
Variant: colors
https://checkout.dintero.com/v1/branding/logos/visa_mastercard_applepay_vipps_klarna/variant/colors/color/171717/width/600/dintero_top_frame.svg
Variant: mono
https://checkout.dintero.com/v1/branding/logos/visa_mastercard_applepay_vipps_klarna/variant/mono/color/444444/width/600/dintero_top_frame.svg
Variant: darkcolors
https://checkout.dintero.com/v1/branding/logos/visa_mastercard_applepay_vipps_klarna/variant/darkcolors/color/eeeeee/width/600/dintero_top_frame.svg
Variant: logomark
Note: Show secure payment text is offhttps://checkout.dintero.com/v1/branding/logos/visa_mastercard_applepay_vipps_klarna/variant/logomark/color/444444/width/600/logos.svg
Variant: smallmark
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
darkcolorsvariant on dark backgrounds for better visibilityKeep width between 400-600px for optimal display on most devices
Use
logomarkvariant when you want to minimize branding and focus on payment options.smallmarkfor smaller size.Match the color parameter to your website design
Test the generated SVG in your environment before deploying to production