Shopify Checkout Extensibility est le cadre moderne qui remplace checkout.liquid pour les marchands Plus, permettant des personnalisations de paiement sécurisées et résistantes aux mises à jour. En utilisant des composants d’interface utilisateur et Shopify Functions, les développeurs peuvent modifier l’expérience de paiement sans compromettre la stabilité ou les performances du flux de paiement principal. Ce changement de plateforme garantit que la logique personnalisée reste compatible avec les futures mises à jours, créant un environnement stable pour les boutiques à fort volume qui nécessitent un comportement de paiement spécialisé.
Pourquoi Shopify abandonne-t-il checkout.liquid ?
Pendant des années, checkout.liquid a offert un moyen d’injecter du code personnalisé dans le processus de paiement. Cependant, cette flexibilité comportait des risques importants pour la stabilité et les performances de la boutique. Lorsque Shopify mettait à jour ses systèmes dorsaux, les boutiques dont les fichiers checkout.liquid étaient fortement modifiés rencontraient souvent des dysfonctionnements ou nécessitaient une maintenance manuelle du code pour restaurer les fonctionnalités principales. Le nouveau cadre Extensibility résout ce problème en fournissant un environnement contrôlé. Au lieu de modifier du code brut, les développeurs utilisent désormais des composants prédéfinis qui communiquent directement avec l’API Shopify. Cela garantit que la logique de paiement reste dissociée de l’interface de paiement, évitant ainsi les conflits lors des futures mises à jour de la plateforme.
Quels sont les composants principaux de ce cadre ?
L’architecture de Shopify Checkout Extensibility repose sur deux piliers principaux : UI Extensions et Shopify Functions. Les extensions d’interface utilisateur (UI Extensions) vous permettent d’ajouter des champs personnalisés, des bannières ou des points de collecte de données directement dans le flux de paiement. Celles-ci sont construites avec React et s’exécutent dans un environnement isolé, garantissant qu’une erreur de script dans un composant ne peut pas faire planter l’ensemble du processus de paiement. Les Shopify Functions, quant à elles, gèrent la logique métier. Elles vous permettent d’exécuter du code personnalisé côté serveur pour manipuler les remises, les tarifs d’expédition et les modes de paiement en fonction de conditions spécifiques telles que les balises clients ou le contenu du panier. Ensemble, ces outils offrent une méthode structurée pour gérer des exigences de paiement complexes.
Comment commencer à implémenter des extensions de paiement ?
Pour commencer, assurez-vous que votre boutique est sur le forfait Shopify Plus, car cette fonctionnalité est réservée aux marchands à fort volume. Vous devrez configurer un environnement de développement à l’aide de la CLI Shopify. La CLI est l’outil principal pour créer, tester et déployer vos extensions. Une fois votre environnement local configuré, vous pouvez choisir parmi différentes cibles d’extension, telles que la page de paiement, la page de remerciement ou la page de statut de commande. Un schéma courant dans un compte type consiste à utiliser ces cibles pour afficher des informations sur le programme de fidélité, proposer des options d’expédition dynamiques ou recueillir des préférences client supplémentaires avant la finalisation de la commande.
Comparaison entre l’ancien checkout.liquid et checkout extensibility
| Fonctionnalité | checkout.liquid | Checkout Extensibility |
|---|---|---|
| Accès au code | Accès complet à liquid | Composants basés sur des applications |
| Risque de mise à jour | Élevé (changements cassants) | Faible (géré par la plateforme) |
| Performance | Variable | Optimisé/Cohérent |
Comment Alien Road applique Shopify Checkout Extensibility
Chez Alien Road, notre approche commence par une phase de découverte où nous auditons vos exigences de paiement actuelles par rapport aux capacités du nouveau cadre. Nous identifions les scripts personnalisés qui peuvent être migrés vers des applications ou des fonctions et ceux qui doivent être reconstruits à partir de zéro en utilisant des composants d’interface utilisateur. Par exemple, si un client a besoin d’afficher des champs de message cadeau personnalisés, nous construisons une extension d’interface utilisateur dédiée qui capture ces données et les écrit dans les attributs de la commande. Nous utilisons ensuite Shopify Functions pour garantir que ces attributs passent correctement dans le pipeline de traitement. Tout au long de ce processus, nous maintenons une piste de documentation claire pour chaque extension déployée, garantissant que votre équipe comprend la logique derrière chaque modification que nous mettons en œuvre.
Quels sont les cas d’utilisation courants des fonctions de paiement ?
Les Shopify Functions sont particulièrement efficaces pour automatiser des règles métier complexes qu’il était auparavant impossible de gérer avec de simples codes de réduction. Vous pouvez les utiliser pour créer une logique d’expédition personnalisée, comme proposer une livraison express gratuite uniquement pour des codes postaux ou des catégories de produits spécifiques. Une autre application courante est la personnalisation avancée des paiements, où vous pouvez masquer ou afficher des passerelles de paiement en fonction du montant total de la commande ou du statut du compte de l’utilisateur. Ces fonctions s’exécutent en millisecondes, garantissant que le client ne subit aucun ralentissement pendant le processus de paiement tout en offrant une expérience sur mesure qui correspond à la logique de votre marque.
Comment gérer et déployer vos nouveaux composants de paiement ?
Le déploiement s’effectue via le tableau de bord des partenaires Shopify ou la CLI. Une fois vos extensions prêtes, vous pouvez les prévisualiser dans une boutique de développement pour vous assurer que l’interface utilisateur correspond aux directives de votre marque. Vous devez suivre ces étapes pour assurer une transition fluide de votre configuration de paiement actuelle vers le nouveau système :
- Auditer le code liquid existant pour identifier la fonctionnalité requise.
- Configurer la CLI Shopify et créer votre première extension d’interface utilisateur.
- Tester les composants individuels dans un environnement de boutique de développement.
- Utiliser Shopify Functions pour gérer les exigences de logique côté serveur.
- Déployer sur la boutique de production et surveiller les métriques de performance.
Liste de contrôle pour une migration réussie
Migrer des anciens fichiers liquid est un projet important qui nécessite de la planification. Avant de commencer, vérifiez que vos applications tierces sont compatibles avec la nouvelle architecture de paiement, car certaines applications anciennes peuvent dépendre de méthodes d’intégration plus anciennes. Assurez-vous que votre équipe de design a finalisé les exigences d’interface utilisateur, car les composants doivent respecter le système de design standard fourni par le cadre d’extension. Si vous manipulez des données sensibles, confirmez que vos fonctions utilisent les portées d’API appropriées pour maintenir les normes de sécurité. Un compte type passera plusieurs semaines en phase de test pour s’ensurer que tous les cas limites, tels que les calculs de taxes internationales ou le paiement multi-devises, sont correctement couverts.
- Vérifier le statut Shopify Plus et l’accès aux fonctionnalités.
- Documenter chaque script personnalisé actuellement présent dans checkout.liquid.
- Associer chaque script à une extension d’interface utilisateur (UI Extension) ou à une Shopify Function.
- Effectuer des tests de non-régression sur toutes les passerelles de paiement.
- Valider l’interface utilisateur de paiement sur les appareils mobiles et de bureau.
Foire aux questions
Shopify Checkout Extensibility est-il disponible pour tous les forfaits ?
Non, cette fonctionnalité est actuellement disponible spécifiquement pour les marchands du forfait Shopify Plus. Elle est conçue pour offrir le contrôle et la flexibilité requis par les entreprises à fort volume qui ont besoin de modifier leur expérience de paiement sans compromettre la stabilité de leur boutique. Les marchands sur des forfaits inférieurs doivent vérifier leur ensemble de fonctionnalités actuel dans le panneau d’administration Shopify pour voir les options de personnalisation disponibles.
Cela remplace-t-il tout le code liquid dans le paiement ?
Oui, Shopify Checkout Extensibility est destiné à remplacer checkout.liquid. La plateforme évolue vers un modèle où toutes les personnalisations de paiement sont gérées via des applications et des extensions. Ce changement est conçu pour garantir que votre paiement reste fonctionnel et sécurisé, même lorsque Shopify effectue des mises à jour en arrière-plan sur sa plateforme principale. Vous devez planifier votre migration vers ces nouveaux outils pour garantir la compatibilité à long terme.
Puis-je toujours utiliser mes applications de paiement existantes ?
La plupart des applications Shopify modernes sont déjà compatibles avec la nouvelle architecture de paiement. Cependant, si vous utilisez des applications plus anciennes qui reposaient sur l’injection de code liquid dans la page de paiement, vous devrez peut-être les mettre à jour ou trouver des alternatives. Vous devez consulter le développeur de l’application ou la documentation de l’App Store Shopify pour confirmer si une application spécifique prend en charge les nouveaux composants d’Extensibility.
Par où commencer cette semaine ?
Commencez cette semaine par auditer votre page de paiement actuelle. Identifiez chaque élément personnalisé qui nécessite actuellement une surcharge liquid. Une fois que vous avez cette liste, consultez la documentation officielle de Shopify pour UI Extensions et Shopify Functions afin de voir quels outils correspondent à vos besoins. Si vous trouvez le processus complexe, envisagez de faire appel à une agence partenaire pour guider l’implémentation, en veillant à ce que votre paiement reste performant et entièrement conforme aux exigences actuelles de la plateforme.
Continuer la lecture : E-commerce · E-commerce