SkyLearn-Test/templates/payments/payment_gateways.html

{% extends 'base.html' %}
{% block title %}Choose a gateway{% endblock title %}
{% load static %}

{% block header %}
<!-- Add meta tags for mobile and IE -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script src="https://use.fontawesome.com/aade6c6330.js"></script>
{% endblock %}

{% block content %}
<style type="text/css">
	.card-payment {
		border-top: 10px solid #ddd;
		border-radius: 0px;
		padding: 10px;
		margin: 0;
		/*background: #fff;*/
		text-align: center;
		width: 300px;
		transition: .5s;
	}
	.card-payment:hover {
		background: #f4f4f4;
	}
	.card-payment h4 {
		font-weight: 200;
	}
	.card-payment p {
		margin: 5px;
		font-weight: 300;
	}
	.card-payment.paypal {
		border-top-color: #ffc439;
		/*transform: translateY(-50px);*/
	}
	.card-payment.stripe {
		border-top-color: #62b8ea;
	}
	.card-payment.coinbase {
		border-top-color: #1652f0;
	}
	.card-payment.paylike {
		border-top-color: #60a65d;
	}
	.btn {
		width: 100%;
		border-radius: 1px;
		padding: 10px;
		color: #fff!important;
		transition: .5s;
	}
	.btn:hover {
		transform: scale(.95);
	}
	.btn:focus {
		box-shadow: none!important;
	}
	.stripe .btn {
		background: #6869d4;
	}
	.coinbase .btn {
		background: #1652f0;
	}
	.paylike .btn {
		background: #60a65d;
	}
</style>
<div class="container">
	<h1 class="display-4">Payment GateWays</h1>
	<div class="row">
		<div class="col-12 d-flex justify-content-center">

			  <form method="POST" action="{% url 'gopay_payment' %}">
				{% csrf_token %}
				<button name="pay" type="submit" class="btn btn-primary">Zaplatit</button>
			  </form>
			  <script type="text/javascript" src="https://gw.sandbox.gopay.com/gp-gw/js/embed.js"></script>

			<div class="card-payment paypal">
				<h4>Paypal</h4>
    			<div id="paypal-button-container"></div>
			</div>
			<div class="card-payment stripe">
				<h4>Stripe</h4>
				<form action="{% url 'charge' %}" method="POST">
				  {% csrf_token %}
				  <script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
			          data-key="{{ key }}"
			          data-description="{{ description }}"
			          data-amount="{{ amount }}"
			          data-locale="auto">
				  </script>
				</form>
				<p>
					Make payment with stripe and get jobs done.
				</p>
			</div>
			<div class="card-payment coinbase">
				<h4>CoinBase</h4>
				<a href="{% url 'coinbase' %}" class="btn"><span style="font-weight: 1000">C</span> CoinBase</a>
				<p>
					Make payment with stripe and get jobs done.
				</p>
			</div>
			<div class="card-payment paylike">
				<h4>Paylike</h4>
				<a href="{% url 'paylike' %}" class="btn">Paylike</a>
				<p>
					Make payment with stripe and get jobs done.
				</p>
			</div>
		</div>
	</div>
</div>

{% endblock content %}


{% block js %}

	<!-- Paypal setup -->

    <!-- Include the PayPal JavaScript SDK -->
    <script src="https://www.paypal.com/sdk/js?client-id=AabPcZJCP3oBL_2GTVXO58VnsyvVEzUrWORwilbX9fA5ywWdR9YSaIdu4v-nDVMIszpI1PEy9K-76jlW&currency=USD"></script>

    <script>
    	// django cookie
    	function getCookie(name) {
		    let cookieValue = null;
		    if (document.cookie && document.cookie !== '') {
		        const cookies = document.cookie.split(';');
		        for (let i = 0; i < cookies.length; i++) {
		            const cookie = cookies[i].trim();
		            // Does this cookie string begin with the name we want?
		            if (cookie.substring(0, name.length + 1) === (name + '=')) {
		                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
		                break;
		            }
		        }
		    }
		    return cookieValue;
		}
		const csrftoken = getCookie('csrftoken');

    	// approve the payment complete for the invoice
    	function completeOrder() {
    		var invoice = '{{ invoice_session }}'
    		var url = "{% url 'complete' %}";

    		fetch(url, {
    			method: 'POST',
    			headers: {
    				'Content-type': 'application/json',
    				'X-CSRFToken': csrftoken,
    			},
    			body: JSON.stringify({
    				'invoice': invoice
    			})
    		})
    	}


        // Render the PayPal button into #paypal-button-container
        paypal.Buttons({

            // Set up the transaction
            createOrder: function(data, actions) {
                return actions.order.create({
                    purchase_units: [{
                        amount: {
                            value: '1.44'
                        }
                    }]
                });
            },

            // style: {
            //     color:  'blue',
            //     shape:  'rect',
            //     label:  'pay',
            //     height: 40
            // },


            // Finalize the transaction
            onApprove: function(data, actions) {
                return actions.order.capture().then(function(details) {
                    // Show a success message to the buyer
                    // call the create function
                    completeOrder();
					window.location = "/payments/payment-succeed";
                    // alert('Transaction completed by ' + details.payer.name.given_name + '!');
                });
            }


        }).render('#paypal-button-container');

    </script>


{% endblock js %}