Пересоздание платежной сессии и кнопок Яндекс Пэй

Иногда возникает необходимость пересоздания платежной сессии и платежных кнопок. Например, кнопка может показываться в динамическом блоке, а сессия пересоздаваться при динамическом каталоге.

Процесс пересоздания предполагает удаление активных сессии и кнопок перед созданием новых.

Удаление платежной сессии

При удалении сессии также удаляются все платежные кнопки, относящиеся к этой сессии.

// Удаление платежной сессии и кнопок
paymentSession.destroy();

Удаление платежной кнопки

// Удаление платежной кнопки на определенном DOM-узле
paymentSession.unmountButton(
    document.querySelector('<selector>')
);

Пример

function onYaPayLoad() {
    const YaPay = window.YaPay;

    const buttonContainer = document.querySelector('#button_container');
    const resetPaySessionButton = document.querySelector('#reset_pay_session');
    const resetPayButtonButton = document.querySelector('#reset_pay_button');

    // Ссылка на активную сессию
    let activeSession = null;

    function createPaymentSession(amount) {
        // Данные платежа
        const paymentData = {
            env: YaPay.PaymentEnv.Sandbox,
            version: 4,
            currencyCode: YaPay.CurrencyCode.Rub,
            merchantId: '<YOUR_MERCHANT_ID>',
            totalAmount: `${amount}.00`,
            availablePaymentMethods: ['CARD', 'SPLIT'],
        };

        // Обработчик на клик по кнопке
        // Функция должна возвращать промис которые резолвит ссылку на оплату полученную от бэкенда Яндекс Пэй
        // Подробнее про создание заказа: https://pay.yandex.ru/ru/docs/custom/backend/yandex-pay-api/order/merchant_v1_orders-post
        async function onPayButtonClick() {
            /* Создание заказа... */
        }

        // Создаем платежную сессию
        YaPay.createSession(paymentData, {
            onPayButtonClick: onPayButtonClick,
        })
            .then(function (paymentSession) {
                activeSession = paymentSession;
                // Создаем кнопку для активной сессии
                createPaymentButton();
            })
            .catch(function (err) {
                // Не получилось создать платежную сессию.
            });
    }

    // Функция создания платежной кнопки
    function createPaymentButton() {
        if (activeSession) {
            activeSession.mountButton(buttonContainer, {
                type: YaPay.ButtonType.Pay,
                theme: YaPay.ButtonTheme.Black,
                width: YaPay.ButtonWidth.Auto,
            });
        }
    }

    // Функция пересоздания платежной сессии
    function resetPaymentSession() {
        // Удаляем активную сессию
        if (activeSession) {
            activeSession.destroy();
            activeSession = null;
        }

        // Создаем новую сессию
        createPaymentSession(getNewAmount());
    }

    // Функция пересоздания платежной кнопки
    function resetPaymentButton() {
        // Удаляем кнопку на активной сессии
        if (activeSession) {
            activeSession.unmountButton(buttonContainer);
        }

        // Создаем новую кнопку
        createPaymentButton();
    }

    resetPaySessionButton.addEventListener('click', resetPaymentSession);
    resetPayButtonButton.addEventListener('click', resetPaymentButton);

    createPaymentSession(7990);
}

/**
 * Сопроводительные функции для иллюстрации работы
 */

function getNewAmount() {
    const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;

    const price = 7990;
    const count = randomInt(1, 20);

    return price * count;
}