<!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 'paymentDone'%}" method="GET" style="display: none;" id="sub-form">
<input type="text" name="id" value='{{id}}'>
<input type="text" name="sid" value='{{sid}}'>
</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{
$('#3ds_result').text('thank you for payment')
$('#3ds_result').addClass('text-success')
$('#sub-form').submit()
// $.ajax({
// type: 'GET',
// data: {
// id: '{{id}}',
// // script_file_path: '{{script_file_path}}',
// // dial_conv_script: '{{dial_conv_script}}',
// // dial_src_lang: '{{dial_src_lang}}',
// // non_dial_src_lang: '{{non_dial_src_lang}}',
// // dial_src_script:'{{dial_src_script}}',
// },
// url: "{% url 'paymentDone' %}",
// contentType: "application/json",
// })
// }
}
})
})
}
</script>
<script>
_3dsec('pk_test_51JT8ahSF9vzGWngg9ik0jueTIilHhCQomixBFOiNzCuo4Wwc5oRm73d05vdcboMgNwhyNcNTa2si8idqbB5msvwe006q3S96tM', '{{payment_intent_secret}}')
// _3dsec('pk_live_51JT8ahSF9vzGWngg4N8fwhTPk5jq8fqBFdokqSMe7AVaOvH6BdyTwAfAoY79qkeJTFA0OdT5qkAk2FCNWCu6W9l000STNnHa7H', '{{payment_intent_secret}}')
</script>