Le logiciel Arpelin vous permet d’adapter votre borne à tous les cas d’utilisation y compris en tant que borne de don.

Une fois que vous avez créé votre site internet avec Arpelin, rendez-vous sur le back-office avec votre compte (bouton « Mon compte ») depuis votre site. Ensuite, suivez ces étapes :

1. Allez dans l’onglet « Panel Admin »
2. Onglet « Appareils » (ou « Kiosques »)
3. Désactivez les commandes à emporter et sur place
4. Désactivez les comptes fidélité si besoin
5. Désactivez les paramètres que vous n’allez pas utiliser (retraits programmés, etc.)
6. Pour plus de fluidité, vous pouvez activer l’option « Passer automatiquement au paiement (skip panier) »
7. Configurez le restant des paramètres

Allez ensuite dans l’onglet « Pages » puis « Modifier la page d’accueil de la boutique », et collez ce code dans l’emplacement prévu :

<div>
    <!-- Titre en haut -->
    <div style="text-align: center; margin-bottom: 2rem;">
        <h1 style="margin: 0 0 1rem 0; color: #1e40af; font-size: 2rem; font-weight: 700;">
            💝 Borne de Don
        </h1>
    </div>

    <!-- Message d'encouragement -->
    <div style="text-align: center; margin-bottom: 2rem;">
        <p style="margin: 0; color: #374151; font-size: 1.1rem; font-style: italic; line-height: 1.7;">
            "<strong>Chaque geste compte pour faire la différence.</strong>"
        </p>
        <p style="margin: 0.5rem 0 0 0; color: #6b7280; font-size: 0.95rem;">
            — Merci de votre générosité
        </p>
    </div>

    <!-- Grille des montants (5 prédéfinis + 1 personnalisé) -->
    <div style="margin-bottom: 2rem;">
        <h2 style="color: #1e40af; text-align: center; margin-bottom: 1.5rem; font-size: 1.4rem; font-weight: 700;">
            Sélection Rapide
        </h2>
        <div id="donation-grid" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 900px; margin: 0 auto;">
            <!-- Don 3€ -->
            <button class="don-btn" data-amount="3" style="background: linear-gradient(135deg, #059669 0%, #047857 100%); color: white; border: 3px solid rgba(30, 64, 175, 0.2); border-radius: 16px; padding: 2rem 1rem; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 6px 16px rgba(5, 150, 105, 0.3);">
                <div style="font-size: 2.8rem; font-weight: 700; margin-bottom: 0.5rem;">3€</div>
                <div style="font-size: 0.95rem; opacity: 0.95;">Don petit</div>
            </button>

            <!-- Don 5€ -->
            <button class="don-btn" data-amount="5" style="background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); color: white; border: 3px solid rgba(30, 64, 175, 0.2); border-radius: 16px; padding: 2rem 1rem; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3);">
                <div style="font-size: 2.8rem; font-weight: 700; margin-bottom: 0.5rem;">5€</div>
                <div style="font-size: 0.95rem; opacity: 0.95;">Don standard</div>
            </button>

            <!-- Don 10€ -->
            <button class="don-btn" data-amount="10" style="background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%); color: white; border: 3px solid rgba(30, 64, 175, 0.2); border-radius: 16px; padding: 2rem 1rem; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 6px 16px rgba(124, 58, 237, 0.3);">
                <div style="font-size: 2.8rem; font-weight: 700; margin-bottom: 0.5rem;">10€</div>
                <div style="font-size: 0.95rem; opacity: 0.95;">Don généreux</div>
            </button>

            <!-- Don 20€ -->
            <button class="don-btn" data-amount="20" style="background: linear-gradient(135deg, #d97706 0%, #b45309 100%); color: white; border: 3px solid rgba(30, 64, 175, 0.2); border-radius: 16px; padding: 2rem 1rem; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 6px 16px rgba(217, 119, 6, 0.3);">
                <div style="font-size: 2.8rem; font-weight: 700; margin-bottom: 0.5rem;">20€</div>
                <div style="font-size: 0.95rem; opacity: 0.95;">Don important</div>
            </button>

            <!-- Don 50€ -->
            <button class="don-btn" data-amount="50" style="background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%); color: white; border: 3px solid rgba(30, 64, 175, 0.2); border-radius: 16px; padding: 2rem 1rem; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 6px 16px rgba(220, 38, 38, 0.3);">
                <div style="font-size: 2.8rem; font-weight: 700; margin-bottom: 0.5rem;">50€</div>
                <div style="font-size: 0.95rem; opacity: 0.95;">Don exceptionnel</div>
            </button>

            <!-- Montant personnalisé -->
            <button id="customAmountBtn" style="background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%); color: white; border: 3px solid rgba(30, 64, 175, 0.2); border-radius: 16px; padding: 2rem 1rem; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 6px 16px rgba(107, 114, 128, 0.3);">
                <div style="font-size: 2.8rem; font-weight: 700; margin-bottom: 0.5rem;">✏️</div>
                <div style="font-size: 0.95rem; opacity: 0.95;">Montant libre</div>
            </button>
        </div>
    </div>

    <!-- Section clavier (cachée par défaut) -->
    <div id="customAmountSection" style="display: none; max-width: 600px; margin: 0 auto 2rem auto; background: #f9fafb; padding: 2rem; border-radius: 16px; border: 2px solid #e5e7eb; box-shadow: 0 4px 12px rgba(0,0,0,0.08);">
        <h2 style="color: #1e40af; text-align: center; margin: 0 0 1.5rem 0; font-size: 1.4rem; font-weight: 700;">
            Montant Personnalisé
        </h2>
        
        <!-- Affichage du montant -->
        <div style="background: white; padding: 1.5rem; border-radius: 12px; margin-bottom: 1rem; border: 2px solid #1e40af; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
            <div style="text-align: center; color: #1e40af; font-size: 3rem; font-weight: 700; font-family: monospace; transition: all 0.15s;" id="customAmount">0€</div>
            <div style="text-align: center; color: #6b7280; font-size: 0.9rem; margin-top: 0.5rem;">Entre 1€ et 80€</div>
        </div>

        <!-- Clavier numérique -->
        <div id="numpad" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-bottom: 1rem;">
            <button class="num-btn" data-value="1" style="background: linear-gradient(135deg, #4b5563 0%, #374151 100%); color: white; border: 2px solid #d1d5db; border-radius: 12px; padding: 1.5rem; font-size: 1.8rem; font-weight: 700; cursor: pointer; transition: all 0.2s; box-shadow: 0 2px 6px rgba(0,0,0,0.1);">1</button>
            <button class="num-btn" data-value="2" style="background: linear-gradient(135deg, #4b5563 0%, #374151 100%); color: white; border: 2px solid #d1d5db; border-radius: 12px; padding: 1.5rem; font-size: 1.8rem; font-weight: 700; cursor: pointer; transition: all 0.2s; box-shadow: 0 2px 6px rgba(0,0,0,0.1);">2</button>
            <button class="num-btn" data-value="3" style="background: linear-gradient(135deg, #4b5563 0%, #374151 100%); color: white; border: 2px solid #d1d5db; border-radius: 12px; padding: 1.5rem; font-size: 1.8rem; font-weight: 700; cursor: pointer; transition: all 0.2s; box-shadow: 0 2px 6px rgba(0,0,0,0.1);">3</button>
            <button class="num-btn" data-value="4" style="background: linear-gradient(135deg, #4b5563 0%, #374151 100%); color: white; border: 2px solid #d1d5db; border-radius: 12px; padding: 1.5rem; font-size: 1.8rem; font-weight: 700; cursor: pointer; transition: all 0.2s; box-shadow: 0 2px 6px rgba(0,0,0,0.1);">4</button>
            <button class="num-btn" data-value="5" style="background: linear-gradient(135deg, #4b5563 0%, #374151 100%); color: white; border: 2px solid #d1d5db; border-radius: 12px; padding: 1.5rem; font-size: 1.8rem; font-weight: 700; cursor: pointer; transition: all 0.2s; box-shadow: 0 2px 6px rgba(0,0,0,0.1);">5</button>
            <button class="num-btn" data-value="6" style="background: linear-gradient(135deg, #4b5563 0%, #374151 100%); color: white; border: 2px solid #d1d5db; border-radius: 12px; padding: 1.5rem; font-size: 1.8rem; font-weight: 700; cursor: pointer; transition: all 0.2s; box-shadow: 0 2px 6px rgba(0,0,0,0.1);">6</button>
            <button class="num-btn" data-value="7" style="background: linear-gradient(135deg, #4b5563 0%, #374151 100%); color: white; border: 2px solid #d1d5db; border-radius: 12px; padding: 1.5rem; font-size: 1.8rem; font-weight: 700; cursor: pointer; transition: all 0.2s; box-shadow: 0 2px 6px rgba(0,0,0,0.1);">7</button>
            <button class="num-btn" data-value="8" style="background: linear-gradient(135deg, #4b5563 0%, #374151 100%); color: white; border: 2px solid #d1d5db; border-radius: 12px; padding: 1.5rem; font-size: 1.8rem; font-weight: 700; cursor: pointer; transition: all 0.2s; box-shadow: 0 2px 6px rgba(0,0,0,0.1);">8</button>
            <button class="num-btn" data-value="9" style="background: linear-gradient(135deg, #4b5563 0%, #374151 100%); color: white; border: 2px solid #d1d5db; border-radius: 12px; padding: 1.5rem; font-size: 1.8rem; font-weight: 700; cursor: pointer; transition: all 0.2s; box-shadow: 0 2px 6px rgba(0,0,0,0.1);">9</button>
            <button id="clearBtn" style="background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%); color: white; border: 2px solid #991b1b; border-radius: 12px; padding: 1.5rem; font-size: 1.3rem; font-weight: 700; cursor: pointer; transition: all 0.2s; box-shadow: 0 2px 6px rgba(220,38,38,0.3);">✖</button>
            <button class="num-btn" data-value="0" style="background: linear-gradient(135deg, #4b5563 0%, #374151 100%); color: white; border: 2px solid #d1d5db; border-radius: 12px; padding: 1.5rem; font-size: 1.8rem; font-weight: 700; cursor: pointer; transition: all 0.2s; box-shadow: 0 2px 6px rgba(0,0,0,0.1);">0</button>
            <button id="backspaceBtn" style="background: linear-gradient(135deg, #d97706 0%, #b45309 100%); color: white; border: 2px solid #b45309; border-radius: 12px; padding: 1.5rem; font-size: 1.3rem; font-weight: 700; cursor: pointer; transition: all 0.2s; box-shadow: 0 2px 6px rgba(217,119,6,0.3);">←</button>
        </div>

        <!-- Boutons action -->
        <div style="display: flex; gap: 1rem;">
            <button id="cancelCustomBtn" style="flex: 1; background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%); color: white; border: 3px solid #4b5563; border-radius: 12px; padding: 1.5rem; font-size: 1.3rem; font-weight: 700; cursor: pointer; transition: all 0.3s; box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3);">
                ← Retour
            </button>
            <button id="validateCustomBtn" style="flex: 2; background: linear-gradient(135deg, #059669 0%, #047857 100%); color: white; border: 3px solid #047857; border-radius: 12px; padding: 1.5rem; font-size: 1.3rem; font-weight: 700; cursor: pointer; transition: all 0.3s; box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);">
                ✓ Valider le don
            </button>
        </div>
    </div>

    <!-- Message d'information -->
    <div style="max-width: 700px; margin: 0 auto; background: #fef3c7; padding: 1.25rem; border-radius: 12px; border-left: 4px solid #1e40af;">
        <p style="margin: 0; color: #78350f; font-size: 0.95rem; text-align: center; font-weight: 600;">
            <i class="bi bi-info-circle-fill"></i> 
            Sélectionnez un montant ou cliquez sur montant libre
        </p>
    </div>
