Интеграция с Tilda (Яндекс)

Бесплатный модуль

Модуль позволяет оплачивать покупки при помощи Яндекс Пэй и Сплит на сайтах, которые работают на Tilda. Модуль предоставляет Яндекс бесплатно.

Внимание

Если у вас уже установлен модуль Tilda от другого партнера, рекомендуем удалить его в настройках вашего сайта. Это поможет избежать конфликтов при одновременной работе двух модулей.

Как это сделать

  1. В личном кабинете Tilda перейдите в настройки вашего сайта → раздел Платежные системы.

  2. В списке подключенных платежных систем справа от системы другого партнера нажмите кнопку Изменить.

  3. Прокрутите вниз открывшуюся страницу с настройками, в правом нижнем углу нажмите Удалить и подтвердите действие.

Возможности модуля

Прием оплаты

Полный возврат

*

Частичный возврат

*

Бейджи Яндекс Пэй / Сплит

Виджеты Яндекс Пэй / Сплит

Синхронизация статуса оплаты

Тестовый режим

Контроль наличия товара

Получение прямого QR

Получение обратного QR

Шаг 1. Регистрация в Яндекс Пэй

  1. Зарегистрируйтесь в личном кабинете Яндекс Пэй и подайте заявку на подключение сервиса Яндекс Пэй и Сплит.

  2. После того как сервис Яндекс Пэй и Сплит будет подключен, перейдите в раздел Настройки и выберите в селекторе нужный магазин.

  3. В блоке Подключение нажмите CMS, выберите модуль Tilda и нажмите кнопку Сохранить.

  4. Нажмите Выпустить ключ Merchant API и скопируйте значение из поля Секрет для подписи.

    Также скопируйте значение Merchant ID. Эти данные понадобятся вам при настройке платежной системы в Tilda.

Шаг 2. Подключение и настройка платежной системы

  1. В личном кабинете Tilda перейдите в раздел Мои сайты и выберите нужный проект.

  2. Нажмите кнопку Настройки сайта и перейдите в раздел Платежные системы.

  3. В блоке Платежные сервисы выберите Универсальная платежная система.

  4. В открывшемся окне в поле Шаблон настроек выберите шаблон Яндекс Пэй и Сплит.

  5. Укажите параметры платежной системы:

    • Merchant ID — Merchant ID из личного кабинета Яндекс Пэй.

    • Секрет для подписи — секрет для подписи из личного кабинета Яндекс Пэй.

    • URL для уведомлений — не требует изменений. Этот URL требуется указать в личном кабинете Яндекс Пэй в блоке Callback URL на шаге 3.

    • URL страницы успеха — URL страницы, которая откроется покупателю после успешной оплаты.

    • URL отказа — URL страницы, которая откроется при ошибке оплаты.

  6. Заполните остальные данные, если это необходимо, и нажмите кнопку Сохранить.

Шаг 3. Завершение настройки

Чтобы начать принимать платежи с помощью Яндекс Пэй и Сплит в личном кабинете Яндекс Пэй нажмите Добавить Callback URL, укажите URL для уведомлений из настроек платежной системы в Tilda и нажмите Сохранить.

Настройка модуля завершена. Теперь клиенты в вашем магазине могут оплачивать покупки при помощи Яндекс Пэй и Сплит.

Если у вас остались вопросы по настройке плагина, обратитесь в нашу службу поддержки.

Подключение бейджей и виджетов Яндекс Пэй

Чтобы подключить готовые бейджи и виджеты Яндекс Пэй на ваш сайт, установите специальный скрипт:

  1. В личном кабинете Tilda перейдите в настройки вашего сайта — Настройки сайта → Еще → HTML-код для вставки внутрь HEAD → Редактировать код.

  2. В открывшемся окне добавьте код ниже. Он содержит:

    • скрипт для встраивания бейджей и виджетов (внутри тега <script>);
    • CSS-стили для дополнительной стилизации бейджей и виджетов (внутри тега <style>).
    Код для вставки
    <script src="https://pay.yandex.ru/sdk/v1/pay.js"></script>

<!-- Скрипт для встраивания бейджей и виджетов -->
<script>

