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

_This is an unofficial repository_

import React, { useInsertionEffect, useState } from 'react';
const PaylineProvider = ({ production = false, children }) => {
    let initialState = false;
    if (typeof window !== 'undefined') {
        initialState = window.Payline !== undefined;
    }
    const baseUrl = production ? 'https://payment.cdn.payline.com/cdn' : 'https://homologation-payment.cdn.payline.com/cdn';
    // add script
    const scriptUrl = `${baseUrl}/scripts/widget-min.js`;
    const [, setIsLoaded] = useState(initialState);
    useInsertionEffect(() => {
        let script = document.querySelector(`script[src="${scriptUrl}"]`);
        if (!script) {
            script = document.createElement('script');
            script.src = scriptUrl;
            document.head.appendChild(script);
        }
        const onLoad = () => setIsLoaded(true);
        script.addEventListener('load', onLoad, false);
        return () => {
            if (script)
                script.removeEventListener('load', onLoad, false);
        };
    }, [scriptUrl]);
    // add stylesheet
    const stylesheetUrl = `${baseUrl}/styles/widget-min.css`;
    useInsertionEffect(() => {
        let stylesheet = document.querySelector(`link[href="${stylesheetUrl}"]`);
        if (!stylesheet) {
            stylesheet = document.createElement('link');
            stylesheet.href = stylesheetUrl;
            stylesheet.rel = 'stylesheet';
            document.head.appendChild(stylesheet);
        }
    }, [stylesheetUrl]);
    // https://stackoverflow.com/a/44050222
    const css = `
    #PaylineWidget #pl-mgr-paymentMethodList-layout .pl-paymentMethodLayout-view:not(:first-child) {
      display: none;
    }
    
    #PaylineWidget span.pl-card-logo.pl-custom {
      background-image: initial;
    }
  `;
    // render children
    return (React.createElement(React.Fragment, null,
        React.createElement("style", null, css),
        children));
};
export default PaylineProvider;