forked from uncloud/uncloud
210 lines
12 KiB
HTML
210 lines
12 KiB
HTML
{% extends "nextcloud/base.html" %}
|
||
|
||
{% load static i18n compress %}
|
||
|
||
{% block title %} Payment Methods {% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="bg-white shadow-md rounded p-4 my-4">
|
||
<div class="row">
|
||
<div class="col-md-3">
|
||
<ul class="nav nav-tabs flex-column" id="myTabVertical" role="tablist">
|
||
<li class="nav-item"> <a class="nav-link" id="first-tab" href="{% url 'uncloud_pay:billing' %}">{% trans "Transaction History"%}</a> </li>
|
||
<li class="nav-item"> <a class="nav-link" id="second-tab" href="{% url 'uncloud_pay:bills' %}">{% trans "Bills"%}</a> </li>
|
||
<li class="nav-item"> <a class="nav-link active" id="fourth-tab" href="{% url 'uncloud_pay:cards' %}">{% trans "Payment Methods"%}</a> </li>
|
||
</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>
|
||
<h3 class="text-7 font-weight-400">{{balance}} CHF</h3>
|
||
<a href="" data-target="#make-deposit" data-toggle="modal">{% trans "Make a deposit"%}</a>
|
||
</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 'nextcloud/images/' %}{{card.brand}}.png" alt="visa" title=""> </p>
|
||
<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>
|
||
</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,
|
||
beforeSend: function(xhr) {
|
||
xhr.setRequestHeader("X-CSRFToken", '{{ csrf_token }}');
|
||
},
|
||
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 %} |