const SDK_SETTINGS = {
   merchantId: 'YOUR_MERCHANT_ID', // Замените YOUR_MERCHANT_ID на ваш Merchant ID из личного кабинета Яндекс Пэй
   availablePaymentMethods: ['SPLIT', 'CARD'], // ['SPLIT', 'CARD'] — отображать бейджи и виджеты кешбэка и Сплита, ['SPLIT'] — отображать только бейджи Сплита
   theme: 'light', //  Тема оформления вашего сайта: dark — темная тема, light — светлая тема
};

function renderCustomBadges() {
   renderCustomBadge(document.querySelector('.js-store-product .js-store-price-wrapper'));
   renderCustomBadge(document.querySelectorAll('.t-store__relevants__container .js-store-price-wrapper'));
}

/**
* Примеры отображения бейджей можно посмотреть в интерактивном демо:
* https://pay.yandex.ru/docs/ru/custom/web-sdk/badges#example
*/

const BNPL_BADGE_SETTINGS = {
   enabled: true, // true — показать бейджи Сплита, false — скрыть бейджи Сплита
   blocks: [
      'st200',
      'st210',
      'st215',
      'st300',
      'st305n',
      'st310n',
      'st315n',
      'st320n',
      'st405',
      'st500',
      'st510',
   ], // Идентификаторы блоков Tilda, в которые необходимо вставить бейджи
   size: 's', // Возможные значения: s, m, l
   align: 'left', // Возможные значения: left, center, right
   color: 'primary', // Возможные значения: primary, green, grey, transparent
   variant: 'detailed', // Возможные значения: simple, detailed
};

const CASHBACK_BADGE_SETTINGS = {
   enabled: true, // true — показать бейджи кешбэка, false — скрыть бейджи кешбэка
   blocks: [
      'st200',
      'st210',
      'st215',
      'st300',
      'st305n',
      'st310n',
      'st315n',
      'st320n',
      'st405',
      'st500',
      'st510',
   ], // Идентификаторы блоков Tilda, в которые необходимо вставить бейджи
   size: 's', // Возможные значения: s, m, l
   align: 'left', // Возможные значения: left, center, right
   color: 'primary', // Возможные значения: primary, grey, transparent
   variant: 'default', // Возможные значения: default, compact
};

/**
* Примеры отображения виджетов можно посмотреть в интерактивном демо:
* https://pay.yandex.ru/docs/ru/custom/web-sdk/ultimate-widget#example
*/

const WIDGET_SETTINGS = {
   enabled: true, // true — показать виджет, false — скрыть виджет
   withOutline: false, // true — с обводкой, false — без обводки
   hideWidgetHeader: false, // true — скрыть шапку, false — показать шапку
   borderRadius: 20, // Радиус скругления углов виджета
   /*
   * Возможные значения:
   * window.YaPay.WidgetPaddingType.Default — есть отступ внутри
   * window.YaPay.WidgetPaddingType.None — нет отступа внутри
   */
   padding: window.YaPay.WidgetPaddingType.Default,
   /*
   * Возможные значения:
   * window.YaPay.WidgetSize.Medium — стандартный размер
   * window.YaPay.WidgetSize.Small — маленький размер
   */
   widgetSize: window.YaPay.WidgetSize.Medium,
   /*
   * Возможные значения:
   * window.YaPay.WidgetBackgroundType.Default — серый фон
   * window.YaPay.WidgetBackgroundType.Saturated — белый фон
   * window.YaPay.WidgetBackgroundType.Transparent — прозрачный фон
   */
   widgetBackground: window.YaPay.WidgetBackgroundType.Default,
};

/**
* Настройка стилей блоков Tilda
*/

const TILDA_BLOCKS_STYLES = {
   st215: {
      popup: { badge: { align: 'left' } },
      page: { badge: { align: 'center' } },
   },
   st300: {
      popup: { badge: { align: 'left' } },
      page: { badge: { align: 'center' } },
   },
   st315n: {
      popup: { badge: { align: 'left' } },
      page: { badge: { align: 'center' } },
   },
   st405: {
      popup: { badge: { align: 'left' } },
      page: { badge: { align: 'center' } },
   },
};

