feat: page process E-Flex - choix methode de paiement (virement/CB/SEPA)
Remplace les boutons "Payer echeance X" par 3 cartes de choix : - Virement bancaire : coordonnees bancaires + reference a indiquer - Carte bancaire : bouton payer la prochaine echeance via Stripe Checkout - Prelevement automatique SEPA (recommande) : configurer l'IBAN une fois Si SEPA deja configure, affiche le statut actif avec IBAN masque. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Serreau Jovann
@@ -92,34 +92,78 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# Boutons paiement (si actif ou pending_setup) #}
|
||||
{# Choix methode de paiement (si actif ou pending_setup) #}
|
||||
{% if eflex.state in ['active', 'pending_setup'] %}
|
||||
<div class="flex justify-center gap-4 mb-6">
|
||||
{% if eflex.paymentMethod == 'sepa' and not eflex.stripePaymentMethodId %}
|
||||
<a href="{{ path('app_eflex_setup_payment', {id: eflex.id}) }}"
|
||||
class="px-6 py-3 bg-green-600 text-white font-bold uppercase text-xs tracking-wider hover:bg-green-700 transition-all">
|
||||
Configurer le prelevement SEPA
|
||||
</a>
|
||||
{% endif %}
|
||||
{% for line in eflex.lines %}
|
||||
{% if line.isPending or line.isFailed %}
|
||||
<a href="{{ path('app_eflex_pay', {id: eflex.id, lineId: line.id}) }}"
|
||||
class="px-4 py-2 bg-gray-900 text-white font-bold uppercase text-[10px] tracking-wider hover:bg-[#fabf04] hover:text-gray-900 transition-all">
|
||||
Payer echeance {{ line.position }} ({{ line.amount|number_format(2, ',', ' ') }} €)
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# SEPA configure #}
|
||||
{% if eflex.stripePaymentMethodId %}
|
||||
<div class="glass p-4 mb-6 flex items-center gap-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-green-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<p class="text-sm font-bold text-green-700">Prelevement SEPA configure - IBAN **** {{ eflex.stripeSepaLast4 ?: '****' }}</p>
|
||||
</div>
|
||||
{# SEPA deja configure #}
|
||||
{% if eflex.stripePaymentMethodId %}
|
||||
<div class="glass p-4 mb-6 flex items-center gap-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-green-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<div>
|
||||
<p class="text-sm font-bold text-green-700">Prelevement SEPA configure</p>
|
||||
<p class="text-xs text-gray-500">IBAN **** {{ eflex.stripeSepaLast4 ?: '****' }} - Les echeances seront prelevees automatiquement.</p>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
{# Choix de la methode #}
|
||||
<div class="glass p-5 mb-6">
|
||||
<h2 class="text-sm font-bold uppercase tracking-wider mb-4">Comment souhaitez-vous payer ?</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
|
||||
{# Virement bancaire #}
|
||||
<div class="glass p-4 text-center hover:bg-white/80 transition-all">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mx-auto mb-2 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
|
||||
</svg>
|
||||
<p class="text-xs font-bold uppercase tracking-wider mb-2">Virement bancaire</p>
|
||||
<p class="text-[10px] text-gray-500 mb-3">Payez a votre rythme par virement. Les coordonnees bancaires vous seront communiquees.</p>
|
||||
<div class="glass p-3 text-left text-[10px] text-gray-600 mb-3">
|
||||
<p><strong>Titulaire :</strong> Association E-Cosplay</p>
|
||||
<p><strong>IBAN :</strong> FR76 XXXX XXXX XXXX XXXX XXXX XXX</p>
|
||||
<p><strong>Reference :</strong> {{ eflex.reference }}</p>
|
||||
</div>
|
||||
<p class="text-[9px] text-gray-400">Indiquez la reference <strong>{{ eflex.reference }}</strong> dans le motif du virement.</p>
|
||||
</div>
|
||||
|
||||
{# Carte bancaire #}
|
||||
<div class="glass p-4 text-center hover:bg-white/80 transition-all">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mx-auto mb-2 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
|
||||
</svg>
|
||||
<p class="text-xs font-bold uppercase tracking-wider mb-2">Carte bancaire</p>
|
||||
<p class="text-[10px] text-gray-500 mb-3">Payez chaque echeance par carte bancaire via Stripe (paiement securise).</p>
|
||||
{% set nextLine = null %}
|
||||
{% for line in eflex.lines %}
|
||||
{% if (line.isPending or line.isFailed) and nextLine is null %}
|
||||
{% set nextLine = line %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if nextLine %}
|
||||
<a href="{{ path('app_eflex_pay', {id: eflex.id, lineId: nextLine.id}) }}"
|
||||
class="inline-block px-4 py-2 bg-purple-600 text-white font-bold uppercase text-[10px] tracking-wider hover:bg-purple-700 transition-all">
|
||||
Payer echeance {{ nextLine.position }} ({{ nextLine.amount|number_format(2, ',', ' ') }} €)
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{# Prelevement SEPA #}
|
||||
<div class="glass p-4 text-center hover:bg-white/80 transition-all" style="border: 2px solid #fabf04;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mx-auto mb-2" style="color: #fabf04;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||
</svg>
|
||||
<p class="text-xs font-bold uppercase tracking-wider mb-2">Prelevement automatique</p>
|
||||
<p class="text-[10px] text-gray-500 mb-3">Renseignez votre IBAN une seule fois. Les echeances sont prelevees automatiquement.</p>
|
||||
<span class="inline-block px-2 py-0.5 text-[9px] font-bold uppercase tracking-wider mb-3" style="background: #fabf04; color: #111;">Recommande</span>
|
||||
<br>
|
||||
<a href="{{ path('app_eflex_setup_payment', {id: eflex.id}) }}"
|
||||
class="inline-block px-4 py-2 text-white font-bold uppercase text-[10px] tracking-wider hover:opacity-90 transition-all" style="background: #fabf04; color: #111;">
|
||||
Configurer le prelevement SEPA
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% if eflex.nbPaid > 0 %}
|
||||
|
||||
Reference in New Issue
Block a user