Conversion_Kitchen_Code/kitchen_counter/conversion/templates/conversion/3dsecuredConversion.html

74 lines
2.2 KiB
HTML
Executable File

<!DOCTYPE html>
<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>
<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>
</head>
<body>
<div style="text-align: center">
<h2>3d Secure Page</h2>
<div>
<div id="3ds_result"></div>
</div>
</div>
<form
action="{% url 'paymentDoneC'%}"
method="POST"
style="display: none"
id="sub-form"
>
{%csrf_token%}
</form>
</body>
</html>
<script src="https://js.stripe.com/v3/"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function _3dsec(stripe_publishable_key, pi_secret) {
document.addEventListener("DOMContentLoaded", function (event) {
var stripe = Stripe(stripe_publishable_key);
var elements = stripe.elements();
stripe.confirmCardPayment(pi_secret).then(function (result) {
if (result.error) {
$("#3ds_result").text("Error!");
$("#3ds_result").addClass("text-danger");
} else {
if (result.paymentIntent.status === "succeeded") {
// Show your customer that the payment has succeeded
$("#3ds_result").text("thank you for payment");
$("#3ds_result").addClass("text-success");
$("#sub-form").submit();
} else if (
result.paymentIntent.status === "requires_payment_method"
) {
// Authentication failed, prompt the customer to enter another payment method
$("#3ds_result").text("Error!");
$("#3ds_result").addClass("text-danger");
} else {
console.log("failed");
}
}
});
});
}
</script>
<script>
_3dsec("{{pk}}", "{{payment_intent_secret}}");
</script>
<script>
console.log("{{pk}}", "{{payment_intent_secret}}");
</script>