mirror of
https://gitlab.com/animath/si/plateforme.git
synced 2025-06-21 14:38:24 +02:00
Setup payment interface
Signed-off-by: Emmy D'Anello <emmy.danello@animath.fr>
This commit is contained in:
Emmy D'Anello
@ -3,8 +3,140 @@
|
||||
{% load crispy_forms_filters i18n %}
|
||||
|
||||
{% block content %}
|
||||
<div class="alert alert-warning">
|
||||
Le formulaire de paiement est temporairement désactivé. Il sera accessible d'ici quelques jours.
|
||||
</div>
|
||||
{% if payment.valid is False %}
|
||||
<div class="alert alert-info">
|
||||
<p>
|
||||
{% blocktrans trimmed with amount=payment.amount %}
|
||||
You must pay {{ amount }} € for your registration.
|
||||
{% endblocktrans %}
|
||||
{% if payment.grouped %}
|
||||
{% blocktrans trimmed %}
|
||||
This price includes the registrations of all members of your team.
|
||||
{% endblocktrans %}
|
||||
{% else %}
|
||||
{% blocktrans trimmed %}
|
||||
This price includes only your own registration.
|
||||
You are exempt from payment if you have a scholarship,
|
||||
but you must then send us a proof of your scholarship.
|
||||
{% endblocktrans %}
|
||||
{% endif %}
|
||||
</p>
|
||||
|
||||
<p>
|
||||
{% if payment.grouped %}
|
||||
{% blocktrans trimmed %}
|
||||
You want finally that each member pays its own registration? Then click on the button:
|
||||
{% endblocktrans %}
|
||||
<div class="text-center">
|
||||
<button class="btn btn-warning">
|
||||
<i class="fas fa-user"></i> {% trans "Back to single payments" %}
|
||||
</button>
|
||||
</div>
|
||||
{% else %}
|
||||
{% blocktrans trimmed %}
|
||||
You want to pay for the registrations of all members of your team,
|
||||
or your school will pay for all registrations? Then click on the button:
|
||||
{% endblocktrans %}
|
||||
<div class="text-center">
|
||||
<button class="btn btn-warning">
|
||||
<i class="fas fa-users"></i> {% trans "Group the payments of my team" %}
|
||||
</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<nav>
|
||||
<div class="nav nav-tabs card-header-tabs" id="payment-method-tab" role="tablist">
|
||||
<button class="nav-link active" id="credit-card-tab" data-bs-toggle="tab"
|
||||
data-bs-target="#credit-card" type="button" role="tab"
|
||||
aria-controls="credit-card" aria-selected="true">
|
||||
<i class="fas fa-credit-card"></i> {% trans "Credit card" %}
|
||||
</button>
|
||||
<button class="nav-link" id="bank-transfer-tab" data-bs-toggle="tab"
|
||||
data-bs-target="#bank-transfer" type="button" role="tab"
|
||||
aria-controls="bank-transfer" aria-selected="true">
|
||||
<i class="fas fa-money-check"></i> {% trans "Bank transfer" %}
|
||||
</button>
|
||||
{% if not payment.grouped %}
|
||||
<button class="nav-link" id="scholarship-tab" data-bs-toggle="tab"
|
||||
data-bs-target="#scholarship" type="button" role="tab"
|
||||
aria-controls="scholarship" aria-selected="true">
|
||||
<i class="fas fa-file-invoice"></i> {% trans "I have a scholarship" %}
|
||||
</button>
|
||||
{% endif %}
|
||||
<button class="nav-link" id="other-tab" data-bs-toggle="tab"
|
||||
data-bs-target="#other" type="button" role="tab"
|
||||
aria-controls="other" aria-selected="true">
|
||||
<i class="fas fa-question"></i> {% trans "Other" %}
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div class="tab-content" id="payment-form">
|
||||
<div class="tab-pane fade show active" id="credit-card" role="tabpanel" aria-labelledby="credit-card-tab">
|
||||
Le paiement par carte bancaire s'effectue via Hello Asso. Pour cela, vous pouvez cliquer sur
|
||||
le bouton ci-dessous, qui vous redirigera vers la page de paiement sécurisée de Hello Asso.
|
||||
La validation du paiement sera ensuite faite automatiquement, sous quelques minutes.
|
||||
Si un tiers doit payer pour vous (parents, lycée,…), vous pouvez lui transmettre le lien pour
|
||||
payer pour vous.
|
||||
|
||||
<div class="text-center">
|
||||
<a href="#" class="btn btn-primary">
|
||||
<i class="fas fa-credit-card"></i> Aller sur la page Hello Asso
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane fade" id="bank-transfer" role="tabpanel" aria-labelledby="bank-transfer-tab">
|
||||
<form id="bank-transfer-form" method="post" enctype="multipart/form-data">
|
||||
{% csrf_token %}
|
||||
{{ bank_transfer_form|crispy }}
|
||||
<input type="submit" class="btn btn-primary" />
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane fade" id="scholarship" role="tabpanel" aria-labelledby="scholarship-tab">
|
||||
<form id="scholarship-form" method="post" enctype="multipart/form-data">
|
||||
{% csrf_token %}
|
||||
{{ scholarship_form|crispy }}
|
||||
<input type="submit" class="btn btn-primary" />
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane fade" id="other" role="tabpanel" aria-labelledby="other-tab">
|
||||
<form id="other-form" method="post" enctype="multipart/form-data">
|
||||
{% csrf_token %}
|
||||
{{ other_form|crispy }}
|
||||
<input type="submit" class="btn btn-primary" />
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endblock content %}
|
||||
|
||||
{% block extrajavascript %}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
if (document.location.hash) {
|
||||
// Open the tab of the tournament that is present in the hash
|
||||
document.querySelectorAll('button[data-bs-toggle="tab"]').forEach(elem => {
|
||||
if ('#' + elem.getAttribute('aria-controls') === document.location.hash.toLowerCase()) {
|
||||
elem.click()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// When a tab is opened, add the tournament name in the hash
|
||||
document.querySelectorAll('button[data-bs-toggle="tab"]').forEach(
|
||||
elem => elem.addEventListener(
|
||||
'click', () => document.location.hash = '#' + elem.getAttribute('aria-controls')))
|
||||
})
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user