{% extends 'base.html.twig' %}

{% block entete %}
    {{ include('entete.html.twig') }}

{% endblock %}

{% block corps %}
    <section class="paiement">
        <h1 class="titre">Procéder au paiement</h1>
        <section class="action">
            <section class="intro">
                
                <p>Afin d'officialiser votre prédiction et participer au pool officiel, vous devez procéder au paiement de 3$ en cliquant sur le bouton de paiement.</p>
                <p> Vous aurez jusqu'à l'ouverture des bureaux de vote pour changer ou compléter vos prédictions (sans frais).</p>
            </section>
            <div  id="paypal-button-container"></div>
    </section>
</section>

    
    
   <script src="https://www.paypalobjects.com/api/checkout.js"></script>
<script>

    // Render the PayPal button

    paypal.Button.render({

        // Set your environment

        env: 'production', // sandbox | production

        // Specify the style of the button
        locale : 'fr_CA',
        funding: {
            allowed: [ paypal.FUNDING.CARD ],
            disallowed: [ paypal.FUNDING.CREDIT ]
        },
        style: {
            size:   'responsive',    // medium | large | responsive
            shape:  'rect',      // pill | rect
            color:  'gold'       // gold | blue | silver | black
        },

        // Specify allowed and disallowed funding sources
        //
        // Options:
        // - paypal.FUNDING.CARD
        // - paypal.FUNDING.CREDIT
        // - paypal.FUNDING.ELV

       

        // PayPal Client IDs - replace with your own
        // Create a PayPal app: https://developer.paypal.com/developer/applications/create

        client: {
            production: 'AZRA2GFo1Vbs20RokXZDPJ4UKlXM5dGL2yLJU7va6B37Doq6YJ5X08HSDwg717OnEpp9fph7iaP2OKt9'
        },

        payment: function(data, actions) {
            return actions.payment.create({
                payment: {
                    transactions: [
                        {
                            amount: { total: '3.00', currency: 'CAD' }
                        }
                    ]
                }
            });
        },
        commit: true,
        onCancel: function(data) {

            
        },
        onAuthorize: function(data, actions) {
            return actions.payment.execute().then(function() {
                fetch('/confirmerpaiement',{
                            method: "POST", // *GET, POST, PUT, DELETE, etc.
                            cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
                            credentials: "same-origin", // include, same-origin, *omit
                            headers: {
                                "Content-Type": "application/json; charset=utf-8",
                            },
                            redirect: "follow", // manual, *follow, error
                            referrer: "no-referrer", // no-referrer, *client
                            body: JSON.stringify(data), // body data type must match "Content-Type" header
                        })
                    .then(function(response) {
                        return response.json();
                    })
                    .then(function(data) {
                        
                        
                        window.location =data.url;
                    });
            });
        }

    }, '#paypal-button-container');

</script>
{% endblock %}
{% block javascripts %}

<script src="{{ asset("build/js/app.js") }}"></script>

{% endblock %}