/**
* Настройка блоков Tilda
*/

const TILDA_BLOCKS_SELECTORS = {
   st100: {
      block: '.t706',
      price: '.t706__cartwin-prodamount',
   },
   st200: {
      block: '.t744',
      price: '.t744__price-wrapper',
   },
   st210: {
      block: '.t760',
      price: '.t760__price-wrapper',
   },
   st215: {
      block: '.t922',
      price: '.t922__price-wrapper',
   },
   st300: {
      block: '.t754',
      price: '.t754__price-wrapper',
   },
   st305n: {
      block: '.t776',
      price: '.t776__price-wrapper',
   },
   st310n: {
      block: '.t778',
      price: '.t778__price-wrapper',
   },
   st315n: {
      block: '.t786',
      price: '.t786__price-wrapper',
   },
   st320n: {
      block: '.t951',
      price: '.js-store-price-wrapper',
   },
   st405: {
      block: '.t780',
      price: '.t780__price-wrapper',
   },
   st500: {
      block: '.t756',
      price: '.t756__price-wrapper',
   },
   st505: {
      block: '.t766',
      price: '.t766__price-wrapper',
   },
   st510: {
      block: '.t750',
      price: '.t750__price-wrapper',
   },
};

/**
* Вспомогательные методы
*/

function collectPriceElementsBySelectorName({ priceSelector, el, blockSelector }) {
   const GENERIC_PRICE_SELECTOR = '.js-store-price-wrapper';

   const wrappers = new Set();

   for (const blockEl of el.querySelectorAll(blockSelector)) {
      const priceEls = [
            ...blockEl.querySelectorAll(priceSelector),

            // Универсальный селектор, если в блоке переопределили priceSelector
            ...blockEl.querySelectorAll(GENERIC_PRICE_SELECTOR),
      ];
      for (const priceEl of priceEls) {
            wrappers.add(priceEl);
      }
   }

   return wrappers;
}

function findPriceWrappers(el, block) {
   const priceSelector = TILDA_BLOCKS_SELECTORS[block]?.price;
   const blockSelector = TILDA_BLOCKS_SELECTORS[block]?.block;

   if (typeof priceSelector !== 'string') {
      return [];
   }

   const wrappers = collectPriceElementsBySelectorName({ priceSelector, el, blockSelector });

   return Array.from(wrappers);
}

function readAmount(priceNode) {
   const SPACE_REGEXP = /\s/g;
   const DIGITS_REGEXP = /[\d,.]+/g;

   const content = priceNode?.textContent ?? priceNode?.innerText;
   return content?.replace(SPACE_REGEXP, '').match(DIGITS_REGEXP)?.[0];
}

function delayed(callback, delay) {
   return () => {
      setTimeout(() => callback(), delay);
   };
}

function createHash() {
   return Math.random().toString(36).substring(2);
}

function checkVisibility(wrapper) {
   return !wrapper.checkVisibility || wrapper.checkVisibility()
}

/**
* Бейджи
*/

const BADGE_PRICE_SELECTOR = '.js-product-price';
const BADGES_ENTITIES = new Map();

const BADGE_SETTINGS = {
   bnpl: {
      type: 'bnpl',
      theme: SDK_SETTINGS.theme,
      merchantId: SDK_SETTINGS.merchantId,
      ...BNPL_BADGE_SETTINGS,
   },
   cashback: {
      type: 'cashback',
      theme: SDK_SETTINGS.theme,
      merchantId: SDK_SETTINGS.merchantId,
      ...CASHBACK_BADGE_SETTINGS,
   },
};

const BADGES_BLOCKS = new Set([...BNPL_BADGE_SETTINGS.blocks, ...CASHBACK_BADGE_SETTINGS.blocks]);

const BADGE_CLASSNAME = 'yandex-pay-badge';

