add web
This commit is contained in:
@@ -0,0 +1,74 @@
|
||||
{% extends '__layout__.html' %}
|
||||
{% block title %}Cryptomus Dashboard{% endblock %}
|
||||
{% block head %}
|
||||
{% endblock %}
|
||||
{% block content %}
|
||||
<div style="min-height: 100vh;width: 100%;padding: 20px;margin-top: 100px;max-width: 1200px;" class="ms-auto me-auto">
|
||||
<a href="/membership/payment_methods" class="text-white text-decoration-none"><i class="bi bi-caret-left"></i> Return to payment methods</a>
|
||||
<div class="d-flex align-items-center">
|
||||
<h1 class="m-0">Pay with Cryptomus</h1>
|
||||
<button class="btn btn-light btn-lg ms-auto" id="pay-button" data-csrf-token="{{ csrf_token() }}"><i class="bi bi-coin"></i> Donate $5</button>
|
||||
</div>
|
||||
<div class="linebreak"></div>
|
||||
<div>
|
||||
<div class="p-1 mt-1">
|
||||
{% if len(UserInvoices.items) == 0 %}
|
||||
<p class="text-secondary w-100 text-center mt-5 mb-5" style="font-size: 14px;">No past payments</p>
|
||||
{% else %}
|
||||
{% for invoice in UserInvoices.items %}
|
||||
<div class="p-2 d-flex align-items-center mb-2" style="background-color: rgb(15,15,15);border: 1px solid rgb(60,60,60);border-radius: 4px;">
|
||||
<div>
|
||||
<h5 class="m-0">{{invoice.cryptomus_invoice_id}}</h5>
|
||||
<div class="d-flex align-items-center">
|
||||
<p class="text-secondary m-0" style="font-size: 14px;">{{invoice.created_at.strftime("%d/%m/%Y %H:%M:%S UTC")}}</p>
|
||||
<p class="text-secondary m-0 ms-2" style="font-size: 14px;"> | {{invoice.status.name}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/cryptomus_service/view_payment/{{invoice.id}}" class="btn btn-light ms-auto" style="font-weight: 600;">View Payment</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="d-flex w-100 mt-2" style="font-size: 14px;">
|
||||
<a class="text-decoration-none ms-auto {% if not UserInvoices.has_prev: %}text-secondary{%endif%}" {% if UserInvoices.has_prev: %}href="/cryptomus_service/dashboard?page={{UserInvoices.prev_num}}"{%endif%}>Previous</a>
|
||||
<p class="m-0 ms-2 me-2 text-white">Page {{UserInvoices.page}} of {{UserInvoices.pages}}</p>
|
||||
<a class="text-decoration-none me-auto {% if not UserInvoices.has_next: %}text-secondary{%endif%}" {% if UserInvoices.has_next: %}href="/cryptomus_service/dashboard?page={{UserInvoices.next_num}}"{%endif%}>Next</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const payButton = document.getElementById('pay-button');
|
||||
payButton.addEventListener('click', function() {
|
||||
if (payButton.classList.contains('disabled')) {
|
||||
return;
|
||||
}
|
||||
var csrfToken = payButton.getAttribute('data-csrf-token');
|
||||
|
||||
payButton.classList.add('disabled');
|
||||
fetch('/cryptomus_service/create_payment/membership', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': csrfToken
|
||||
},
|
||||
})
|
||||
.then(async response => {
|
||||
if (!response.ok) {
|
||||
alert(`An error occurred while trying to create a payment, please try again later. Status: ${response.status}`)
|
||||
return;
|
||||
} else {
|
||||
var data = await response.json();
|
||||
console.log(data);
|
||||
if (data.status == 'success') {
|
||||
window.location.href = data.payment_url;
|
||||
} else {
|
||||
alert(`An error occurred while trying to create a payment, please try again later.`)
|
||||
}
|
||||
}
|
||||
}).finally(() => {
|
||||
payButton.classList.remove('disabled');
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,63 @@
|
||||
{% extends '__layout__.html' %}
|
||||
{% block title %}View Payment{% endblock %}
|
||||
{% block head %}
|
||||
{% endblock %}
|
||||
{% block content %}
|
||||
<div style="min-height: 100vh;width: 100%;padding: 20px;margin-top: 100px;max-width: 1200px;min-width: 900px;" class="ms-auto me-auto">
|
||||
<a href="/cryptomus_service/dashboard" class="text-white text-decoration-none"><i class="bi bi-caret-left"></i> Return to payment dashboard</a>
|
||||
<div class="w-100 p-2">
|
||||
<div class="d-flex align-items-center">
|
||||
<div>
|
||||
<h2 class="m-0">Invoice</h2>
|
||||
<p class="text-secondary m-0">ID: {{InvoiceObj.cryptomus_invoice_id}}</p>
|
||||
</div>
|
||||
<div class="ms-auto">
|
||||
<a href="/cryptomus_service/pay_invoice/{{ InvoiceObj.id }}" class="btn btn-lg btn-light ms-auto {% if InvoiceObj.is_final %}disabled{% endif %}" style="font-weight: 600;"><i class="bi bi-coin"></i> Pay Invoice</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="linebreak"></div>
|
||||
<div class="d-flex">
|
||||
<div class="p-1" style="width: 50%;">
|
||||
<div class="border-bottom" style="border-color: rgb(60,60,60) !important;">
|
||||
<h4 class="m-0">Invoice Details</h4>
|
||||
<div class="p-1">
|
||||
<p class="text-secondary m-0">Created at: <span class="text-white">{{InvoiceObj.created_at.strftime("%d/%m/%Y %H:%M:%S UTC")}}</span></p>
|
||||
<p class="text-secondary m-0">Expires at: <span class="text-white">{{InvoiceObj.expires_at.strftime("%d/%m/%Y %H:%M:%S UTC")}}</span></p>
|
||||
<p class="text-secondary m-0">Last Status Update: <span class="text-white">{{InvoiceObj.updated_at.strftime("%d/%m/%Y %H:%M:%S UTC")}}</span></p>
|
||||
<p class="text-secondary m-0">Invoice Status: <span class="text-white">{{InvoiceObj.status.name}}</span></p>
|
||||
<p class="text-secondary m-0">Is Finalised: <span class="text-white">{% if InvoiceObj.is_final %}Yes{% else %}No{% endif %}</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<h4 class="m-0">Payment Details</h4>
|
||||
<div class="p-1">
|
||||
<p class="text-secondary m-0">Required Amount: <span class="text-white">{{ round( InvoiceObj.required_amount, 2 )}} {{InvoiceObj.currency}}</span></p>
|
||||
<p class="text-secondary m-0">USD received: <span class="text-white">{{ round( InvoiceObj.paid_amount_usd, 2 )}} USD</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-1" style="width: 50%;">
|
||||
<div>
|
||||
<h4 class="m-0">Additional Details</h4>
|
||||
<div class="p-1">
|
||||
{% if InvoiceObj.assigned_key == None %}
|
||||
<p class="text-secondary w-100 text-center m-2" style="font-size: 14px;">No additional details</p>
|
||||
{% else %}
|
||||
<div class="p-2" style="background-color: rgb(15,15,15);border: 1px solid rgb(60,60,60);border-radius: 4px;">
|
||||
<p class="text-secondary m-0 mb-1" style="font-size: 13px;">Outrageous Builders Club 1 Month</p>
|
||||
<div class="form-floating">
|
||||
<input type="text" class="form-control" id="assigned-key" value="{{InvoiceObj.assigned_key}}" readonly>
|
||||
<label for="assigned-key">Assigned Key</label>
|
||||
</div>
|
||||
<p class="text-secondary m-0 mt-1" style="font-size: 13px;">Redeem this key at <a href="/giftcard-redeem" class="text-decoration-none">www.vortexi.cc/giftcard-redeem</a> or give it to a friend</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="linebreak"></div>
|
||||
<p class="text-secondary" style="font-size: 14px;">If you have any issues with paying, viewing or receving your item please open a billing ticket in our <a href="https://discord.gg/spUbRdSa5J" class="text-decoration-none">Discord Server</a></p>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user