Extensibilité de Shopify Checkout : Guide complet pour 2026

Shopify traite plus de 235 milliards de dollars de GMV annuel via sa caisse. Avec la dépréciation de checkout.liquid et le déploiement complet de Checkout Extensibility, chaque commerçant Shopify doit comprendre comment fonctionne le nouveau système, ce qu'il permet et comment migrer sans perdre de conversions.

Ce guide couvre tous les composants majeurs de l'extensibilité de Shopify Checkout : les extensions d'interface utilisateur, les fonctions Shopify, l'API de marque, les blocs de paiement, la personnalisation du paiement et de l'expédition, ainsi que les stratégies qui transforment le paiement en un avantage concurrentiel.

Points clés à retenir

• Checkout Extensibility remplace checkout.liquid par une architecture sécurisée et sécurisée basée sur les extensions d'interface utilisateur et les fonctions Shopify.
• Les extensions de l'interface utilisateur de paiement s'exécutent dans un environnement sandbox à l'aide de composants basés sur React rendus via des cibles de paiement
• Les fonctions Shopify vous permettent de personnaliser la logique de remise, le filtrage des modes de paiement et la manipulation des tarifs d'expédition côté serveur sans appels d'API externes.
• L'API Checkout Branding offre un contrôle granulaire sur les couleurs, la typographie, l'espacement et la mise en page sans toucher au code d'extension.
• La migration depuis checkout.liquid est obligatoire pour les marchands Shopify Plus et doit être planifiée systématiquement pour éviter les baisses de conversion
• Les flux de paiement personnalisés peuvent augmenter les taux de conversion de 8 à 15 % lorsqu'ils sont mis en œuvre avec des tests UX appropriés

Qu'est-ce que l'extensibilité du paiement ?

Checkout Extensibility est le framework Shopify permettant de personnaliser l'expérience de paiement. Il remplace l'ancienne approche checkout.liquid par un système conçu autour de trois piliers :

1. Extensions de l'interface utilisateur de paiement --- Composants basés sur React qui s'affichent à des emplacements spécifiques dans le flux de paiement
2. Fonctions Shopify --- Logique côté serveur qui s'exécute dans l'infrastructure Shopify pour personnaliser les règles métier
3. Checkout Branding API --- Une API GraphQL pour contrôler l'apparence visuelle de la caisse

Contrairement à checkout.liquid, qui donnait aux commerçants un contrôle total sur HTML/CSS/JS mais créait des risques de mise à niveau et de sécurité, Checkout Extensibility offre une personnalisation dans un environnement contrôlé que Shopify peut continuer à optimiser.

Extensions de l'interface utilisateur de paiement

Comment ils fonctionnent

Les extensions de l'interface utilisateur de paiement sont créées à l'aide du cadre d'extension de l'interface utilisateur Shopify. Ils s'affichent à l'intérieur de cibles d'extension prédéfinies (également appelées points d'extension) au sein du flux de paiement. Chaque cible correspond à un emplacement précis : avant le sélecteur de mode d'expédition, après le récapitulatif de la commande, à l'intérieur de la section paiement, etc.

Les extensions utilisent un ensemble limité de composants d'interface utilisateur fournis par Shopify :

| Composant | Objectif | Cas d'utilisation courants | |-----------|---------|-----------------| | Bannière | Afficher des alertes ou des promotions | Seuils de livraison gratuite, offres à durée limitée | | BlockStack/InlineStack | Conteneurs de mise en page | Organisation des champs et du contenu personnalisés | | Champ de texte | Collection de saisie de texte | Messages cadeaux, instructions personnalisées | | Case à cocher | Sélections booléennes | Inscription à la newsletter, acceptation des conditions | | Sélectionnez | Sélections déroulantes | Préférences de date de livraison | | Titre/Texte | Typographie | En-têtes de section, texte d'aide | | Images | Contenu visuel | Badges de confiance, éléments de marque | | Diviseur | Séparation visuelle | Sauts de section |

Cibles d'extension dans le flux de paiement

Le flux de paiement propose des dizaines de cibles d'extension regroupées par section :

Avant et après le paiement complet --- buy.checkout.header.render-after et buy.checkout.footer.render-after vous permettent d'ajouter du contenu tout au long du paiement.

Section Adresse de livraison --- Afficher le contenu avant ou après le formulaire d'adresse de livraison avec les cibles buy.checkout.shipping-address.render-before et render-after.