</div>

<style>
/* ============================================
   STYLES POUR LES BOUTONS
   ============================================ */
.don-btn:hover, #customAmountBtn:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2) !important;
}

.don-btn:active, #customAmountBtn:active {
    transform: translateY(-2px);
}

.don-btn.loading {
    pointer-events: none;
    opacity: 0.8;
}

/* ============================================
   STYLES POUR LE CLAVIER NUMÉRIQUE
   ============================================ */
.num-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}

.num-btn:active {
    transform: scale(0.98);
}

#clearBtn:hover, #backspaceBtn:hover {
    transform: scale(1.05);
}

#clearBtn:active, #backspaceBtn:active {
    transform: scale(0.98);
}

/* ============================================
   STYLES POUR LES BOUTONS D'ACTION
   ============================================ */
#cancelCustomBtn:hover, #validateCustomBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
}

#cancelCustomBtn:active, #validateCustomBtn:active {
    transform: translateY(0);
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.loading {
    animation: pulse 1.5s ease-in-out infinite;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    #donation-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .don-btn, #customAmountBtn {
        padding: 1.5rem 0.75rem !important;
    }
    
    .don-btn div:first-child {
        font-size: 2.2rem !important;
    }
}
</style>

<script>
// ============================================
// CONFIGURATION
// ============================================
const DONATION_ARTICLE_ID = 1; // À remplacer par l'ID de votre article de don
let customAmountValue = 0;

