feat: page configuration paiement contrat (CB + SEPA) + email automatique
Apres signature du contrat, le webhook envoie un email avec lien
vers /process/contrat/{id}/setup-payment
Page setup-payment :
- Resume montant mensuel HT
- Choix CB (Stripe Checkout avec setup_future_usage) ou SEPA
- Formulaire IBAN Stripe Elements avec mandat SEPA
- Confirmation SEPA via endpoint POST /confirm
- Page succes apres paiement
Routes :
- /process/contrat/{id}/setup-payment : page choix CB/SEPA
- /process/contrat/{id}/setup-payment/confirm : confirmation SEPA
- /process/contrat/{id}/payment-success : page succes
Email contrat_setup_payment : lien vers la page de configuration,
detail montant, mention 1er paiement CB/SEPA obligatoire
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Serreau Jovann
36
templates/contrat/payment_success.html.twig
Normal file
36
templates/contrat/payment_success.html.twig
Normal file
@@ -0,0 +1,36 @@
|
||||
{% extends 'base.html.twig' %}
|
||||
|
||||
{% block title %}Paiement configure - {{ contrat.reference }} - Association E-Cosplay{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div class="min-h-screen flex items-center justify-center p-4" style="background: linear-gradient(135deg, #f5f5f0 0%, #e8e8e0 100%);">
|
||||
<div class="glass-heavy w-full max-w-lg overflow-hidden">
|
||||
<div class="glass-dark text-white px-8 py-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<div>
|
||||
<h1 class="text-lg font-bold uppercase tracking-widest">Paiement configure</h1>
|
||||
<p class="text-xs text-white/60">{{ contrat.reference }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-8 text-center">
|
||||
<p class="text-sm text-gray-600 mb-4">
|
||||
Votre mode de paiement a ete configure avec succes. Vos services seront actifs prochainement.
|
||||
</p>
|
||||
<div class="glass p-4 mb-4 text-left">
|
||||
<p class="text-xs text-gray-500"><strong>Contrat :</strong> {{ contrat.reference }}</p>
|
||||
<p class="text-xs text-gray-500"><strong>Montant :</strong> {{ contrat.totalHt|number_format(2, ',', ' ') }} € HT / mois</p>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400">
|
||||
Vous recevrez un email de confirmation a chaque prelevement. Votre espace client est accessible sur <a href="https://client.e-cosplay.fr" class="font-bold" style="color: #fabf04;">client.e-cosplay.fr</a>
|
||||
</p>
|
||||
<p class="text-xs text-gray-400 mt-4">
|
||||
Pour toute question : <a href="mailto:client@e-cosplay.fr" class="font-bold" style="color: #fabf04;">client@e-cosplay.fr</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
140
templates/contrat/setup_payment.html.twig
Normal file
140
templates/contrat/setup_payment.html.twig
Normal file
@@ -0,0 +1,140 @@
|
||||
{% extends 'base.html.twig' %}
|
||||
|
||||
{% block title %}Configuration paiement - {{ contrat.reference }} - Association E-Cosplay{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div class="min-h-screen flex items-center justify-center p-4" style="background: linear-gradient(135deg, #f5f5f0 0%, #e8e8e0 100%);">
|
||||
<div class="glass-heavy w-full max-w-2xl overflow-hidden">
|
||||
<div class="glass-dark text-white px-8 py-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="/logo.jpg" alt="E-Cosplay" class="h-10 w-auto">
|
||||
<div>
|
||||
<h1 class="text-lg font-bold uppercase tracking-widest">Configuration du paiement</h1>
|
||||
<p class="text-xs text-white/60">{{ contrat.reference }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-8">
|
||||
<p class="text-sm text-gray-600 mb-6">Choisissez votre mode de paiement pour activer vos services.</p>
|
||||
|
||||
{# Resume #}
|
||||
<div class="glass p-4 mb-6 text-center">
|
||||
<p class="text-[9px] font-bold uppercase tracking-wider text-gray-400">Montant mensuel</p>
|
||||
<p class="text-3xl font-bold mt-1" style="color: #fabf04;">{{ totalHt|number_format(2, ',', ' ') }} € <span class="text-sm text-gray-500">HT / mois</span></p>
|
||||
</div>
|
||||
|
||||
{# Choix methode #}
|
||||
<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-2 gap-4 mb-6">
|
||||
{# Carte bancaire #}
|
||||
<div class="glass p-5 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 votre premier mois immediatement par carte bancaire via Stripe.</p>
|
||||
{% if cbCheckoutUrl %}
|
||||
<a href="{{ cbCheckoutUrl }}"
|
||||
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 {{ totalHt|number_format(2, ',', ' ') }} € par CB
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{# SEPA #}
|
||||
<div class="glass p-5 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 SEPA</p>
|
||||
<span class="inline-block px-2 py-0.5 text-[9px] font-bold uppercase tracking-wider mb-2" style="background: #fabf04; color: #111;">Recommande</span>
|
||||
<p class="text-[10px] text-gray-500 mb-3">Renseignez votre IBAN une seule fois. Les prelevements seront automatiques chaque mois.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Formulaire SEPA #}
|
||||
<div class="glass p-5 mb-6">
|
||||
<h3 class="text-sm font-bold uppercase tracking-wider mb-3">Configurer le prelevement SEPA</h3>
|
||||
<form id="sepa-form">
|
||||
<div class="mb-3">
|
||||
<label for="account-name" class="block text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-1">Titulaire du compte</label>
|
||||
<input type="text" id="account-name" required value="{{ contrat.raisonSociale }}" class="input-glass w-full px-4 py-3 text-sm font-bold">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="account-email" class="block text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-1">Email</label>
|
||||
<input type="email" id="account-email" required value="{{ contrat.email }}" class="input-glass w-full px-4 py-3 text-sm font-bold">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="block text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-1">IBAN</label>
|
||||
<div id="iban-element" class="input-glass w-full px-4 py-3"></div>
|
||||
<div id="iban-errors" class="text-red-500 text-xs mt-1 hidden"></div>
|
||||
</div>
|
||||
|
||||
<div class="glass p-3 mb-4 text-xs text-gray-500 leading-relaxed">
|
||||
<p class="font-bold text-[9px] uppercase tracking-wider text-gray-400 mb-1">Mandat SEPA</p>
|
||||
<p>En fournissant vos informations de paiement, vous autorisez Association E-Cosplay et Stripe a debiter votre compte conformement aux instructions.</p>
|
||||
</div>
|
||||
|
||||
<div id="form-error" class="mb-3 p-3 bg-red-500/20 text-red-700 font-bold text-xs hidden"></div>
|
||||
|
||||
<button type="submit" id="submit-btn" class="w-full btn-gold px-4 py-3 font-bold uppercase text-xs tracking-wider text-gray-900 disabled:opacity-50">
|
||||
<span id="btn-text">Autoriser le prelevement SEPA</span>
|
||||
<span id="btn-loading" class="hidden">Traitement en cours...</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<p class="text-center text-xs text-gray-400">Pour toute question : <a href="mailto:client@e-cosplay.fr" class="font-bold" style="color: #fabf04;">client@e-cosplay.fr</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://js.stripe.com/v3/" nonce="{{ csp_nonce('script') }}"></script>
|
||||
<script nonce="{{ csp_nonce('script') }}">
|
||||
(function() {
|
||||
var stripe = Stripe('{{ stripePk }}');
|
||||
var elements = stripe.elements();
|
||||
var style = { base: { color: '#111827', fontSize: '14px', fontFamily: 'Arial, sans-serif', '::placeholder': { color: '#9ca3af' } }, invalid: { color: '#dc2626' } };
|
||||
var iban = elements.create('iban', { style: style, supportedCountries: ['SEPA'] });
|
||||
iban.mount('#iban-element');
|
||||
|
||||
var errorEl = document.getElementById('iban-errors');
|
||||
iban.on('change', function(event) {
|
||||
if (event.error) { errorEl.textContent = event.error.message; errorEl.classList.remove('hidden'); }
|
||||
else { errorEl.classList.add('hidden'); }
|
||||
});
|
||||
|
||||
var form = document.getElementById('sepa-form');
|
||||
var submitBtn = document.getElementById('submit-btn');
|
||||
var btnText = document.getElementById('btn-text');
|
||||
var btnLoading = document.getElementById('btn-loading');
|
||||
var formError = document.getElementById('form-error');
|
||||
|
||||
form.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
submitBtn.disabled = true;
|
||||
btnText.classList.add('hidden');
|
||||
btnLoading.classList.remove('hidden');
|
||||
formError.classList.add('hidden');
|
||||
|
||||
stripe.confirmSepaDebitSetup('{{ clientSecret }}', {
|
||||
payment_method: { sepa_debit: iban, billing_details: { name: document.getElementById('account-name').value, email: document.getElementById('account-email').value } }
|
||||
}).then(function(result) {
|
||||
if (result.error) {
|
||||
formError.textContent = result.error.message; formError.classList.remove('hidden');
|
||||
submitBtn.disabled = false; btnText.classList.remove('hidden'); btnLoading.classList.add('hidden');
|
||||
return;
|
||||
}
|
||||
fetch('{{ path('app_contrat_setup_payment_confirm', {id: contrat.id}) }}', {
|
||||
method: 'POST', headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ payment_method: result.setupIntent.payment_method })
|
||||
}).then(function(res) { return res.json(); }).then(function(data) {
|
||||
if (data.status === 'ok') { window.location.href = '{{ path('app_contrat_payment_success', {id: contrat.id}) }}'; }
|
||||
else { formError.textContent = data.error || 'Erreur.'; formError.classList.remove('hidden'); submitBtn.disabled = false; btnText.classList.remove('hidden'); btnLoading.classList.add('hidden'); }
|
||||
}).catch(function() { formError.textContent = 'Erreur de connexion.'; formError.classList.remove('hidden'); submitBtn.disabled = false; btnText.classList.remove('hidden'); btnLoading.classList.add('hidden'); });
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
{% endblock %}
|
||||
54
templates/emails/contrat_setup_payment.html.twig
Normal file
54
templates/emails/contrat_setup_payment.html.twig
Normal file
@@ -0,0 +1,54 @@
|
||||
{% extends 'email/base.html.twig' %}
|
||||
|
||||
{% block content %}
|
||||
<table width="600" cellpadding="0" cellspacing="0" style="margin: 0 auto;">
|
||||
<tr>
|
||||
<td style="padding: 32px;">
|
||||
<h1 style="font-family: Arial, Helvetica, sans-serif; font-size: 22px; font-weight: 700; color: #111827; margin: 0 0 16px;">Chez {{ contrat.raisonSociale }},</h1>
|
||||
|
||||
<p style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #374151; line-height: 22px; margin: 0 0 16px;">
|
||||
Votre contrat <strong>{{ contrat.reference }}</strong> a ete signe avec succes. Pour activer vos services, veuillez configurer votre mode de paiement et effectuer le premier reglement.
|
||||
</p>
|
||||
|
||||
<table width="100%" cellpadding="0" cellspacing="0" style="margin: 20px 0; border: 1px solid #e5e7eb;">
|
||||
<tr>
|
||||
<td style="padding: 10px 16px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #9ca3af; background: #f9fafb; width: 35%;">Reference</td>
|
||||
<td style="padding: 10px 16px; font-family: monospace; font-size: 13px; font-weight: 700;">{{ contrat.reference }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding: 10px 16px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #9ca3af; background: #f9fafb;">Total HT / mois</td>
|
||||
<td style="padding: 10px 16px; font-family: monospace; font-size: 16px; font-weight: 700; color: #fabf04;">{{ contrat.totalHt|number_format(2, ',', ' ') }} €</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #374151; line-height: 22px; margin: 0 0 16px;">
|
||||
Vous avez le choix entre :
|
||||
</p>
|
||||
|
||||
<ul style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #374151; line-height: 22px; margin: 0 0 16px; padding-left: 20px;">
|
||||
<li style="margin-bottom: 8px;"><strong>Payer par carte bancaire</strong> : reglez votre premier mois immediatement.</li>
|
||||
<li style="margin-bottom: 8px;"><strong>Configurer le prelevement SEPA</strong> : renseignez votre IBAN une seule fois, les prelevements seront automatiques chaque mois.</li>
|
||||
</ul>
|
||||
|
||||
{% if paymentUrl is defined and paymentUrl %}
|
||||
<table cellpadding="0" cellspacing="0" style="margin: 24px auto;">
|
||||
<tr>
|
||||
<td style="background-color: #fabf04; padding: 14px 32px;">
|
||||
<a href="{{ paymentUrl }}" style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #111827; text-decoration: none;">Configurer mon paiement</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
{% endif %}
|
||||
|
||||
<div style="background: #fef2f2; border-left: 4px solid #dc2626; padding: 12px 16px; margin: 20px 0;">
|
||||
<p style="font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: 700; color: #991b1b; margin: 0 0 4px;">Important</p>
|
||||
<p style="font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #374151; margin: 0;">Le premier paiement doit etre effectue par carte bancaire ou prelevement SEPA. Les virements ne sont pas acceptes pour le premier paiement.</p>
|
||||
</div>
|
||||
|
||||
<p style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #9ca3af; margin: 16px 0 0;">
|
||||
Pour toute question : <a href="mailto:client@e-cosplay.fr" style="color: #fabf04;">client@e-cosplay.fr</a>
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user