Section Méthode d'expédition --- Ajoutez des bannières, des informations ou une interface utilisateur personnalisée avant ou après la liste des options d'expédition.

Section Mode de paiement --- Insérez des badges de confiance, des informations de paiement ou des champs personnalisés autour du sélecteur de mode de paiement.

Résumé de la commande --- Ajoutez des ventes incitatives, des ventes croisées ou du contenu informatif aux côtés des éléments de campagne du panier et du total de la commande.

Création d'une extension d'interface utilisateur de paiement

Un projet d'extension d'interface utilisateur de paiement typique est échafaudé à l'aide de la CLI Shopify avec le type d'extension checkout_ui. Le point d'entrée d'extension utilise la fonction réagirExtension pour enregistrer un composant à un emplacement cible spécifique dans le flux de paiement.

Par exemple, une extension de bannière de livraison gratuite utiliserait le hook useCartLines pour calculer le sous-total du panier, le comparerait à votre seuil de livraison gratuite et afficherait un composant de bannière affichant soit un message de réussite, soit la quantité supplémentaire que le client doit ajouter. Cette seule extension augmente généralement la valeur moyenne des commandes de 5 à 12 %.

Crochets d'API d'extension

Shopify fournit un riche ensemble de hooks pour accéder à l'état de paiement :

• useCartLines() --- Accédez à tous les articles du panier avec les prix, les quantités et les métadonnées du produit
• useBuyerJourney() --- Intercepter et valider la progression du paiement, bloquer les soumissions invalides
• useShippingAddress() --- Lire l'adresse de livraison pour la logique conditionnelle
• useApplyDiscountCodeChange() --- Appliquer par programme des codes de réduction en fonction des conditions
• useApplyMetafieldChange() --- Stocke des données personnalisées sur la commande pour les workflows d'exécution
• useExtensionApi() --- Accédez à l'API complète de l'extension, y compris la localisation et les jetons de session

Exemples d'extensions pratiques

Collection de messages cadeaux : placez un composant TextField dans la cible shipping-address.render-after. Utilisez useApplyMetafieldChange pour stocker le message en tant que métachamp de commande. L'équipe d'exécution lit le champ méta pendant l'emballage.

Sélecteur de date de livraison : utilisez un composant Sélectionner avec des dates disponibles calculées à partir des données SLA de votre transporteur. Stockez la date sélectionnée sous forme de champ méta et utilisez-la pour la planification des exécutions.

Affichage des points de fidélité : affichez aux clients fidèles leurs points de fidélité disponibles et laissez-les appliquer des points sous forme de réduction à l'aide de useApplyDiscountCodeChange.

Fonctions Shopify

Ce que les fonctions Shopify remplacent

Avant Shopify Functions, la logique métier personnalisée nécessitait des appels d'API externes qui ajoutaient de la latence et des points d'échec au paiement. Les fonctions s'exécutent directement dans l'infrastructure Shopify, en moins de 5 millisecondes sans surcharge réseau.

###Types de fonctions

| Type de fonction | Ce qu'il personnalise | Exemple | |---------------|---------|---------| | Remise sur les produits | Remises automatiques sur les produits | Achetez-en 2, obtenez-en 1 gratuit avec une logique de niveau complexe | | Remise sur commande | Remises sur toute la commande | Dépensez au-delà du seuil, économisez 15 % avec exclusions | | Remise sur l'expédition | Réductions sur les tarifs d'expédition | Livraison gratuite pour les membres fidélité | | Personnalisation du paiement | Visibilité et commande des moyens de paiement | Masquer le COD pour les commandes de grande valeur | | Personnalisation de la livraison | Noms des méthodes d'expédition et tri | Renommer les transporteurs, réorganiser par priorité | | Transformation du panier | Modifier le contenu du panier | Regrouper automatiquement les produits, étendre les kits | | Contraintes d'exécution | Restreindre les options d'exécution | Exiger une signature pour les articles de grande valeur |

Comment fonctionnent les fonctions

Les fonctions sont écrites en Rust (compilées sur WebAssembly) ou en JavaScript. Chaque fonction reçoit un objet d'entrée contenant les données de paiement pertinentes et renvoie un tableau d'opérations décrivant les modifications à appliquer.

Pour la personnalisation du paiement, la fonction reçoit tous les modes de paiement disponibles et les données du panier, puis renvoie les opérations de masquage ou de réorganisation pour des méthodes spécifiques en fonction de vos règles métier. Pour la personnalisation de la livraison, les fonctions peuvent renommer les options d'expédition, les réorganiser par priorité ou les masquer en fonction du contenu du panier ou de l'adresse de livraison.