// ============================================
// GESTION DE L'AFFICHAGE DU MONTANT PERSONNALISÉ
// ============================================
function updateCustomAmountDisplay() {
    const display = document.getElementById('customAmount');
    if (display) {
        display.textContent = customAmountValue + '€';
        
        if (customAmountValue > 0) {
            display.style.transform = 'scale(1.1)';
            setTimeout(() => {
                display.style.transform = 'scale(1)';
            }, 150);
        }
    }
}

function showCustomAmountSection() {
    const section = document.getElementById('customAmountSection');
    const grid = document.getElementById('donation-grid');
    
    if (section && grid) {
        customAmountValue = 0;
        updateCustomAmountDisplay();
        
        grid.style.display = 'none';
        section.style.display = 'block';
        
        section.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
}

function hideCustomAmountSection() {
    const section = document.getElementById('customAmountSection');
    const grid = document.getElementById('donation-grid');
    
    if (section && grid) {
        section.style.display = 'none';
        grid.style.display = 'grid';
        customAmountValue = 0;
        updateCustomAmountDisplay();
    }
}

// ============================================
// GESTION DU CLAVIER NUMÉRIQUE
// ============================================
function attachNumpadListeners() {
    const numButtons = document.querySelectorAll('.num-btn');
    numButtons.forEach(function(button) {
        if (button.dataset.listenerAttached) return;
        button.dataset.listenerAttached = 'true';
        
        button.addEventListener('click', function(event) {
            event.preventDefault();
            event.stopPropagation();
            
            const value = parseInt(this.dataset.value);
            const newValue = customAmountValue * 10 + value;
            
            if (newValue <= 80) {
                customAmountValue = newValue;
                updateCustomAmountDisplay();
            }
        });
    });
    
    const clearBtn = document.getElementById('clearBtn');
    if (clearBtn && !clearBtn.dataset.listenerAttached) {
        clearBtn.dataset.listenerAttached = 'true';
        clearBtn.addEventListener('click', function(event) {
            event.preventDefault();
            event.stopPropagation();
            customAmountValue = 0;
            updateCustomAmountDisplay();
        });
    }
    
    const backspaceBtn = document.getElementById('backspaceBtn');
    if (backspaceBtn && !backspaceBtn.dataset.listenerAttached) {
        backspaceBtn.dataset.listenerAttached = 'true';
        backspaceBtn.addEventListener('click', function(event) {
            event.preventDefault();
            event.stopPropagation();
            customAmountValue = Math.floor(customAmountValue / 10);
            updateCustomAmountDisplay();
        });
    }
    
    const validateBtn = document.getElementById('validateCustomBtn');
    if (validateBtn && !validateBtn.dataset.listenerAttached) {
        validateBtn.dataset.listenerAttached = 'true';
        validateBtn.addEventListener('click', function(event) {
            event.preventDefault();
            event.stopPropagation();
            
            if (customAmountValue < 1) {
                alert('Veuillez saisir au moins 1€');
                return;
            }
            
            if (customAmountValue > 80) {
                alert('Montant maximum 80€');
                return;
            }
            
            processDonation(customAmountValue, this);
        });
    }
    
    const cancelBtn = document.getElementById('cancelCustomBtn');
    if (cancelBtn && !cancelBtn.dataset.listenerAttached) {
        cancelBtn.dataset.listenerAttached = 'true';
        cancelBtn.addEventListener('click', function(event) {
            event.preventDefault();
            event.stopPropagation();
            hideCustomAmountSection();
        });
    }
    
    // Bouton montant personnalisé
    const customBtn = document.getElementById('customAmountBtn');
    if (customBtn && !customBtn.dataset.listenerAttached) {
        customBtn.dataset.listenerAttached = 'true';
        customBtn.addEventListener('click', function(event) {
            event.preventDefault();
            event.stopPropagation();
            showCustomAmountSection();
        });
    }
}

// ============================================
// GESTION DES BOUTONS DE DON PRÉDÉFINIS
// ============================================
function attachDonationButtons() {
    const buttons = document.querySelectorAll('.don-btn');
    
    if (buttons.length === 0) {
        setTimeout(attachDonationButtons, 100);
        return;
    }
    
    buttons.forEach(function(button) {
        if (button.dataset.listenerAttached) return;
        button.dataset.listenerAttached = 'true';
        
        button.addEventListener('click', function(event) {
            const amount = parseInt(this.dataset.amount);
            event.preventDefault();
            event.stopPropagation();
            processDonation(amount, this);
        });
    });
    
    attachNumpadListeners();
}

// ============================================
// TRAITEMENT DU DON
// ============================================
function processDonation(amount, buttonElement) {
    const originalHTML = buttonElement.innerHTML;
    
    buttonElement.classList.add('loading');
    buttonElement.innerHTML = '<div style="font-size: 2rem;"><i class="bi bi-hourglass-split"></i></div><div style="font-size: 0.9rem; margin-top: 0.5rem;">Ajout en cours...</div>';

    const formData = new FormData();
    formData.append('article_id', DONATION_ARTICLE_ID);
    formData.append('quantity', amount);

    fetch('/panier/ajout_panier', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            buttonElement.innerHTML = '<div style="font-size: 2rem;"><i class="bi bi-check-circle-fill"></i></div><div style="font-size: 0.9rem; margin-top: 0.5rem;">' + amount + '€ ajouté !</div>';
            setTimeout(() => {
                window.location.href = '/kiosque/cart';
            }, 800);
        } else {
            alert('Erreur : ' + (data.message || 'Erreur inconnue'));
            buttonElement.classList.remove('loading');
            buttonElement.innerHTML = originalHTML;
        }
    })
    .catch(error => {
        alert('Erreur de connexion. Veuillez réessayer.');
        buttonElement.classList.remove('loading');
        buttonElement.innerHTML = originalHTML;
    });
}

// ============================================
// INITIALISATION
// ============================================
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', attachDonationButtons);
} else {
    attachDonationButtons();
}
</script>

C’est ce code qui va transformer votre appareil en borne de don. Vous pouvez le personnaliser si vous savez ce que vous faites.

Enregistrez le tout.

Vous avez désormais configuré votre borne de don. Il vous reste à télécharger le logiciel Arpelin pour Windows sur la borne, si ce n’est pas déjà fait. Téléchargez le depuis ce site, cliquez-ici. Veillez à bien le glisser sur le bureau Windows de votre borne. Lancez le programme et laissez vous guider.

Et voilà ! J’espère que votre public sera généreux !