Aller au contenu

E-commerce

Avec Astro, vous pouvez créer plusieurs options d’e-commerce, des liens de paiement aux pages de paiement hébergées, en passant par la création d’une boutique complète à l’aide d’une API de service de paiement.

Traitement des paiements

Titre de la section Traitement des paiements

Certains services de traitement des paiements (par exemple Lemon Squeezy, Paddle) ajoutent un formulaire de paiement pour permettre à vos clients d’acheter sur votre site. Ces formulaires peuvent être hébergés en superposition ou intégrés dans une page de votre site. Ils peuvent offrir une personnalisation de base ou une image de marque du site, et peuvent être ajoutés à votre projet Astro sous forme de scripts, de boutons ou de liens externes.

Lemon Squeezy

Titre de la section Lemon Squeezy

Lemon Squeezy est une plateforme tout-en-un pour les paiements et les abonnements avec un support à plusieurs devises, une conformité fiscale globale, l’intégration de PayPal et bien plus encore. Elle vous permet de créer et de gérer des produits et services numériques à partir du tableau de bord de votre compte et fournit des URL de produits pour le processus de paiement.

La bibliothèque JavaScript Lemon.js vous permet de vendre vos produits Lemon Squeezy à l’aide d’un lien de paiement.

Utilisation de base

Titre de la section Utilisation de base

Voici un exemple d’ajout d’un élément Lemon Squeezy “Acheter maintenant” à une page Astro. En cliquant sur ce lien, le visiteur ouvrira une fenêtre de paiement et pourra effectuer un seul achat.

  1. Ajoutez la balise <script> suivante à l’en-tête ou au corps de votre page :

    src/pages/my-product-page.astro
    <script src="https://app.lemonsqueezy.com/js/lemon.js" defer></script>

  2. Créez une balise d’ancrage sur la page qui renvoie à l’URL de votre produit. Incluez la classe lemonsqueezy-button pour ouvrir une fenêtre de paiement lorsqu’on clique dessus.

    src/pages/my-product-page.astro
    <a class="lemonsqueezy-button" href="https://demo.lemonsqueezy.com/checkout/...">
     Acheter maintenant
    </a>

Lemon.js

Titre de la section Lemon.js

Lemon.js propose également des fonctions supplémentaires telles que l’ouverture programmatique des overlays et la gestion des événements liés aux overlays.

Lisez le Guide de démarrage du développeur Lemon Squeezy pour plus d’informations.

Paddle

Titre de la section Paddle

Paddle est une solution de facturation pour les produits et services numériques. Elle gère les paiements, les taxes et la gestion des abonnements par le biais d’une interface de paiement superposée ou en ligne.

Paddle.js est une bibliothèque JavaScript légère qui vous permet de créer des expériences de facturation d’abonnement riches et intégrées à l’aide de Paddle.

Utilisation de base

Titre de la section Utilisation de base

Voici un exemple d’ajout d’un élément Paddle “Acheter maintenant” à une page Astro. En cliquant sur ce lien, le visiteur ouvrira une fenêtre de paiement et pourra effectuer un seul achat.

Une fois que votre domaine de lien de paiement par défaut (votre propre site web) est approuvé par Paddle, vous pouvez transformer n’importe quel élément de votre page en un déclencheur pour une superposition de paiement à l’aide d’attributs de données HTML.

  1. Ajoutez les deux balises <script> suivantes à l’en-tête ou au corps de votre page :

    src/pages/my-product-page.astro
    <script src="https://cdn.paddle.com/paddle/v2/paddle.js"></script>
    <script type="text/javascript">
     Paddle.Setup({
       token: '7d279f61a3499fed520f7cd8c08' // remplacer par un token côté client
     });
    </script>

  2. Transformez n’importe quel élément de votre page en bouton de paiement Paddle en ajoutant la classe paddle_button :

    src/pages/my-product-page.astro
    <a href="#" class="paddle_button">Acheter maintenant</a>

  3. Ajoutez un attribut data-items pour spécifier le Paddle priceId et quantity de votre produit. Vous pouvez également passer d’autres attributs de données HTML pris en charge pour pré-remplir les données, gérer le succès de la commande, ou donner un style à votre bouton et à la fenêtre de commande :

    src/pages/my-product-page.astro
    <a
      href="#"
      class="paddle_button"
      data-display-mode="overlay"
      data-theme="light"
      data-locale="fr"
      data-success-url="https://exemple.com/merci"
      data-items='[
       {
         "priceId": "pri_01gs59hve0hrz6nyybj56z04eq",
         "quantity": 1
       }
      ]'
    >
      Acheter maintenant
    </a>

Paddle.js

Titre de la section Paddle.js

