{% 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: 48% 48%;
}
.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: #33b0ca; color: white; padding:0.2em 0em 0.3em 0.3em ; width: 96vw; margin-top:100px; text-align: center; font-size: 1.5rem;">Checkout</h1>
<div class="checkout-container">
<div>
<div class="checkout-content" style="border: solid black 1px; border-radius: 8px;">
<form id='payment-form'>
<h2 style="background-color: #33b0ca; color: white; padding:0.2em 0em 0.3em 0.3em; font-size: 1rem;border-radius: 4px; padding-left: 0.5rem;">Payment</h2>
{%csrf_token%}
<div style="padding-left: 0.3em;">
<h3 style="font-size: 1rem; font-weight: 600;">Choose Payment Method</h3>
<div id="payment-element" style="margin-top: 4vh; display: grid; grid-template-columns: auto;">
</div>
<button id="submit" style="width: 10vw; margin-top: 2em; background-color: #33b0ca; color: white;padding: 0.3em; border-radius: 8px; margin-left: 77.5%; border: none;">PAY NOW</button>
<div id="error-message">
<!-- Display error message to your customers here -->
</div>
</div>
</form>
</div>
</div>
<div class="checkout-content" style="border: solid black 1px; border-radius: 8px;">
<h2 style="background-color: #33b0ca; color: white; padding:0.2em 0em 0.3em 0.3em; font-size: 1rem; border-radius: 4px; padding-left: 0.5rem;">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; font-size: 1rem; transform: translateX(-6px);">Amount To Be Paid</span>
<span style="text-align: left; font-size: 1rem;">$ {{amount}} USD = ₹ {{amtINR}} INR</span>
{% if desc %}
<span style="text-align: left; font-size: 1rem; transform: translateX(-6px);">Subscription</span>
<span style="text-align: left; font-size: 1rem;">{{subPlan}}</span>
{%endif%}
</div>
</div>
<script>
console.log("test1");
console.log("{{pk}}");
var clientSecret = '{{secret_key}}'
const stripe = Stripe("{{pk}}");
console.log("test2");
const options = {
clientSecret: clientSecret,
};
console.log('{{pid}}');
const elements = stripe.elements(options);
var style = {
base: {
color: "#32325d",
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: "antialiased",
fontSize: "16px",
"::placeholder": {
color: "#aab7c4",
},
},
invalid: {
color: "#fa755a",
iconColor: "#fa755a",
},
};
var host = window.location.host;
console.log(host)
let protocol = ''
if (window.location.protocol === "https:") {
protocol = 'https://'
} else {
protocol = 'http://'
}
var csrfToken = "{{ csrf_token }}";
var redirectUrl = `${protocol}${host}/pay/paymentDone`
var paymentElement = elements.create("payment");
paymentElement.mount("#payment-element");
const form = document.getElementById('payment-form');
form.addEventListener('submit', async (event) => {
event.preventDefault();
console.log('testingforrev')
const {error} = await stripe.confirmPayment({
//`Elements` instance that was used to create the Payment Element
elements,
confirmParams: {
return_url: `${redirectUrl}`,
}
});
if (error) {
// This point will only be reached if there is an immediate error when
// confirming the payment. Show error to your customer (for example, payment
// details incomplete)
const messageContainer = document.querySelector('#error-message');
messageContainer.textContent = error.message;
} else {
// Your customer will be redirected to your `return_url`. For some payment
// methods like iDEAL, your customer will be redirected to an intermediate
// site first to authorize the payment, then redirected to the `return_url`.
}
});
</script>
{%endblock%}