function createBadgeEntity(wrapper, { block = 'custom' } = {}) {
   const badgeContainerId = `${BADGE_CLASSNAME}-${block}-${createHash()}`;
   const place = wrapper.closest('.t-popup') ? 'popup' : 'page';

   const ensureBadgeContainer = () => {
      let container = document.getElementById(badgeContainerId);

      if (!container) {
            container = document.createElement('div');
            container.id = badgeContainerId;
            container.classList.add(BADGE_CLASSNAME); // Общий класс для стилей
            container.classList.add(`${BADGE_CLASSNAME}-${block}`); // Точечные стили блоков
            wrapper.appendChild(container);
      }

      return container;
   };

   const createBadgeRenderer = (type) => {
      const { enabled, blocks, ...badgeSettings } = BADGE_SETTINGS[type];
      const isRegisteredBlock = blocks.indexOf(block) >= 0;

      return () => {
            const container = ensureBadgeContainer();
            const amount = readAmount(wrapper.querySelector(BADGE_PRICE_SELECTOR));

            if (!enabled || !amount) {
               return;
            }

            const overrides = isRegisteredBlock
               ? { amount, ...(TILDA_BLOCKS_STYLES[block]?.[place]?.badge ?? {}) }
               : { amount }

            const badge = container.querySelector(`yandex-pay-badge[type=${type}]`);

            if (!badge) {
               // При первичной установке уже все параметры выставим корректно
               window.YaPay.mountBadge(container, {
                  ...badgeSettings,
                  ...overrides,
               });

               return;
            }

            // Если бейдж установлен, то только обновляем его параметры
            for (const [key, value] of Object.entries(overrides)) {
               if (badge.getAttribute(key) !== value.toString()) {
                  badge.setAttribute(key, value);
               }
            }
      };
   };

   return {
      observer: null,
      renderBnpl: createBadgeRenderer('bnpl'),
      renderCashback: createBadgeRenderer('cashback'),
      render() {
            this.renderBnpl();
            this.renderCashback();
      },
      mount() {
            if (this.observer instanceof MutationObserver) {
               this.observer.disconnect();
            }

            // В любом случае вызывает отрисовку
            this.render();

            const priceEl = wrapper.querySelector(BADGE_PRICE_SELECTOR);

            if (priceEl) {
               this.observer = new MutationObserver(delayed(() => this.render(), 100));
               this.observer.observe(priceEl, { childList: true, subtree: true });
            }
      },
   };
}

function renderBadge(wrapper, options) {
   if (!wrapper) {
      return;
   }

   if (!BADGES_ENTITIES.has(wrapper)) {
      const badge = createBadgeEntity(wrapper, options);
      BADGES_ENTITIES.set(wrapper, badge);
   }

   BADGES_ENTITIES.get(wrapper).mount();
}

function renderBadges(container) {
   for (const block of BADGES_BLOCKS) {
      for (const wrapper of findPriceWrappers(container, block)) {
            renderBadge(wrapper, { block })
      }
   }
}

function renderCustomBadge(wrappers, options) {
   if (wrappers instanceof Element) {
      renderBadge(wrappers, options);
      return;
   } else if (wrappers instanceof NodeList) {
      for (const wrapper of wrappers) {
            renderBadge(wrapper, options);
      }
   }
}

function renderPopupBadges() {
   const popup = document.querySelector('.t-popup_show');

   if (popup) {
      renderBadges(popup);
   }
}

if (BNPL_BADGE_SETTINGS.enabled || CASHBACK_BADGE_SETTINGS.enabled) {
   document.addEventListener('popupShowed', delayed(renderPopupBadges, 200));
   document.addEventListener('tStoreRendered', () => {
      renderBadges(document.body);
      renderCustomBadges();
   });
   document.addEventListener('DOMContentLoaded', () => {
      renderBadges(document.body);
      renderCustomBadges();
   });
}

/**
* Виджеты (блок st100/корзина)
*/

const WIDGET_THEME_MAP = {
   dark: window.YaPay.WidgetTheme.Dark,
   light: window.YaPay.WidgetTheme.Light,
};

const WIDGET_ENTITIES = new Map();

const WIDGET_CONTAINER_CLASS = 'yandex-pay-widget';

const getCartWidgetElements = () => [
   document.querySelector('.t706__sidebar .t706__cartwin-totalamount-wrap'),
   document.querySelector('.t706__cartpage .t706__cartwin-totalamount-wrap'),
   document.querySelector('.t706__cartwin .t706__cartwin-prodamount-wrap'),
];