Au lieu de transmettre des attributs de données HTML, vous pouvez envoyer des données à la fenêtre de paiement en utilisant JavaScript pour transmettre des attributs multiples et une personnalisation encore plus poussée. Vous pouvez également créer des flux de travail de mise à niveau à l’aide d’une commande en ligne.

En savoir plus sur l’utilisation de Paddle.js pour construire une caisse en ligne.

Solutions complètes d’e-commerce

Titre de la section Solutions complètes d’e-commerce

Pour personnaliser davantage le panier d’achat et le processus de paiement de votre site, vous pouvez connecter un fournisseur de services de transactions financières plus complet (par exemple Snipcart) à votre projet Astro. Ces plateformes d’e-commerce peuvent également s’intégrer à d’autres services tiers pour la gestion des comptes utilisateurs, la personnalisation, l’inventaire et l’analyse.

Snipcart

Titre de la section Snipcart

Snipcart est une plate-forme de panier d’achat HTML/JavaScript puissante et adaptée aux développeurs.

Snipcart vous permet également d’intégrer des services tiers tels que des fournisseurs d’expédition, d’activer des webhooks pour une intégration e-commerce avancée entre votre panier d’achat et d’autres systèmes, de choisir parmi plusieurs passerelles de paiement (par exemple Stripe, Paypal et Square), de personnaliser des modèles d’e-mail et fournit même des environnements de test en direct.

Utilisation de base

Titre de la section Utilisation de base

Voici un exemple de configuration d’une caisse Snipcart et d’ajout d’éléments de boutons “Ajouter au panier” et “Commander maintenant” à une page Astro. Cela permettra à vos visiteurs d’ajouter des produits à leur panier sans être immédiatement renvoyés vers une page de paiement.

Pour des instructions complètes, y compris la configuration de votre boutique Snipcart, veuillez consulter la documentation d’installation de Snipcart.

  1. Ajoutez le script comme indiqué dans les instructions d’installation de Snipcart sur votre page après l’élément <body>.

    src/pages/my-product-page.astro
    <body></body>
    <script>
     window.SnipcartSettings = {
       publicApiKey: "YOUR_API_KEY",
       loadStrategy: "on-user-interaction",
     };
    

     (function()...); // disponible dans la documentation de Snipcart
    </script>

  2. Personnalisez window.SnipcartSettings avec l’un des paramètres Snipcart disponibles pour contrôler le comportement et l’apparence de votre panier.

    src/pages/my-product-page.astro
    <script>
      window.SnipcartSettings = {
       publicApiKey: "YOUR_API_KEY",
       loadStrategy: "manual",
       version: "3.7.1",
       addProductBehavior: "none",
       modalStyle: "side",
      };
    

      (function()...); // disponible dans la documentation de Snipcart
    </script>

  3. Ajoutez class="snipcart-add-item" à tout élément HTML, tel qu’un <button>, pour ajouter un article au panier lorsqu’on clique dessus. Inclure également tout autre élément de données pour les attributs communs des produits Snipcart tels que le prix et la description, ainsi que tous les champs facultatifs.

    src/pages/my-product-page.astro
    <button
      class="snipcart-add-item"
      data-item-id="astro-print"
      data-item-price="39.99"
      data-item-description="Une impression encadrée du logo Astro."
      data-item-image="/assets/images/astro-print.jpg"
      data-item-name="Tirage Astro"
      data-item-custom1-name="Couleur du cadre"
      data-item-custom1-options="Marron|Argent[+10.00]|Or[+20.00]"
      data-item-custom2-name="Instructions de livraison"
      data-item-custom2-type="textarea"
    >
      Ajouter au panier
    </button>

  4. Ajoutez un bouton de paiement Snipcart avec la classe snipcart-checkout pour ouvrir le panier et permettre aux visiteurs de terminer leur achat avec un formulaire de paiement.

    src/pages/my-product-page.astro
    <button class="snipcart-checkout">Cliquez ici pour payer</button>

Snipcart JavaScript SDK

Titre de la section Snipcart JavaScript SDK

Le Snipcart JavaScript SDK vous permet de configurer, de personnaliser et de gérer votre panier Snipcart de manière programmatique.

Cela vous permet d’effectuer des actions telles que :

  • Récupérer des informations pertinentes sur la session Snipcart en cours et appliquer certaines opérations au panier.
  • Écouter les événements entrants et déclencher des rappels de manière dynamique.
  • Écouter les changements d’état et recevoir un instantané complet de l’état du panier.
Voir la documentation Snipcart pour plus d’informations sur toutes les options permettant d’intégrer Snipcart à votre projet Astro.

astro-snipcart

Titre de la section astro-snipcart

Il existe deux paquets communautaires astro-snipcart qui peuvent simplifier l’utilisation de Snipcart.

Ressources communautaires

Titre de la section Ressources communautaires