Limitations des fonctions

• Temps d'exécution : 5 ms maximum
• Mémoire : 10 Mo maximum
• Taille d'entrée : Limitée par la requête d'entrée de fonction
• Aucun appel réseau : les fonctions ne peuvent pas effectuer de requêtes HTTP
• Aucun état persistant : chaque appel est sans état

Ces contraintes sont intentionnelles. Ils garantissent que les performances de paiement restent cohérentes même avec des dizaines de fonctions actives.

API de marque de paiement

L'API Checkout Branding permet une personnalisation visuelle sans créer d'extensions. Il contrôle :

Couleurs --- Couleurs primaires et secondaires de la marque, couleurs d'arrière-plan, couleurs du texte et des liens, ainsi que couleurs d'état pour les erreurs, la réussite et les avertissements.

Typographie --- Famille de polices de la bibliothèque de polices Shopify ou polices personnalisées, tailles de police pour les titres, le corps et les étiquettes, ainsi que les épaisseurs de police et les hauteurs de ligne.

Mise en page et espacement --- Rayon des coins pour les boutons, les entrées et les conteneurs, espacement entre les sections et styles de bordure.

Logo et favicon --- Logo d'en-tête de paiement avec contrôles de position et de dimensionnement.

L'API Branding est accessible via la mutation checkoutBrandingUpsert GraphQL. Vous transmettez un objet d'entrée de profil et de marque spécifiant votre système de conception : jeux de couleurs, paramètres de typographie et valeurs de rayon de coin. Cela sépare la marque visuelle de la personnalisation fonctionnelle afin que vous puissiez mettre à jour l'apparence de votre caisse sans modifier le code d'extension.

Migration depuis checkout.liquid

Pourquoi la migration est obligatoire

Shopify a fixé des délais d’abandon fermes pour checkout.liquid. Tous les marchands Shopify Plus doivent migrer vers Checkout Extensibility.

1. Sécurité : checkout.liquid permet l'exécution arbitraire de JavaScript lors du paiement, créant des risques XSS et d'exfiltration de données
2. Performances : les personnalisations checkout.liquid non optimisées ralentissent le chargement des pages
3. Chemin de mise à niveau : Shopify ne peut pas déployer d'améliorations de paiement lorsque les commerçants remplacent l'intégralité du modèle de paiement

Liste de contrôle pour la migration

| checkout.liquid Fonctionnalité | Commander l'équivalent d'extensibilité | |------------------------|----------------------------------| | Style CSS personnalisé | API de marque de paiement | | Images de badges de confiance | Extension de l'interface utilisateur de paiement avec le composant Image | | Champ de message cadeau | Extension de l'interface utilisateur de paiement avec TextField | | Logique de remise personnalisée | Fonction Shopify (type de remise) | | Masquage du mode de paiement | Fonction Shopify (personnalisation du paiement) | | Renommer le mode d'expédition | Fonction Shopify (personnalisation de la livraison) | | Champ de note de commande | Extension de l'interface utilisateur de paiement avec TextField + métafield | | Scripts d'analyse | Pixels Web (événements clients) | | Validation personnalisée | hook useBuyerJourney avec logique de validation |

Processus de migration étape par étape

1. Auditez votre checkout.liquid actuel --- Documentez chaque personnalisation, script et changement visuel
2. Catégorisez chaque personnalisation --- Mapper vers les extensions d'interface utilisateur, les fonctions, l'API de marque ou les pixels Web
3. Construire et tester en développement --- Utilisez la CLI Shopify pour tester les extensions localement par rapport à une boutique de développement
4. Déployer de manière incrémentielle --- Activez d'abord l'extensibilité de paiement sur un magasin de test, puis déployez-le en production.
5. Surveiller les taux de conversion --- Comparez les taux de finalisation du paiement avant et après la migration pendant au moins deux semaines
6. Itérer --- Utilisez les tests A/B pour optimiser le placement des extensions et la messagerie

Personnalisation du paiement et de l'expédition

Stratégies de personnalisation des paiements

• Modes de paiement basés sur la région : affichez les modes de paiement locaux (iDEAL aux Pays-Bas, PIX au Brésil) en fonction de l'adresse de livraison.
• Seuils de valeur de commande : masquer l'achat immédiat, payer plus tard pour les commandes de faible ou de très grande valeur
• ** Filtrage des balises client ** : affiche les conditions de paiement en gros uniquement pour les clients B2B tagués.
• Restrictions basées sur les produits : désactivez certains modes de paiement pour les produits ou abonnements numériques.

