template

{% extends "base.html" %}
{% load helpers %}
{% load i18n %}

{% block content %}
    <section class="detail-section">
        <h1 class="main-title" style="margin-bottom: 10px;">{% trans "Payment" %}</h1>

        <div style="width: 250px; padding: 20px; margin: 0 auto;">
            <dl class="def-list">
                <dt>{% trans "Package price net" %}:</dt>
                <dd><span id="price">0</span>{{ CURRENCY_SYMBOL }}</dd>

                <dt>{% trans "VAT" %} (19%):</dt>
                <dd><span id="tax-price">0</span>{{ CURRENCY_SYMBOL }}</dd>

                <dt>{% trans "e-payment fee" %}:</dt>
                <dd><span id="fee-price">0</span>{{ CURRENCY_SYMBOL }}</dd>

                <dt>{% trans "Total price gross" %}:</dt>
                <dd><span id="total-price-gross">{{ order.get_full_price }}</span>{{ CURRENCY_SYMBOL }}</dd>
            </dl>
        </div>

        {% url 'order_info' order.id as order_details_url %}
        <p>
        {% blocktrans with order_id=order.id order_details_url=order_details_url %}
            You can pay for order #{{ order_id }} now using the form below or pay for it later from <a href="{{ order_details_url }}">order list.</a>
        {% endblocktrans %}
        </p>

        <div class="form" style="width: 500px; margin: 0 auto;">
            {{ payment_method_form.method }}
        </div>
        <br>

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


        <div id="payment-forms">
            <div id="pay_pal"
                 data-fee-price='{{ order.get_paypal_price|sub:order.get_full_price|floatformat:"2" }}'
                 data-tax-price='{{ order.get_tax }}'
                 data-price='{{ order.price_without_tax }}'
                 data-total-price="{{ order.get_paypal_price }}"
                 class="hidden centerd-block">
            <span class="pay_pal_n"></span>
            </div>
        </div>
    </section>
{% endblock content %}

{% block bottom-content %}
    <span class="body-groups"></span>
{% endblock bottom-content %}

{% block js %}

    {# Paypal button #}
<script>
window.onload = function() {
    // Render the PayPal button

    paypal.Button.render({

        // Set your environment

        env: '{{ env }}', // sandbox | production

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

        client: {
            '{{ env }}' : '{{ paypal_token }}'
        },

        // Wait for the PayPal button to be clicked

        payment: function() {

            // Make a client-side call to the REST api to create the payment
            return paypal.rest.payment.create(this.props.env, this.props.client, {
                transactions: [
                    {
                        amount: { total: '{{ order.get_paypal_price }}', currency: 'EUR'
                    },
                        "invoice_number" : "{{ order.id }}",
                        "description": "Packages: {% for number in number_list %} {{ number }}{% if forloop.last %}.{% else %}, {% endif %} {% endfor%}"
                    }
                ]
            });
        },
        commit: true,

        // Wait for the payment to be authorized by the customer

        onAuthorize: function(data, actions) {

            // Execute the payment

            return actions.payment.execute().then(function() {
                data['csrfmiddlewaretoken'] = '{{ csrf_token }}';
                $.ajax({
                    url: '{% url 'paypal_payment_success' order.id  %}',
                    type: "POST",
                    dataType: 'json',
                    data: data,
                    success: function (json) {
                        window.location.href = json.url;
                        }
                    });
                document.querySelector('.pay_pal_n').innerText = 'Payment Complete! Validate payment...';
            });
        }
    }, '.pay_pal_n');
};
</script>
{# End Paypal button #}

    <script type="text/javascript">
        jQuery(document).ready(function($) {
            var activePayment = '{{ request.user.payment_method }}' === '' ? 'pay_pal': '{{ request.user.payment_method }}',
                paymentBlock = $('#payment-forms'),
                totalPriceSelector = $('#total-price-gross'),
                taxPriceSelector = $('#tax-price'),
                feePriceSelector = $('#fee-price'),
                feePriceBlock = feePriceSelector.parent(),
                feePriceBlockWithTitle = feePriceBlock.prev(),
                priceSelector = $('#price');

            $('#id_method').select2(
                'val', activePayment
            ).on('change', function(el) {
                changePayment(el.val);
            });

            var changePayment = function(val) {
                var paymentInfo = paymentBlock.find('#' + val),
                    price = paymentInfo.data('price'),
                    taxPrice = paymentInfo.data('tax-price'),
                    feePrice = paymentInfo.data('fee-price'),
                    totalPrice = paymentInfo.data('total-price');

                // Swith to correct payment block
                $('#payment-forms > div').addClass('hidden');
                paymentInfo.removeClass('hidden');

                if (feePrice !== 0) {
                    feePriceBlock.show();
                    feePriceBlockWithTitle.show();
                } else {
                    feePriceBlock.hide();
                    feePriceBlockWithTitle.hide();
                }

                // Change price information in top block
                priceSelector.text(price);
                taxPriceSelector.text(taxPrice);
                feePriceSelector.text(feePrice);
                totalPriceSelector.text(totalPrice);
            };

            // Bootstrap
            changePayment(activePayment);
        });
    </script>
{% endblock js %}