251 lines
10 KiB
HTML
251 lines
10 KiB
HTML
|
{% extends "mnfapp/base.html" %} {% load static %} {% block content %}
|
||
|
|
<html>
|
||
|
|
<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>
|
||
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" />
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400&display=swap" rel="stylesheet" />
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400&display=swap" rel="stylesheet" />
|
||
|
|
|
||
|
|
<!-- <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> -->
|
||
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
|
||
|
|
|
||
|
|
<!-- font awesome -->
|
||
|
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous" />
|
||
|
|
|
||
|
|
<!-- MDB -->
|
||
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.6.0/mdb.min.css" rel="stylesheet" />
|
||
|
|
|
||
|
|
<style>
|
||
|
|
body {}
|
||
|
|
.checkout-container {
|
||
|
|
grid-template-columns: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.m-div {
|
||
|
|
font-family: Helvetica, "sans-serif";
|
||
|
|
}
|
||
|
|
|
||
|
|
.checkout-content {
|
||
|
|
padding: 10px;
|
||
|
|
width: 70%;
|
||
|
|
height: auto;
|
||
|
|
border: solid black 1px;
|
||
|
|
background-color: rgb(233, 234, 243);
|
||
|
|
border-radius: 10px;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.navs {
|
||
|
|
background-color: rgb(67, 72, 158);
|
||
|
|
color: #fff;
|
||
|
|
width: 100%;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.s-btn {
|
||
|
|
width: 200px;
|
||
|
|
height: 45px;
|
||
|
|
background-color: rgb(92, 95, 163);
|
||
|
|
color: #fff;
|
||
|
|
padding: 0.3em;
|
||
|
|
border: solid rgb(92, 95, 163) 1px;
|
||
|
|
border-radius: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.s-btn:hover {
|
||
|
|
background-color: rgb(67, 72, 158);
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.batn {
|
||
|
|
width: 50%;
|
||
|
|
height: 50px;
|
||
|
|
background-color: rgb(92, 95, 163);
|
||
|
|
color: #fff;
|
||
|
|
border: solid rgb(92, 95, 163) 1px;
|
||
|
|
border-radius: 20px;
|
||
|
|
font-size: 28px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.batn:hover {
|
||
|
|
background-color: rgb(67, 72, 158);
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.headerrr {
|
||
|
|
color: blue;
|
||
|
|
height: auto;
|
||
|
|
background-color: transparent;
|
||
|
|
border: 0;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btnnn {
|
||
|
|
color: #ee3c4d;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.headerrr {
|
||
|
|
background-color: rgb(67, 72, 158);
|
||
|
|
width: 100%;
|
||
|
|
height: auto;
|
||
|
|
border-radius: 5px;
|
||
|
|
margin: 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#codee {
|
||
|
|
width: 215px;
|
||
|
|
height: 45px;
|
||
|
|
border-radius: 5px;
|
||
|
|
padding-left: 5px;
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div class="m-div">
|
||
|
|
<div class="container-fluid">
|
||
|
|
<div class="text-center">
|
||
|
|
<h1 class="navs">
|
||
|
|
Pricing Calculator
|
||
|
|
</h1>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- <a class="btnnn" onclick="window.history.back();">
|
||
|
|
Back To Payment
|
||
|
|
</a> -->
|
||
|
|
<br />
|
||
|
|
<br>
|
||
|
|
|
||
|
|
<div class="text-center">
|
||
|
|
|
||
|
|
<div class="checkout-container" style="display: flex; justify-content: CENTER">
|
||
|
|
<div class="checkout-content">
|
||
|
|
|
||
|
|
<h2 class="font-weight-bold headerrr" style="color: white; text-align: center;">
|
||
|
|
Order Summary
|
||
|
|
</h2>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div style="padding-left: 0.3em">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-sm-6">
|
||
|
|
<h5 style="text-align: left; padding-top: 10px">
|
||
|
|
Amount
|
||
|
|
</h5>
|
||
|
|
{% if isDiscount %}
|
||
|
|
<h5 style="text-align: left; padding-top: 10px">
|
||
|
|
Discount Amount
|
||
|
|
</h5>
|
||
|
|
<h5 style="text-align: left; padding-top: 10px">
|
||
|
|
Final Amount
|
||
|
|
</h5>
|
||
|
|
{% endif %}
|
||
|
|
{% if service %}
|
||
|
|
<h5 style="text-align: left; padding-top: 5px">
|
||
|
|
{{service}}
|
||
|
|
{%endif%}
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="col-sm-6">
|
||
|
|
<h5 class="" style="padding-top: 10px">
|
||
|
|
$ {{amount}} USD = ₹ {{amtINR}} INR
|
||
|
|
</h5>
|
||
|
|
{% if isDiscount %}
|
||
|
|
<h5 class="" style="padding-top: 10px">
|
||
|
|
$ {{totalDiscount}} USD = ₹ {{totalDiscountINR}} INR
|
||
|
|
</h5>
|
||
|
|
<h5 class="" style="padding-top: 10px">
|
||
|
|
$ {{finalAmount}} USD = ₹ {{finalAmountINR}} INR
|
||
|
|
</h5>
|
||
|
|
{% endif %}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-sm-12">
|
||
|
|
<hr>
|
||
|
|
</div>
|
||
|
|
{% if message %}
|
||
|
|
{% for msg in message %}
|
||
|
|
<h6 style="color:red;text-align: left; padding-top: 10px;">
|
||
|
|
{{msg}}
|
||
|
|
</h6>
|
||
|
|
{% endfor %}
|
||
|
|
|
||
|
|
<div class="col-sm-12">
|
||
|
|
<hr>
|
||
|
|
</div>
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
<div class="col-sm-6" style="text-align: left; ">
|
||
|
|
<h5 for="" style="padding-top: 10px; font-size:14px;">
|
||
|
|
Have a promo code? Enter Here
|
||
|
|
</h5>
|
||
|
|
<form action="{% url 'promo'%}" onsubmit="return false;" method="post">
|
||
|
|
|
||
|
|
{%csrf_token%}
|
||
|
|
<input type="hidden" name="subPlan" value="{{subPlan}}" />
|
||
|
|
<input type="hidden" name="pid" id="pid" value="{{pid}}" />
|
||
|
|
<input type="hidden" name="amount" value="{{amount}}" />
|
||
|
|
<input type="hidden" name="amtINR" id="pid" value="{{amtINR}}" />
|
||
|
|
|
||
|
|
<input type="hidden" name="desc" id="pid" value="{{desc}}" /> {%if green%} {%else%}
|
||
|
|
<input type="text" name="code" id="codee" style="" placeholder="Promo Code" required />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-sm-6" style="padding-top:10px;">
|
||
|
|
<span><br></span>
|
||
|
|
<button class="s-btn font-weight-bold" style=" font-size: 15px; ">
|
||
|
|
<!--<button onclick="alert('Promo code invalid');" class="s-btn font-weight-bold" style=" font-size: 15px; "> -->
|
||
|
|
Apply
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{%endif%}
|
||
|
|
</form>
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<br />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<form action="{% url 'card_razorpay'%}" method="post" id='payment-form'>
|
||
|
|
{%csrf_token%}
|
||
|
|
<input type="hidden" name="payment_intent_id" value='{{pid}}'> {% if desc %}
|
||
|
|
<input type="hidden" name="type" value='subscription'>
|
||
|
|
<input type="hidden" name="giftId" value=''> {%endif%} {% if giftId %}
|
||
|
|
<input type="hidden" name="type" value='gift'>
|
||
|
|
<input type="hidden" name="giftId" value='{{giftId}}'> {%endif%}
|
||
|
|
<input type="hidden" name="subPlan" value='{{subPlan}}'>
|
||
|
|
<div id="card-element" style="margin-top: 4vh; display: grid; grid-template-columns: auto;">
|
||
|
|
|
||
|
|
</form>
|
||
|
|
<div class="checkout-container text-center" style="justify-content: center">
|
||
|
|
{% if checkurl %}
|
||
|
|
<button class="batn " id="submit-button"><a href="{{serviceurl}}" style="color:white">{{serviceurl_name}}</a></button>
|
||
|
|
{% else %}
|
||
|
|
<button class="batn " id="submit-button"><a href="{% url serviceurl %}" style="color:white">{{serviceurl_name}}</a></button>
|
||
|
|
{% endif %}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<br><br><br><br><br>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|
||
|
|
{%endblock%}
|