Stratégies de personnalisation des expéditions

• Renommage du transporteur : remplacez les noms techniques des transporteurs par des noms de marque tels que "Livraison rapide (3 à 5 jours ouvrables)".
• Tri des tarifs : placez les méthodes d'expédition préférées en haut de la liste
• Disponibilité conditionnelle : masquer l'expédition express pour les articles surdimensionnés ou les adresses rurales
• Estimation de la date de livraison : utilisez les fonctions de personnalisation de la livraison pour afficher les dates de livraison estimées à côté de chaque option d'expédition

Conseils d'optimisation des conversions

Réduisez les frictions lors du paiement

• Utilisez la saisie semi-automatique de l'adresse (intégrée à la caisse Shopify) et assurez-vous qu'elle fonctionne pour tous les marchés cibles
• Activez Shop Pay pour les clients fidèles --- cela réduit le temps de paiement jusqu'à 4x
• Réduire au minimum le nombre de champs personnalisés ; chaque champ supplémentaire réduit les taux d'achèvement de 3 à 5 %

Établissez la confiance lors du paiement

• Placez des badges de sécurité et des signaux de confiance dans la zone de pied de page de la caisse
• Afficher des résumés clairs de la politique de retour près de la section de paiement
• Afficher le nombre d'avis clients ou les notes de satisfaction

Tirer parti des extensions post-achat

• Utilisez la cible de rendu de la page de remerciement pour les offres de vente incitative
• Afficher les invites d'inscription à l'abonnement sur la page de confirmation de commande
• Recueillez les commentaires NPS immédiatement après l'achat

Questions fréquemment posées

L'extensibilité du paiement est-elle disponible sur tous les forfaits Shopify ?

Les extensions de l'interface utilisateur de paiement et les fonctions Shopify sont disponibles sur tous les forfaits Shopify. Cependant, certaines fonctionnalités avancées telles que la personnalisation complète de la marque du paiement sont limitées à Shopify Plus. La marque de base (couleurs et polices) est disponible sur tous les plans via l'éditeur de thème.

Mes personnalisations checkout.liquid cesseront-elles de fonctionner ?

Oui. Shopify a fixé des délais de dépréciation pour checkout.liquid. Les marchands Shopify Plus qui n'ont pas migré seront automatiquement transférés vers l'expérience de paiement par défaut. Planifiez votre migration dès maintenant pour garder le contrôle de votre paiement.

Puis-je utiliser du JavaScript tiers dans l'extensibilité de Checkout ?

Non. Les extensions de l'interface utilisateur de Checkout s'exécutent dans un environnement sandbox et ne peuvent pas charger de scripts externes. Il s'agit d'une mesure de sécurité. Si vous avez besoin d'une intégration de services externes, utilisez Shopify Functions pour la logique côté serveur ou Web Pixels pour le suivi analytique.

Comment les fonctions Shopify affectent-elles la vitesse de paiement ?

Les fonctions Shopify s'exécutent en moins de 5 millisecondes au sein de l'infrastructure Shopify. Ils sont nettement plus rapides que les appels d’API externes qu’ils remplacent. La plupart des commerçants constatent des améliorations des performances de paiement après la migration des scripts vers Functions.

Puis-je revenir à checkout.liquid après la migration ?

Pendant la période de migration, vous pouvez basculer entre checkout.liquid et Checkout Extensibility dans les paramètres de votre boutique. Cependant, une fois que Shopify aura complètement abandonné checkout.liquid pour votre magasin, la restauration ne sera plus possible.

Transformez votre paiement Shopify

L'extensibilité du paiement représente l'avenir du commerce Shopify. Que vous ayez besoin de migrer depuis checkout.liquid, de créer des flux de paiement personnalisés ou d'optimiser vos taux de conversion, le nouveau cadre fournit les outils nécessaires pour créer une expérience de paiement qui correspond aux exigences de votre marque et de votre entreprise.

ECOSIRE est spécialisé dans la configuration de boutique Shopify, le développement de thèmes personnalisés et l'optimisation des conversions. Pour une personnalisation avancée du paiement sur Shopify Plus, explorez nos services Shopify Plus.

Prêt à améliorer votre expérience de paiement ? Contactez nos spécialistes Shopify pour discuter de votre projet d'extensibilité de paiement.