163 lines
6.9 KiB
HTML
Executable File
163 lines
6.9 KiB
HTML
Executable File
|
|
{% extends "mnfapp/base.html" %}
|
|
{% load static %}
|
|
{% block content %}
|
|
<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>
|
|
<!-- <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> -->
|
|
<style>
|
|
.checkout-container{
|
|
display: grid;
|
|
grid-template-columns: 50% 50%;
|
|
}
|
|
.checkout-content{
|
|
margin: 10px;
|
|
padding: 10px;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
<button style="color: blue;background-color: transparent; border: 0; text-decoration: underline;" onclick="window.history.back()"> Back To Payment</button>
|
|
<h1 style="background-color: black; color: white; padding:0.2em 0em 0.3em 0.3em ; width: 100vw;">Checkout</h1>
|
|
<div class="checkout-container">
|
|
<div>
|
|
<div class="checkout-content" style="border: solid black 1px;">
|
|
<form action="{% url 'card'%}" method="post" id='payment-form'>
|
|
<h2 style="background-color: black; color: white; padding:0.2em 0em 0.3em 0.3em ;">Payment</h2>
|
|
{%csrf_token%}
|
|
<div style="padding-left: 0.3em;">
|
|
<h3>Pay Using Card</h3>
|
|
<input type="hidden" name="payment_intent_id" value='{{pid}}'>
|
|
<input type="hidden" name="subPlan" value='{{subPlan}}'>
|
|
<div id="card-element" style="margin-top: 4vh; display: grid; grid-template-columns: auto;">
|
|
|
|
</div>
|
|
<div id="card-errors" role="alert"></div>
|
|
<button id="submit-button" style="width: 10vw; margin-top: 2em; background-color: blue; color: white;padding: 0.3em;border: solid blue 1px">PAY NOW</button>
|
|
</div>
|
|
|
|
</form>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
<div class="checkout-content" style="border: solid black 1px;">
|
|
<h2 style="background-color: black; color: white; padding:0.2em 0em 0.3em 0.3em ;">Order Summary</h2>
|
|
<div style="display: grid; grid-template-columns: auto auto; margin-left: 0.5em;font-size: 1.4em;">
|
|
<span style="text-align: left;">Amount To Be Paid</span>
|
|
<span style="text-align: left;">$ {{amount}} USD</span>
|
|
<span style="text-align: left;">Subscription</span>
|
|
<span style="text-align: left;">{{subPlan}}</span>
|
|
<span style="text-align: left;">Auto renewal</span>
|
|
{% if subPlan != Life%}
|
|
<span>Yes</span>
|
|
{%else%}
|
|
<span>No</span>
|
|
{%endif%}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
function card(stripe_publishable_key, customer_email){
|
|
document.addEventListener('DOMContentLoaded', function(event){
|
|
var stripe = Stripe(stripe_publishable_key);
|
|
var elements = stripe.elements();
|
|
var style = {
|
|
base: {
|
|
color: "#32325d",
|
|
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
|
|
fontSmoothing: "antialiased",
|
|
fontSize: "16px",
|
|
"::placeholder": {
|
|
color: "#aab7c4"
|
|
}
|
|
},
|
|
invalid: {
|
|
color: "#fa755a",
|
|
iconColor: "#fa755a"
|
|
}
|
|
};
|
|
var card = elements.create("card", { style: style });
|
|
card.mount("#card-element");
|
|
|
|
card.addEventListener('change', function(event){
|
|
var displayError = document.getElementById('card-errors');
|
|
if(event.error){
|
|
displayError.textContent = event.error.message;
|
|
}else{
|
|
displayError.textContent = '';
|
|
}
|
|
})
|
|
var form = document.getElementById('payment-form');
|
|
form.addEventListener('submit', function(event){
|
|
event.preventDefault();
|
|
stripe.createToken(card).then(function(result){
|
|
if(result.error){
|
|
var errorElement = document.getElementById('card-errors');
|
|
errorElement.textContent = result.error.message;
|
|
}else{
|
|
stripe.createPaymentMethod({
|
|
type:'card',
|
|
card:card,
|
|
billing_details:{
|
|
email:'{{user.email}}',
|
|
},
|
|
}).then(function(payment_method_result){
|
|
if(payment_method_result.error){
|
|
var errorElement = document.getElementById('card-errors');
|
|
errorElement.textContent = payment_method_result.error.message;
|
|
}else{
|
|
var form = document.getElementById('payment-form');
|
|
var hiddenInput = document.createElement('input');
|
|
// var hiddenInput2 = document.createElement('input');
|
|
// hiddenInput2.setAttribute('type','hidden');
|
|
// hiddenInput2.setAttribute('name','payment_intent_id');
|
|
// hiddenInput2.setAttribute('value',payment_intent_result.paymentIntent.id);
|
|
|
|
// form.appendChild(hiddenInput2);
|
|
|
|
hiddenInput.setAttribute('type','hidden');
|
|
hiddenInput.setAttribute('name','payment_method_id');
|
|
hiddenInput.setAttribute('value',payment_method_result.paymentMethod.id);
|
|
alert(payment_method_result.paymentMethod.id)
|
|
|
|
form.appendChild(hiddenInput);
|
|
form.submit();
|
|
}
|
|
})
|
|
}
|
|
})
|
|
})
|
|
})
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
<script>
|
|
card('pk_test_51JT8ahSF9vzGWngg9ik0jueTIilHhCQomixBFOiNzCuo4Wwc5oRm73d05vdcboMgNwhyNcNTa2si8idqbB5msvwe006q3S96tM', '{{user.email}}')
|
|
// card('pk_live_51JT8ahSF9vzGWngg4N8fwhTPk5jq8fqBFdokqSMe7AVaOvH6BdyTwAfAoY79qkeJTFA0OdT5qkAk2FCNWCu6W9l000STNnHa7H', '{{user.email}}')
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
{%endblock%} |