2021-08-12 10:28:19 +00:00
{% extends "matrixhosting/base.html" %}
{% load static i18n compress %}
2021-08-13 08:06:13 +00:00
{% block title %} Payment Methods {% endblock %}
2021-08-12 10:28:19 +00:00
{% block content %}
2021-08-13 08:06:13 +00:00
< div class = "bg-white shadow-md rounded p-4 my-4" >
2021-08-12 10:28:19 +00:00
< div class = "row" >
< div class = "col-md-3" >
< ul class = "nav nav-tabs flex-column" id = "myTabVertical" role = "tablist" >
2021-08-24 12:25:28 +00:00
< li class = "nav-item" > < a class = "nav-link" id = "first-tab" href = "{% url 'matrixhosting:billing' %}" > {% trans "Transaction History"%}< / a > < / li >
2021-08-13 08:06:13 +00:00
< li class = "nav-item" > < a class = "nav-link" id = "second-tab" href = "{% url 'matrixhosting:bills' %}" > {% trans "Bills"%}< / a > < / li >
< li class = "nav-item" > < a class = "nav-link active" id = "fourth-tab" href = "{% url 'matrixhosting:cards' %}" > {% trans "Payment Methods"%}< / a > < / li >
2021-08-12 10:28:19 +00:00
< / ul >
< / div >
< div class = "col-md-9" >
< div class = "tab-content my-3" id = "myTabContentVertical" >
< div class = "tab-pane fade show active" id = "cards" role = "tabpanel" aria-labelledby = "cards" >
< div class = "row" >
< div class = "col-12" >
< div class = "row" >
< div class = "col-sm-12 col-lg-12" >
< div class = "featured-box style-3 float-right mb-4" >
< div class = "featured-box-icon text-17 text-light" > < i class = "fas fa-wallet" > < / i > < / div >
2021-08-13 08:06:13 +00:00
< h3 class = "text-7 font-weight-400" > {{balance}} CHF< / h3 >
< a href = "" data-target = "#make-deposit" data-toggle = "modal" > {% trans "Make a deposit"%}< / a >
2021-08-12 10:28:19 +00:00
< / div >
< / div >
< / div >
< / div >
< / div >
< hr class = "mt-0 mb-4 mx-n8" >
< div class = "row" >
< div class = "col-12" >
< h3 class = "text-4 font-weight-400 mb-4" > {% trans "Credit or Debit Cards"%} < span class = "text-muted text-3" > ({% trans "for payments"%})< / span > < / h3 >
< div class = "row" >
{% for card in object_list %}
< div class = "col-12 col-sm-6 col-lg-4 mt-2" >
< div class = "account-card {% if card.active %}account-card-primary{%endif%} text-white rounded p-3 mb-4 mb-lg-0" >
< p class = "text-4" > XXXX-XXXX-XXXX-{{card.last4}}< / p >
< p class = "d-flex align-items-center" > < span class = "account-card-expire text-uppercase d-inline-block opacity-7 mr-2" > Valid< br >
thru< br >
< / span > < span class = "text-4 opacity-9" > {{card.expiry_date|date:"m"}}/{{card.expiry_date|date:"y"}}< / span > {% if card.active %}< span class = "badge badge-warning text-0 font-weight-500 rounded-pill px-2 ml-auto" > {% trans "Primary"%}< / span > {%endif%} < / p >
< p class = "d-flex align-items-center m-0" > < span class = "text-uppercase font-weight-500" > {{card.card_name}}< / span > < img class = "ml-auto" src = "{% static 'matrixhosting/images/' %}{{card.brand}}.png" alt = "visa" title = "" > < / p >
2021-08-13 08:06:13 +00:00
< div class = "account-card-overlay rounded" data-card = "{{card.id}}" > < a href = "#" data-href = "{% url 'payments:card_activate'%}" class = "activate-btn text-light btn-link mx-2" > < span class = "mr-1" > < i class = "fas fa-edit" > < / i > < / span > {% trans "Set As Primary"%}< / a > < a href = "#" data-href = "{% url 'stripecreditcard-detail' card.id %}" class = "delete-card text-light btn-link mx-2" > < span class = "mr-1" > < i class = "fas fa-minus-circle" > < / i > < / span > {% trans "Delete"%}< / a > < / div >
2021-08-12 10:28:19 +00:00
< / div >
< / div >
{% endfor %}
< div class = "col-12 col-sm-6 col-lg-4 mt-2" > < a href = "" data-target = "#add-new-card-details" data-toggle = "modal" class = "account-card-new d-flex align-items-center rounded h-100 p-3 mb-4 mb-lg-0" >
< p class = "w-100 text-center line-height-4 m-0" > < span class = "text-3" > < i class = "fas fa-plus-circle" > < / i > < / span > < span class = "d-block text-body text-3" > Add New Card< / span > < / p >
< / a > < / div >
< / div >
< / div >
< / div >
< / div >
< div id = "make-deposit" class = "modal fade" aria-hidden = "true" style = "display: none;" >
< div class = "modal-dialog modal-dialog-centered" role = "document" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title font-weight-400" > {% trans "Make a deposit"%}< / h5 >
< button type = "button" class = "close font-weight-400" data-dismiss = "modal" aria-label = "Close" > < span aria-hidden = "true" > × < / span > < / button >
< / div >
< div class = "modal-body p-4" >
< form id = "make_deposit" method = "post" action = "{% url 'payment-list' %}" >
{% csrf_token %}
< input id = "type" name = "type" type = "hidden" value = "deposit" >
< input id = "currency" name = "currency" type = "hidden" value = "CHF" >
< div class = "form-group" >
< label for = "amount" > {% trans "Amount *"%}< / label >
< input id = "amount" name = "amount" class = "form-control" required type = "number" min = {{min_amount}} value = "" >
< / div >
< div class = "form-group" >
< label for = "notes" > {% trans "Notes"%}< / label >
< textarea id = "notes" name = "notes" class = "form-control" > < / textarea >
< / div >
< button class = "btn btn-primary float-right mt-2" id = "deposit-button" type = "submit" >
{% trans "Confirm"%}
< / button >
< / form >
< / div >
< / div >
< / div >
< / div >
< div id = "add-new-card-details" class = "modal fade" aria-hidden = "true" style = "display: none;" >
< div class = "modal-dialog modal-dialog-centered" role = "document" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title font-weight-400" > {% trans "Add a Card"%}< / h5 >
< button type = "button" class = "close font-weight-400" data-dismiss = "modal" aria-label = "Close" > < span aria-hidden = "true" > × < / span > < / button >
< / div >
< div class = "modal-body p-4" >
< form id = "addCard" method = "post" data-secret = "{{ client_secret }}" >
< div id = "card-element" > < / div >
< div id = "card-errors" > < / div >
< div class = "form-group" >
< label for = "cardNumber" > {% trans "Card Number"%}< / label >
< div id = "card-number-element" class = "field my-input form-control" > < / div >
< / div >
< div class = "form-row" >
< div class = "col-lg-6" >
< div class = "form-group" >
< label for = "expiryDate" > {% trans "Expiry Date"%}< / label >
< div id = "card-expiry-element" class = "field my-input form-control" > < / div >
< / div >
< / div >
< div class = "col-lg-6" >
< div class = "form-group" >
< label for = "cvvNumber" > {% trans "CVV"%} < span class = "text-info ml-1" data-toggle = "tooltip" data-original-title = "For Visa/Mastercard, the three-digit CVV number is printed on the signature panel on the back of the card immediately after the card's account number. For American Express, the four-digit CVV number is printed on the front of the card above the card account number." > < i class = "fas fa-question-circle" > < / i > < / span > < / label >
< div id = "card-cvc-element" class = "field my-input form-control" > < / div > < / div >
< / div >
< / div >
< div class = "form-group" >
< label for = "cardHolderName" > {% trans "Card Holder Name"%}< / label >
< input type = "text" class = "form-control" data-bv-field = "cardholdername" id = "cardholder-name" required = "" value = "" placeholder = "Card Holder Name" >
< / div >
< div class = "card-element brand text-6" >
< i class = "fab fa-credit-card" id = "brand-icon" > < / i >
< / div >
< button class = "btn btn-primary float-right mt-2" id = "card-button" type = "submit" > {% trans "Add Card"%}< / button >
< / form >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
{% endblock %}
{% block js_extra %}
< script src = "https://js.stripe.com/v3/" > < / script >
< script >
var stripe = Stripe('{{ stripe_pk }}');
var setupForm = document.getElementById('addCard');
var clientSecret = setupForm.dataset.secret;
window.cardNumberElement = loadStripe(stripe);
var cardholderName = document.getElementById('cardholder-name');
var messageContainer = document.getElementById('card-errors');
setupForm.addEventListener('submit', function(ev) {
ev.preventDefault();
stripe.confirmCardSetup(
clientSecret,
{
payment_method: {
card: window.cardNumberElement,
billing_details: {
name: cardholderName.value,
},
},
}
).then(function(result) {
if (result.error) {
var message = document.createTextNode('Error:' + result.error.message);
messageContainer.appendChild(message);
} else {
location.reload();
}
});
});
$('.activate-btn').click(function (e) {
e.preventDefault();
var url = $(e.target).data('href');
var card_id = $(e.target).parent().data('card');
$.ajax({
type: 'POST',
url: url,
data: {card_id: card_id, csrfmiddlewaretoken: '{{ csrf_token }}'},
dataType: 'json',
success: function (result) {
location.reload();
}
});
});
$('.delete-card').click(function (e) {
e.preventDefault();
var url = $(e.target).data('href');
var card_id = $(e.target).parent().data('card');
$.ajax({
type: 'DELETE',
url: url,
2021-08-24 12:25:28 +00:00
beforeSend: function(xhr) {
xhr.setRequestHeader("X-CSRFToken", '{{ csrf_token }}');
},
2021-08-12 10:28:19 +00:00
dataType: 'json',
success: function (result) {
location.reload();
}
});
});
$("#make_deposit").submit(function(e){
var form = $(this);
$('#deposit-button').html('< span class = "spinner-border spinner-border-sm mr-2" role = "status" aria-hidden = "true" > < / span > Loading...').attr('disabled', true);
$.ajax({
url : form.attr('action'),
type : form.attr('method'),
data : form.serialize(),
success: function(response) {
location.reload();
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.responseJSON);
$('#deposit-button').html("{% trans 'Confirm'%}").attr('disabled', false);
}
});
return false;
});
< / script >
{% endblock js_extra %}
