{% 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%}