107 lines
3.4 KiB
HTML
107 lines
3.4 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
{% load static %}
|
||
|
|
<html lang="en">
|
||
|
|
|
||
|
|
<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>
|
||
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||
|
|
|
||
|
|
<!--CSS file link-->
|
||
|
|
<link rel="stylesheet" href="{% static 'pitchdeck/css/checkoutNnew.css' %}" />
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<button class="backtopay" onclick="window.history.back()">
|
||
|
|
Back To Payment
|
||
|
|
</button>
|
||
|
|
<h1 class="checkout">Checkout</h1>
|
||
|
|
<div class="checkout-container">
|
||
|
|
<div>
|
||
|
|
<div class="checkout-content">
|
||
|
|
<form id="payment-form">
|
||
|
|
<h2 class="payment">Payment</h2>
|
||
|
|
{%csrf_token%}
|
||
|
|
<div class="method">
|
||
|
|
<h3>Choose Payment Method</h3>
|
||
|
|
<input type="hidden" name="payment_intent_id" value="{{pid}}" />
|
||
|
|
<!-- <input type="text" name="STRIPE_PUBLISHABLE_KEY" value='{{STRIPE_PUBLISHABLE_KEY}}'> -->
|
||
|
|
<div class="payment-elements" id="payment-element"></div>
|
||
|
|
<button class="submit-btn" id="submit">PAY NOW</button>
|
||
|
|
<div id="error-message">
|
||
|
|
<!-- Display error message to your customers here -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="checkout-content">
|
||
|
|
<h2 class="order-Summary">Order Summary</h2>
|
||
|
|
<div class="amontdiv">
|
||
|
|
<span class="amountpaid">Amount To Be Paid</span>
|
||
|
|
<span class="amountpaid">$ {{total_amount|floatformat:-2}} = ₹ {{ amtINR|floatformat:-2 }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
console.log("test1");
|
||
|
|
console.log("{{pk}}");
|
||
|
|
const stripe = Stripe("{{pk}}");
|
||
|
|
console.log("test2");
|
||
|
|
console.log("{{secret_key}}");
|
||
|
|
|
||
|
|
const options = {
|
||
|
|
clientSecret: "{{secret_key}}",
|
||
|
|
};
|
||
|
|
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 paymentElement = elements.create("payment");
|
||
|
|
paymentElement.mount("#payment-element");
|
||
|
|
|
||
|
|
const form = document.getElementById("payment-form");
|
||
|
|
form.addEventListener("submit", async (event) => {
|
||
|
|
event.preventDefault();
|
||
|
|
|
||
|
|
const { error } = await stripe.confirmPayment({
|
||
|
|
//`Elements` instance that was used to create the Payment Element
|
||
|
|
elements,
|
||
|
|
confirmParams: {
|
||
|
|
return_url: window.location.origin + "/conversion/paymentDoneppt_stripe",
|
||
|
|
//return_url: "{% url 'paymentDoneC' %}"
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
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>
|
||
|
|
|
||
|
|
</html>
|