Guide 2026 : Connecter le Panier Blogger à une Passerelle de Paiement (Serverless)

 

Bonjour à tous, c'est Lucas Martin sur Cash Astuce. Dans notre précédent tutoriel, nous avons mis en place la première pierre de notre boutique : un magnifique Panier d'Achat basé sur LocalStorage. Il est temps aujourd'hui de transformer ces paniers virtuels en revenus réels !

Le défi technique de Blogger, c'est l'absence de backend (PHP). Nous n'allons donc pas transmettre de prix sensibles vers la passerelle de paiement, mais uniquement les Identifiants des produits via l'URL. La plateforme de paiement externe (comme Stripe ou PayPal) se chargera de valider les montants. Sécurité maximale, et toujours zéro serveur.

Tutoriel : Coder la fonction de Checkout (Vanilla JS)

Étape 1 : Mettre à jour le script du Panier

Ajoutez ce bloc de code JavaScript à la fin de votre script de panier (celui du premier article, juste avant updateCartUI();) pour gérer la redirection vers la caisse :

  // Logique de Checkout - Cash Astuce
  document.getElementById('ca-checkout-btn').addEventListener('click', function() {
    if (cart.length === 0) {
      alert("Votre panier est vide.");
      return;
    }
    this.innerText = 'Redirection...';
    this.disabled = true;

    const productIds = cart.map(item => item.id);
    const itemsParam = encodeURIComponent(productIds.join(','));
    
    // Remplacez par l'URL de votre propre page "Caisse" sur Blogger
    const checkoutPageUrl = 'https://www.cashastuce.site/p/caisse.html';
    window.location.href = `${checkoutPageUrl}?items=${itemsParam}`;
  });

Étape 2 : Créer la Page "Caisse" (Checkout Page) sur Blogger

Allez dans l'onglet Pages de votre tableau de bord Blogger, créez une nouvelle page nommée "Caisse", passez en Vue HTML et collez le code suivant :

<h2 style="text-align:center;">Finalisez votre commande</h2>
<div id="checkout-status" style="text-align:center; margin: 20px 0;">Analyse de votre panier...</div>

<div id="payment-links" style="display:none; text-align:center;">
  <p>Cliquez sur le lien ci-dessous pour payer en toute sécurité :</p>
  <a id="pay-ebook-01" href="[ضع_رابط_الدفع_الخاص_بك_هنا]" target="_blank" style="display:none; padding:12px 25px; background:#000; color:#fff; text-decoration:none; border-radius:5px; font-weight:bold; margin:5px;">Payer le Guide SEO (15 €)</a>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const urlParams = new URLSearchParams(window.location.search);
  const items = urlParams.get('items');
  const statusDiv = document.getElementById('checkout-status');
  const paymentDiv = document.getElementById('payment-links');

  if (!items) {
    statusDiv.innerHTML = '<span style="color:red;">Aucun produit détecté dans votre panier.</span>';
    return;
  }

  statusDiv.innerHTML = 'Panier validé avec succès ! Choisissez votre mode de paiement :';
  paymentDiv.style.display = 'block';

  const itemArray = items.split(',');
  if (itemArray.includes('ebook-01')) {
    document.getElementById('pay-ebook-01').style.display = 'inline-block';
  }
});
</script>

🔗 Navigation et Architecture du Triptyque E-commerce

Votre tunnel de vente est désormais capable de encaisser des paiements sans base de données. Si vous avez raté le début de cette série ou souhaitez revoir l'installation de la base, consultez le premier guide :

• 🛍️ Étape 1 : Comment créer le Panier d'Achat (Shopping Cart) sur Blogger