function createWidgetEntity(wrapper, block) {
   const widgetId = `${WIDGET_CONTAINER_CLASS}-${block}-${createHash()}`;

   function ensureWidgetContainer() {
      let container = document.getElementById(widgetId);

      if (!container) {
            container = document.createElement('div');
            container.id = widgetId;
            container.classList.add(WIDGET_CONTAINER_CLASS);
            container.classList.add(`${WIDGET_CONTAINER_CLASS}-${block}`);
            wrapper.appendChild(container);
      }

      return container;
   }

   return {
      observer: null,
      getIsMounted() {
            const widgetContainer = ensureWidgetContainer();
            return Boolean(widgetContainer.querySelector('.ya-pay-widget'));
      },
      async render(popup = false) {
            const priceWrappers = findPriceWrappers(document.body, block);

            if (priceWrappers.length === 0) {
               return;
            }

            const widgetContainer = ensureWidgetContainer();

            const paymentData = {
               version: 4,
               totalAmount: readAmount(priceWrappers[0]),
               merchantId: SDK_SETTINGS.merchantId,
               currencyCode: window.YaPay.CurrencyCode.Rub,
               availablePaymentMethods: SDK_SETTINGS.availablePaymentMethods,
            };

            const paymentSession = await window.YaPay.createSession(paymentData, {
               source: 'cms',
               onPayButtonClick: () => '',
            });

            const { enabled, ...widgetSettings } = WIDGET_SETTINGS;

            paymentSession.mountWidget(widgetContainer, {
               widgetType: window.YaPay.WidgetType.Ultimate,
               widgetTheme: WIDGET_THEME_MAP[SDK_SETTINGS.theme] ?? SDK_SETTINGS.theme,
               ...widgetSettings,
            });

            const store = { previousAmount: paymentData.totalAmount };

            this.observer = new MutationObserver((mutations) => {
               const nextAmount = readAmount(mutations[0]?.addedNodes?.[0]);
               if (nextAmount && nextAmount !== store.totalAmount) {
                  store.totalAmount = nextAmount; // Сохраним значение для сравнения
                  paymentSession.update(async () => ({ totalAmount: nextAmount }));
               }
            });

            for (const priceWrapper of priceWrappers) {
               this.observer.observe(priceWrapper, { childList: true, subtree: true });
            }

            if (popup) {
               const handlePopupHidden = () => {
                  this.observer.disconnect();
                  paymentSession.unmountWidget(widgetContainer);
               };
               document.addEventListener('popupHidden', handlePopupHidden, {
                  once: true,
               });
            }
      },
      async mount(popup = false) {
            if (this.getIsMounted()) {
               return;
            }

            if (this.observer instanceof MutationObserver) {
               this.observer.disconnect();
            }

            await this.render(popup);
      },
   };
}

function renderWidget(wrapper, block, popup = false) {
   if (!checkVisibility(wrapper)) {
      return;
   }

   if (!WIDGET_ENTITIES.has(wrapper)) {
      const widget = createWidgetEntity(wrapper, block);
      WIDGET_ENTITIES.set(wrapper, widget);
   }

   WIDGET_ENTITIES.get(wrapper).mount(popup);
}

function renderCartWidget() {
   for (const element of getCartWidgetElements()) {
      if (element) {
            renderWidget(element, 'st100', true);
      }
   }
}

if (WIDGET_SETTINGS.enabled) {
   document.addEventListener('popupShowed', delayed(renderCartWidget, 200));
}

</script>

<!-- Стили для бейджей и виджетов -->
<style>
.yandex-pay-badge {
   display: flex;
   flex-flow: column wrap;
   align-items: flex-start;
   margin-top: 20px;
   gap: 0.75rem;
}

.yandex-pay-badge-st215,
.yandex-pay-badge-st300,
.yandex-pay-badge-st315n,
.yandex-pay-badge-st405 {
   align-items: center;
}

.t-popup .yandex-pay-badge-st215,
.t-popup .yandex-pay-badge-st300,
.t-popup .yandex-pay-badge-st315n,
.t-popup .yandex-pay-badge-st405 {
   align-items: flex-start;
}

