{% extends "mnfapp/base.html" %}
{% load static %}
{% block content %}
<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">
<title>Checkout</title>
<script src="https://js.stripe.com/v3/"></script>
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> -->
<style>
.checkout-container{
display: grid;
grid-template-columns: 50% 50%;
}
.checkout-content{
margin: 10px;
padding: 10px;
}
</style>
</head>
<button style="color: blue;background-color: transparent; border: 0; text-decoration: underline;" onclick="window.history.back()"> Back To Payment</button>
<h1 style="background-color: black; color: white; padding:0.2em 0em 0.3em 0.3em ; width: 100vw;">Checkout</h1>
<div class="checkout-container">
<div>
<div class="checkout-content" style="border: solid black 1px;">
<form action="{% url 'card'%}" method="post" id='payment-form'>
<h2 style="background-color: black; color: white; padding:0.2em 0em 0.3em 0.3em ;">Payment</h2>
{%csrf_token%}
<div style="padding-left: 0.3em;">
<h3>Pay Using Card</h3>
<input type="hidden" name="payment_intent_id" value='{{pid}}'>
<input type="hidden" name="subPlan" value='{{subPlan}}'>
<div id="card-element" style="margin-top: 4vh; display: grid; grid-template-columns: auto;">
</div>
<div id="card-errors" role="alert"></div>
<button id="submit-button" style="width: 10vw; margin-top: 2em; background-color: blue; color: white;padding: 0.3em;border: solid blue 1px">PAY NOW</button>
</div>
</form>
</div>
</div>
<div class="checkout-content" style="border: solid black 1px;">
<h2 style="background-color: black; color: white; padding:0.2em 0em 0.3em 0.3em ;">Order Summary</h2>
<div style="display: grid; grid-template-columns: auto auto; margin-left: 0.5em;font-size: 1.4em;">
<span style="text-align: left;">Amount To Be Paid</span>
<span style="text-align: left;">$ {{amount}} USD</span>
<span style="text-align: left;">Subscription</span>
<span style="text-align: left;">{{subPlan}}</span>
<span style="text-align: left;">Auto renewal</span>
{% if subPlan != Life%}
<span>Yes</span>
{%else%}
<span>No</span>
{%endif%}
</div>
</div>
</div>
</div>
</div>
<script>
function card(stripe_publishable_key, customer_email){
document.addEventListener('DOMContentLoaded', function(event){
var stripe = Stripe(stripe_publishable_key);
var elements = stripe.elements();
var style = {
base: {
color: "#32325d",
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: "antialiased",
fontSize: "16px",
"::placeholder": {
color: "#aab7c4"
}
},
invalid: {
color: "#fa755a",
iconColor: "#fa755a"
}
};
var card = elements.create("card", { style: style });
card.mount("#card-element");
card.addEventListener('change', function(event){
var displayError = document.getElementById('card-errors');
if(event.error){
displayError.textContent = event.error.message;
}else{
displayError.textContent = '';
}
})
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event){
event.preventDefault();
stripe.createToken(card).then(function(result){
if(result.error){
var errorElement = document.getElementById('card-errors');
errorElement.textContent = result.error.message;
}else{
stripe.createPaymentMethod({
type:'card',
card:card,
billing_details:{
email:'{{user.email}}',
},
}).then(function(payment_method_result){
if(payment_method_result.error){
var errorElement = document.getElementById('card-errors');
errorElement.textContent = payment_method_result.error.message;
}else{
var form = document.getElementById('payment-form');
var hiddenInput = document.createElement('input');
// var hiddenInput2 = document.createElement('input');
// hiddenInput2.setAttribute('type','hidden');
// hiddenInput2.setAttribute('name','payment_intent_id');
// hiddenInput2.setAttribute('value',payment_intent_result.paymentIntent.id);
// form.appendChild(hiddenInput2);
hiddenInput.setAttribute('type','hidden');
hiddenInput.setAttribute('name','payment_method_id');
hiddenInput.setAttribute('value',payment_method_result.paymentMethod.id);
alert(payment_method_result.paymentMethod.id)
form.appendChild(hiddenInput);
form.submit();
}
})
}
})
})
})
}
</script>
<script>
card('pk_test_51JT8ahSF9vzGWngg9ik0jueTIilHhCQomixBFOiNzCuo4Wwc5oRm73d05vdcboMgNwhyNcNTa2si8idqbB5msvwe006q3S96tM', '{{user.email}}')
// card('pk_live_51JT8ahSF9vzGWngg4N8fwhTPk5jq8fqBFdokqSMe7AVaOvH6BdyTwAfAoY79qkeJTFA0OdT5qkAk2FCNWCu6W9l000STNnHa7H', '{{user.email}}')
</script>
{%endblock%}