142 lines
5.4 KiB
HTML
142 lines
5.4 KiB
HTML
|
|
||
|
|
{% 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%}
|