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

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

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

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

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

// Удаление платежной сессии и кнопок
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() {
        // Данные платежа
        const paymentData = {
            env: YaPay.PaymentEnv.Sandbox,
            version: 3,
            currencyCode: YaPay.CurrencyCode.Rub,
            merchantId: '<YOUR_MERCHANT_ID>',
            cart: getNewCart(),
        };

        // Обработчик на получение платежного токена
        function onPaymentSuccess(event) {
            console.log(`OrderId — ${event.orderId}`);
        }

        // Обработчик на ошибки при оплате
        function onPaymentError(event) {
            console.log(`Payment error — ${event.reason}`);
        }

        // Обработчик на отмену оплаты
        function onPaymentAbort(event) {}

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

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

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

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

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

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

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

    createPaymentSession();
}

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

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

    const price = 7990;
    const count = randomInt(1, 20);
    const total = (count * price).toFixed(2);

    document.querySelector('#order_amount').innerHTML = Intl.NumberFormat('ru-RU', {
        style: 'currency',
        currency: 'RUB',
    }).format(total);

    return {
        items: [{ productId: '3', total, quantity: { count } }],
    };
}