Resources
Revolut Pay button guidelines
doc

Revolut Pay button guidelines

This article provides guidance on how to present the Revolut Pay button on your website or app, and suggestions on how to communicate the availability of Revolut Pay as a payment option using the brand mark. Adhering to the guidelines should maximise conversions and ensure a positive experience for your users.

note

For information on integrating Revolut Pay into your website or app, see the Accept payments with Revolut Pay tutorial.

Buttons

Revolut provides a variety of button types to suit your payment experience, choose from the available variants.

Revolut Pay button - black
info

The button is rendered by Revolut's web SDK via an inline frame (iframe), you don't need to create it for yourself. These guidelines are intended to help you decide which options to choose when configuring the Revolut Pay button.

Colour

Revolut provides three colour options for buttons - black, white and white with a border. Use the colour that provides sufficient contrast with the background. For lighter backgrounds the black version works best, for darker backgrounds the white version is preferred. If unsure, use the white button with a border.

Revolut Pay button - blackRevolut Pay button - black
  • Do

  • Use the black button on light backgrounds to maximise contrast.
  • Don't

  • Don't use the black button on dark backgrounds.
Revolut Pay button - whiteRevolut Pay button - white
  • Do

  • Use the plain white button on dark backgrounds to maximise contrast.
  • Don't

  • Don't use the white button on light backgrounds.
Revolut Pay button - whiteRevolut Pay button - white
  • Do

  • Use the white button with a border on light backgrounds.
  • Don't

  • Don't use the white button with a border on dark backgrounds, instead use the plain white button.
Revolut Pay button - white outlined
  • Do

  • If you're unsure about which button to use, the white button with a border is safest and should always be visible due to the border.

Size and position

The Revolut Pay button should be equal in size to other payment option buttons, and should generally be highly visible on your payment screen.

Revolut Pay and Pay with a card button size comparison - good exampleRevolut Pay and Pay with a card button size comparison - bad example

The visual style of the button including corner radius should match other payment option buttons.

Revolut Pay and Pay with a card button radius comparison - good exampleRevolut Pay and Pay with a card button radius comparison - bad example

Brand mark

Use the Revolut Pay brand mark on your website or app to show that Revolut Pay is available as a payment option. This should be displayed next to logos of any other payment options you offer.

Revolut Pay as a payment option

Use the following brand mark to display Revolut Pay as an available payment option.

Revolut Pay and other payment options
  • Do

  • Use the mark on your website or app to indicate Revolut Pay as a payment option.
  • Use only the image provided by Revolut
  • Display the mark next to other available payment option logos.
  • Don't

  • Don't change the mark provided or create your own.
  • Don't translate the word "Pay".

Revolut Pay payment schemes

If you list Revolut Pay and other payment options separately, use the following marks to indicate the available payment schemes within Revolut Pay.

Revolut Pay payment schemes
caution

When showing payment schemes available inside Revolut Pay, you must use: Revolut, Mastercard and Visa marks.

note

You can resize the brand mark to match other payment option logos, however the aspect ratio should remain fixed. Minimum margin space should be at least 1/8 of the mark height.

Text guidelines

Messaging on your website or app that mentions Revolut Pay should be formatted accordingly.

  • Do

  • Always refer to this payment option as "Revolut Pay".
  • Always type Revolut Pay as two separate words, with an uppercase "R" and "P", followed by lowercase letters.
  • Don't

  • Don't use special text styling such as italic, bold or strikethrough when representing Revolut Pay in text.
  • Don't use the Revolut "R" logo to represent Revolut Pay in text.
  • Don't translate Revolut Pay into any other languages.
Was this page helpful?