.yandex-pay-widget {
   margin-top: 20px;
}
</style>

  3. В добавленном блоке кода отредактируйте настройки скрипта:


    Раздел настроек

    Параметры

    SDK_SETTINGS (общие настройки)
    • merchantId — замените YOUR_MERCHANT_ID на ваш Merchant ID из личного кабинета Яндекс Пэй.
    • availablePaymentMethods — укажите, какие бейджи и виджеты нужно отображать:
      • ['SPLIT', 'CARD'] — бейджи и виджеты кешбэка и Сплита;
      • ['SPLIT'] — только бейджи и виджеты Сплита.
    • theme — укажите тему оформления вашего сайта:
      • dark — темная тема;
      • light — светлая тема.
    Как выглядят настройки SDK_SETTINGS
    const SDK_SETTINGS = {
   merchantId: 'YOUR_MERCHANT_ID', // Замените YOUR_MERCHANT_ID на ваш Merchant ID из личного кабинета Яндекс Пэй
   availablePaymentMethods: ['SPLIT', 'CARD'], // ['SPLIT', 'CARD'] — отображать бейджи и виджеты кешбэка и Сплита, ['SPLIT'] — отображать только бейджи Сплита
   theme: 'light', //  Тема оформления вашего сайта: dark — темная тема, light — светлая тема
};

    BNPL_BADGE_SETTINGS (настройки бейджей Сплита)

    CASHBACK_BADGE_SETTINGS (настройки бейджей кешбэка)

    • enabled — включить/отключить бейджи.

    • blocks — список идентификаторов блоков в Tilda, в которые будет вставлен бейдж.

      Совет

      Чтобы узнать идентификатор блока в Tilda, наведите указатель мыши на нужный блок — в левом верхнем углу отобразится его буквенно-числовой идентификатор.

    • size, align, color, variant — отредактируйте параметры отображения бейджа.

      Примечание

      Возможные значения параметров указаны в блоке кода в комментарии к каждому параметру — как они влияют на отображение бейджей, см. в интерактивном демо.

    Как выглядят настройки BNPL_BADGE_SETTINGS
    const BNPL_BADGE_SETTINGS = {
enabled: true, // true — показать бейджи Сплита, false — скрыть бейджи Сплита
blocks: [
   'st200',
   'st210',
   'st215',
   'st300',
   'st305n',
   'st310n',
   'st315n',
   'st320n',
   'st405',
   'st500',
   'st510',
], // Идентификаторы блоков Tilda, в которые необходимо вставить бейджи
size: 's', // Возможные значения: s, m, l
align: 'left', // Возможные значения: left, center, right
color: 'primary', // Возможные значения: primary, green, grey, transparent
variant: 'detailed', // Возможные значения: simple, detailed
};
    Как выглядят настройки CASHBACK_BADGE_SETTINGS
    const CASHBACK_BADGE_SETTINGS = {
   enabled: true, // true — показать бейджи кешбэка, false — скрыть бейджи кешбэка
   blocks: [
      'st200',
      'st210',
      'st215',
      'st300',
      'st305n',
      'st310n',
      'st315n',
      'st320n',
      'st405',
      'st500',
      'st510',
   ], // Идентификаторы блоков Tilda, в которые необходимо вставить бейджи
   size: 's', // Возможные значения: s, m, l
   align: 'left', // Возможные значения: left, center, right
   color: 'primary', // Возможные значения: primary, grey, transparent
   variant: 'default', // Возможные значения: default, compact
};

    WIDGET_SETTINGS (настройки виджета)
    • enabled — включить/отключить виджет.
    • withOutline — включить/отключить обводку виджета.
    • hideWidgetHeader — показать/скрыть шапку виджета.
    • borderRadius — радиус скругления углов виджета.
    • padding — выберите нужное значение параметра, чтобы включить/отключить отступ внутри виджета.
    • widgetSize — выберите нужное значение параметра, чтобы изменить размер виджета.
    • widgetBackground — выберите нужное значение параметра, чтобы изменить фон виджета.
    • size, align, color, variant — отредактируйте параметры отображения виджета.

    Примечание

    Возможные значения параметров указаны в блоке кода в комментарии к каждому параметру — как они влияют на отображение виджета, см. в интерактивном демо.

    Как выглядят настройки WIDGET_SETTINGS
    const WIDGET_SETTINGS = {
   enabled: true, // true — показать виджет, false — скрыть виджет
   withOutline: false, // true — с обводкой, false — без обводки
   hideWidgetHeader: false, // true — скрыть шапку, false — показать шапку
   borderRadius: 20, // Радиус скругления углов виджета
   /*
   * Возможные значения:
   * window.YaPay.WidgetPaddingType.Default — есть отступ внутри
   * window.YaPay.WidgetPaddingType.None — нет отступа внутри
   */
   padding: window.YaPay.WidgetPaddingType.Default,
   /*
   * Возможные значения:
   * window.YaPay.WidgetSize.Medium — стандартный размер
   * window.YaPay.WidgetSize.Small — маленький размер
   */
   widgetSize: window.YaPay.WidgetSize.Medium,
   /*
   * Возможные значения:
   * window.YaPay.WidgetBackgroundType.Default — серый фон
   * window.YaPay.WidgetBackgroundType.Saturated — белый фон
   * window.YaPay.WidgetBackgroundType.Transparent — прозрачный фон
   */
   widgetBackground: window.YaPay.WidgetBackgroundType.Default,
};

  4. При необходимости настройте дополнительные стили бейджей и виджетов. Для этого в блоке кода внутри тега <style> отредактируйте CSS-стили для набора классов:

    • .yandex-pay-badge — класс для любого бейджа;
    • .yandex-pay-badge-<BLOCK_ID> — класс для бейджа в конкретном блоке, где <BLOCK_ID> — идентификатор блока в Tilda;
    • .yandex-pay-widget — класс для любого виджета;
    • .yandex-pay-widget-<BLOCK_ID> — класс для виджета в конкретном блоке, где <BLOCK_ID> — идентификатор блока в Tilda.

    Пример настройки стилей:

    <style>

   /* Общий стиль для всех бейджей */
   .yandex-pay-badge {
      display: flex; /* Тип отображения элемента — flex-контейнер */
      flex-flow: column wrap; /* Расположение элементов — в колонку, при необходимости переносятся */
      align-items: flex-start; /* Выравнивание элементов — по левому краю */
      margin-top: 20px; /* Отступ сверху — 20 пикселей */
      gap: 0.75rem; /* Расстояние между элементами внутри бейджа — 0.75rem*/
   }

   /* Стили для бейджей в блоках st215, st300, st315, st405 */
   .yandex-pay-badge-st215,
   .yandex-pay-badge-st300,
   .yandex-pay-badge-st315n,
   .yandex-pay-badge-st405 {
      align-items: center; /* Выравнивание элементов — по центру */
   }

   /* Стили для бейджей внутри всплывающего окна (popup) */
   .t-popup .yandex-pay-badge-st215,
   .t-popup .yandex-pay-badge-st300,
   .t-popup .yandex-pay-badge-st315n,
   .t-popup .yandex-pay-badge-st405 {
      align-items: flex-start; /* Выравнивание элементов — по левому краю */
   }

   /* Общий стиль для всех виджетов */
   .yandex-pay-widget {
      margin-top: 20px; /* Отступ сверху — 20 пикселей*/
   }

</style>

  5. После того как вы отредактировали код для вставки, нажмите кнопку Сохранить.

  6. Перейдите на главную страницу вашего сайта и опубликуйте изменения с помощью кнопки Опубликовать все страницы.

    Убедитесь, что бейджи и виджеты корректно отображаются на вашем сайте.

    Примечание

    Если вы выполнили все шаги инструкции, но бейджи и виджеты не отображаются, обратитесь в нашу службу поддержки.

Возврат доступен в разделе Платежи личного кабинета Яндекс Пэй.

CSS-стили — это правила, которые определяют внешний вид элементов на веб-странице (цвет, шрифт, отступы и т. д.). Например, правило align-items: center задает выравнивание элементов по центру.

Классы — это имена, которые присваиваются HTML-элементам, чтобы применять к ним определенные CSS-стили.

Предыдущая
OpenCart (ART&PR)
Следующая
Tilda (OmniPay)