Интеграция с 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. Перейдите на главную страницу вашего сайта и опубликуйте изменения с помощью кнопки Опубликовать все страницы.

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

    Примечание

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

Подключение фискализации через АТОЛ

Ограничение

При продаже маркированных товаров чеки не формируются из-за ограничений сервиса Яндекс Пэй, данные не передаются в систему маркировки Честный знак.

Если вы используете для фискализации АТОЛ Онлайн, вы можете настроить автоматическую передачу данных в кассу для формирования кассовых чеков:

  1. Выполните настройку в личном кабинете Яндекс Пэй:

    1. Выберите в селекторе нужный магазин и перейдите в раздел Настройки → Облачная касса → Подключить облачную кассу.

    2. Выберите из списка кассу Атол и нажмите кнопку Продолжить.

    3. Последовательно заполните данные:

      • адрес сайта вашего магазина — будет отображен покупателю в чеке;
      • электронная почта для связи — будет отображена покупателю в чеке;
      • система налогообложения, которую вы используете;
      • логин, пароль и код группы касс в системе АТОЛ.

      Примечание

      Адрес сайта магазина и электронная почта могут отличаться от тех данных, которые вы указали при регистрации в личном кабинете Яндекс Пэй.

    4. Нажмите кнопку Продолжить. В течение нескольких минут касса будет подключена.

  2. Выполните настройку в личном кабинете Tilda:

    1. Перейдите в раздел Настройки сайта → Платежные системы → Яндекс Пэй и Сплит.

    2. В поле Электронные чеки (РФ) выберите соответствующую ставку НДС для вашего бизнеса.

      Важно

      Чтобы данные о покупке передавались в платежную систему корректно, оформление заказа на сайте должно происходить через корзину Tilda.

    3. Убедитесь, что в параметре Receipt передаются обязательные параметры для фискализации в соответствии с требованиями ФФД 1.05:

      • payment_method — признак способа расчета;
      • payment_object — признак предмета расчета.

      Возможные значения параметров см. в статье Tilda Как передавать данные для онлайн-кассы.

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

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

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

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

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

Обязательный с 1 января 2019 года формат фискальных данных для онлайн-касс.

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