HEX

File: /var/www/vhost/disk-apps/demo.sports-crowd.com/resources/views/culqi/webcheckout.blade.php
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>WebCheckout</title>
</head>

<body onload="byPassCulqi()">
    <form id="frmCheckout" method="GET" style="display: none;">
        <input type="hidden" name="apiKey" value="{{ $apiKey }}" />
        <input type="hidden" name="currency" value="{{ $currency }}" />
        <input type="hidden" name="amount" value="{{ $data['price'] }}" />
        <input type="hidden" name="order" value="{{ $data['reference'] }}" />
        <input type="hidden" name="origin" value="{{ $data['origin'] }}" />
        <input type="hidden" name="clientId" value="{{ $data['client_id'] }}" />

        <input type="hidden" name="team" value="{{ $team->name }}" />
        <input type="hidden" name="team_color" value="{{ $team->color }}" />
        <input type="hidden" name="team_logo" value="{{ $team->logo }}" />
    </form>
    <form id="frmPayment" action="/store/payment?paymentGatewayId={{ $data['gateway_payments_id'] }}" method="POST"
        style="display: none;">
        @csrf
        <input type="hidden" name="token" />
        <input type="hidden" name="email" />
        <input type="hidden" name="amount" />
        <input type="hidden" name="order" />
        <input type="hidden" name="origin" />
        <input type="hidden" name="clientId" />
    </form>
    <script src="https://checkout.culqi.com/js/v4"></script>
    <script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
    <script src="{{ asset('js/culqi.js') . '?v=' . time() }}"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.9/sweetalert2.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.9/sweetalert2.min.js"></script>
    <script>
        function byPassCulqi() {
            let frmCheckout = document.getElementById('frmCheckout');

            Culqi.publicKey = frmCheckout.elements["apiKey"].value;

            Culqi.settings({
                title: 'Portal Pagos ' + frmCheckout.elements["team"].value,
                currency: frmCheckout.elements["currency"].value,
                amount: frmCheckout.elements["amount"].value,
                order: frmCheckout.elements["order"].value
            });

            Culqi.options({
                lang: 'auto',
                modal: false,
                paymentMethods: {
                    tarjeta: true,
                    bancaMovil: true,
                    agente: true,
                    billetera: true,
                    cuotealo: true
                },
                style: {
                    logo: frmCheckout.elements["team_logo"].value,
                    bannerColor: frmCheckout.elements["team_color"].value, // hexadecimal
                    buttonBackground: frmCheckout.elements["team_color"].value, // hexadecimal
                    menuColor: frmCheckout.elements["team_color"].value, // hexadecimal
                    linksColor: frmCheckout.elements["team_color"].value, // hexadecimal
                    buttonText: '', // texto que tomará el botón
                    buttonTextColor: '', // hexadecimal
                    priceColor: frmCheckout.elements["team_color"].value // hexadecimal
                }
            });

            Culqi.open();

            var observer = new MutationObserver(function(mutations) {
                mutations.forEach(function(mutationRecord) {
                    console.log('style changed!', mutationRecord.target.style.visibility);
                    if (mutationRecord.target.style.visibility == 'collapse')
                        window.location.reload();
                });
            });

            let target = document.getElementById('culqi_checkout_frame');
            observer.observe(target, {
                attributes: true,
                attributeFilter: ['style']
            });
        }
    </script>

</body>

</html>