Branding rules

The last requirements for the visual part of the site are available on the summary page in Figma. Below is a list of the design recommendations to be followed in order for:

The sites to provide a uniform experience through Yandex Pay.
The user to purchase quickly instead of wasting time learning the new interface.
Everything to be seamless and beautiful.

Buttons for payment via Yandex Pay

If you implemented Yandex Pay Web SDK correctly, you'll get a rendered button as a result. You can manage the rules of button display only on the Yandex Pay side. On the merchant's site, you can only fine-tune some button parameters.

The Yandex Pay payment button must always call the Yandex Pay API. The interface then opens a page where users can select the payment method.

Options for button rendering

The user is authorized in Yandex, they have a photo in the profile and a card linked in Yandex Pay (options for the light and dark background):
The user can be logged in to Yandex or not, they do not have a photo in the profile and no card linked in Yandex Pay (options for the light and dark background):

More about the Web SDK buttons.

Button customization parameters

On the merchant's site, you can fine-tune the following button parameters:

Color (for the light and dark background).
Height and width (with restrictions).
Rounding.

Color

Black. Use it on a white or light background with good contrast to the button color. Do not use it on the black and dark background.

color_black_buttons

White with an outline. Use it on the white or light background, which have slight contrast to the button color. Do not use it on the black and dark background.

color_white_outline_buttons

White. Use it on dark background that contrasts well with the button color.

color_white_buttons

Height and width

Maintain the minimum height and width of the button:

size_buttons

If some elements don't fit into the button of your size, the system will automatically hide or shrink such elements. The minimum width of the button at which the user data will be visible (a linked card or avatar) is 200pt.

The button must be proportional to the interface elements and fit in naturally.

size_samples_buttons

Rounding of angles

The button's angles are rounded by default. Adjust the rounding value to match other buttons in your interface.

corner_buttons

Additional elements

If you enabled Split payment, add the Split widget on your site to tell users that you support split payments.

Use a light theme for legends on light backgrounds and dark theme for legends on dark backgrounds.

badges_buttons

Button positioning on the page

Selecting a place for the button

The benefit of Yandex Pay is that the entry fields for card details, payee data, and address are populated automatically. Yandex already has all this data, so the user doesn't need to fill it in. That's why you don't have to place the button at the bottom of the page after all the fields.

Use spacers to separate semantically distinct blocks and make sure that your users aren't confused.

location_buttons

Pay-in-one-click button

You can also add the Yandex Pay button on the product page and in the cart.

On the product page, place the Yandex Pay button next to the add to card button, product name, and price. With such positioning, you can give users an idea of what product they are buying and how much it costs.

location_checkout_button_1

Place your button in the cart to make it clear to the user that they can quickly place an order via Yandex Pay without entering any contact details or addresses (they will automatically be fetched from Yandex ID).

location_checkout_button_2