complite yooMoneyWidged and payments

src/app/components/YooMoneyWidget.tsx

@@ -0,0 +1,99 @@
+import { useCallback, useEffect } from 'react';
+import {
+	YooMoneyCheckoutWidget,
+	YooMoneyCheckoutWidgetConfig,
+	YooMoneyErrorCallbackResult
+} from "types-yoomoneycheckoutwidget";
+
+let isLoading = false;
+let isInited = false;
+export default function YooWidget({ config, onComplete, onSuccess, onFail, onModalClose }: {
+	/**
+	 * Описание https://yookassa.ru/developers/payment-acceptance/integration-scenarios/widget/reference#initialization-parameters
+	 */
+	config: YooMoneyCheckoutWidgetConfig,
+	/** после успешной оплаты*/
+	onComplete?: () => void,
+	/** после успешной оплаты, только если не подписались на onComplete*/
+	onSuccess?: () => void,
+	/** только если вы отключили обработку неуспешных попыток в виджете: пользователь выбрал любой способ оплаты, но платеж не прошел; закончился срок действия токена.*/
+	onFail?: () => void,
+	/** после закрытия модального окна платежной формы если customization.modal==true */
+	onModalClose?: () => void,
+}) {
+	const isModal = config?.customization?.modal;
+	let checkout: YooMoneyCheckoutWidget;
+	const destroy = () => {
+		console.log('checkout.destroy');
+		checkout.destroy();
+		isInited = false;
+	}
+
+	const initializeWidget = useCallback(
+		() => {
+			isInited = true;
+			isLoading = false;
+			if (!isModal) {
+				const userErrorCallBack = config.error_callback;
+				config.error_callback = (error: YooMoneyErrorCallbackResult) => {
+					userErrorCallBack(error);
+					isInited = false;
+				};
+			}
+			checkout = new window.YooMoneyCheckoutWidget(config);
+			checkout.on('complete', (result) => {
+				console.log('on complete', result);
+				onComplete && onComplete();
+				destroy();
+			});
+			onSuccess && checkout.on('success', (result) => {
+				console.log('on success', result);
+				onSuccess();
+				destroy();
+			});
+			onFail && checkout.on('fail', (result) => {
+				console.warn('on fail', result);
+				onFail();
+				destroy();
+			});
+
+			if (config.customization?.modal) {
+				checkout.on('modal_close', (result) => {
+					onModalClose && onModalClose();
+					destroy();
+				});
+			}
+			checkout.render(config.customization?.modal ? undefined : 'payment-form');
+
+		}, [config, onSuccess]);
+
+	useEffect(() => {
+		if (!isLoading && !isInited) {
+			if (!window.YooMoneyCheckoutWidget) {
+				isLoading = true;
+				const script = document.createElement('script');
+				script.src = 'https://yookassa.ru/checkout-widget/v1/checkout-widget.js';
+				script.async = true;
+				script.onload = initializeWidget;
+				document.head.appendChild(script);
+				return () => {
+					document.head.removeChild(script);
+				};
+			} else {
+				initializeWidget();
+			}
+		}
+
+		return () => {
+			if (!isInited && !isModal) {
+				destroy();
+			}
+		}
+	});
+
+	return (
+		<>
+			{isModal ? '' : <div id="payment-form" />}
+		</>
+	);
+}