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

<div id="ya-pay-widget"></div>

<form id="submit-payment-form">
    <button type="submit">Оплатить</button>
</form>

<script
    id="ya-pay-sdk"
    data-yapay-sdk
    src="https://pay.yandex.ru/sdk/v1/pay.js"
    async
></script>

const sdkScript = document.getElementById('ya-pay-sdk');

if (sdkScript instanceof HTMLScriptElement) {
    sdkScript.addEventListener('load', () => void onYaPayLoad());
    sdkScript.addEventListener('error', () => showAlternativePaymentMethod());
}

if (window.YaPay) {
    void onYaPayLoad();
}

const MERCHANT_ID = 'abcdef12-3456-7890-abcd-ef1234567890';

const cart = {
    items: [
        {
            productId: 'product-1',
            quantity: {
                count: '1',
            },
            total: '123.45',
        },
    ],
};

function createPaymentData(YaPay, cart) {
    return {
        env: YaPay.PaymentEnv.Sandbox,
        version: 4,
        currencyCode: YaPay.CurrencyCode.Rub,
        merchantId: MERCHANT_ID,
        totalAmount: '123.45',
        cart,
    };
}

function onYaPayLoad() {
    const YaPay = window.YaPay;
    const paymentData = createPaymentData(YaPay, cart);

    YaPay.createSession(paymentData, {
        onUpdateError: (error) => {
            // Обновление не применено. Предыдущее состояние заказа сохранено.
            console.error(error);
            showCartUpdateError();
        },
    })
        .then((paymentSession) => {
            const widgetContainer = document.getElementById('ya-pay-widget');

            if (!widgetContainer) {
                throw new Error('Не найден контейнер платежного виджета');
            }

            paymentSession.mountWidget(widgetContainer, {
                widgetType: YaPay.WidgetType.PayWidget,
                widgetTheme: YaPay.WidgetTheme.Light,
                events: {
                    onPaymentFailed: () => {
                        // Оплата не прошла. Предложите повторить попытку
                        // или выбрать другой способ оплаты.
                        showPaymentError();
                    },
                    onFatalError: (error) => {
                        // Виджет не может продолжить работу.
                        // Покажите резервный способ оплаты.
                        console.error(error);
                        showAlternativePaymentMethod();
                    },
                },
            });

            configureCartUpdate(paymentSession);
            configurePaymentStart(paymentSession);
        })
        .catch((error) => {
            if (error.code === 'PAYMENT_SHEET_VALIDATION_ERROR') {
                // Исходные данные платежа не прошли проверку.
                showPaymentDataError(error);
                return;
            }

            // Не удалось создать платежную сессию или разместить виджет.
            console.error(error);
            showAlternativePaymentMethod();
        });
}

function configureCartUpdate(paymentSession) {
    onCartChanged(() => {
        paymentSession.update(async () => {
            const {cart, totalAmount} = await updateCartOnMerchantServer();

            return { cart, totalAmount };
        });
    });
}

function configurePaymentStart(paymentSession) {
    document.querySelector('#submit-payment-form').addEventListener('submit', async (event) => {
        event.preventDefault();

        try {
            // Сервер создает заказ через Yandex Pay API и возвращает ссылку
            // вида https://pay.ya.ru/l/1234.
            const paymentUrl = await createOrderOnMerchantServer();

            paymentSession.startPayment(paymentUrl);
        } catch (error) {
            console.error(error);
            showPaymentError();
        }
    });
}

const events = {
    onFatalError: (error) => {
        console.error(error);
        showAlternativePaymentMethod();
    },
};

const events = {
    onPaymentFailed: () => {
        showPaymentError();
    },
};

const events = {
    onClose: (paymentStatus) => {
        restorePage(paymentStatus);
    },
};

const events = {
    onPaymentSuccess: (redirectUrls) => {
        if (redirectUrls.onSuccess) {
            window.location.assign(redirectUrls.onSuccess);
        }
    },
};