@ribpay/react-payline/dist/src/PaylineWidget.js

_This is an unofficial repository_

import React, { useRef, useEffect } from 'react';
const PaylineWidget = ({ token, template = 'column', embeddedRedirectionAllowed = false, partnerReturnUrl, orderId, redirectUrl, instantPayment = 'NO', bic, onWillInit, onWillShow, onFinalStateHasBeenReached, onDidShowState, onWillDisplayMessage, onWillRemoveMessage, onBeforePayment, ...htmlAttributes }) => {
    const eventHandlers = {
        onWillInit,
        onWillShow,
        onFinalStateHasBeenReached,
        onDidShowState,
        onWillDisplayMessage,
        onWillRemoveMessage,
        onBeforePayment,
    };
    const eventHandlersRef = useRef(eventHandlers);
    eventHandlersRef.current = eventHandlers;
    useEffect(() => {
        const propNames = Object.keys(eventHandlersRef.current);
        propNames.forEach((propName) => {
            window[`Payline_${propName}`] = (...args) => {
                const eventHandler = eventHandlersRef.current[propName];
                if (eventHandler) {
                    return eventHandler(...args);
                }
                return true;
            };
        });
        return () => {
            propNames.forEach((propName) => {
                delete window[`Payline_${propName}`];
            });
        };
    }, []);
    useEffect(() => {
        if (token) {
            window.Payline?.Api.init(token, template); // https://support.payline.com/hc/fr/articles/360018691239-Comment-r%C3%A9initialiser-le-widget-payline-
            return () => window.Payline?.Api.hide();
        }
    }, [token]);
    useEffect(() => {
        // https://docs.monext.fr/pages/viewpage.action?pageId=747146983
        if (orderId) {
            window.RIBPayInit = () => {
                const transform = () => {
                    const dataAttributes = {
                        order_id: orderId,
                        redirect_url: redirectUrl,
                        instant_payment: instantPayment,
                        bic,
                    };
                    return Object.entries(dataAttributes)
                        .reduce((prev, curr) => {
                        if (curr[1])
                            return [...prev, `data-${curr[0]}=${curr[1]}`];
                        return prev;
                    }, [])
                        .join(" ");
                };
                const html = `
          <link href="https://unpkg.com/@ribpay/widget@~0.2.30/build/static/css/widget-min.css" rel="stylesheet" />
          <script src="https://unpkg.com/@ribpay/widget@~0.2.30/build/static/js/widget-min.js"></script>
          <div id="RIBPayWidget" ${transform()}></div>
        `;
                return [
                    {
                        index: 0,
                        paymentMethodId: "RIBPay",
                        html,
                    },
                ];
            };
        }
    }, [orderId]);
    return (React.createElement("div", { "data-auto-init": !!token, "data-token": token, "data-template": template, "data-embeddedredirectionallowed": embeddedRedirectionAllowed, "data-partnerreturnurl": partnerReturnUrl, "data-event-willinit": "Payline_onWillInit", "data-event-willshow": "Payline_onWillShow", "data-event-finalstatehasbeenreached": "Payline_onFinalStateHasBeenReached", "data-event-didshowstate": "Payline_onDidShowState", "data-event-willdisplaymessage": "Payline_onWillDisplayMessage", "data-event-willremovemessage": "Payline_onWillRemoveMessage", "data-event-beforepayment": "Payline_onBeforePayment", ...htmlAttributes, id: "PaylineWidget", "data-custompm": "RIBPayInit" }));
};
export default PaylineWidget;