Extensibilité du paiement Shopify Plus : expériences de paiement personnalisées

Le paiement de Shopify convertit en moyenne 15 %, parmi les plus élevés du commerce électronique. Cette statistique explique pourquoi Shopify a historiquement restreint la personnalisation du paiement : leur paiement est bien optimisé et les modifications personnalisées ont tendance à réduire la conversion. Mais les commerçants ont des raisons légitimes de personnaliser : l'affichage des points de fidélité, les préférences de livraison, les messages cadeaux, les champs de bon de commande B2B et les exigences de conformité que le paiement standard ne peut pas satisfaire.

L'extensibilité du paiement est la réponse de Shopify Plus à cette tension. Il permet une personnalisation significative du paiement tout en gardant intacte l'architecture de paiement optimisée de Shopify et en maintenant les mises à jour automatiques à mesure que Shopify fait évoluer la plate-forme. L'approche obsolète checkout.liquid tombait en panne à chaque fois que Shopify mettait à jour le paiement. De par leur conception, les extensions sont sécurisées pour la mise à niveau.

Points clés à retenir

• Checkout Extensibility remplace checkout.liquid, obsolète — tous les marchands Plus doivent migrer d'ici 2025 (déjà passé)
• Les extensions d'interface utilisateur ajoutent des composants React à des emplacements de paiement spécifiques sans remplacer le modèle de paiement principal de Shopify.
• Les fonctions de paiement permettent une logique personnalisée côté serveur pour le filtrage des remises, des expéditions et des modes de paiement.
• Les extensions s'exécutent dans un environnement sandbox — elles ne peuvent pas accéder au DOM en dehors de leur cible de rendu
• L'API de branding permet une personnalisation visuelle complète des couleurs de caisse, de la typographie et du rayon des coins
• Les extensions post-achat ajoutent des offres de vente incitative en un clic après la confirmation de la commande (placement de conversion le plus élevé)
• La page de remerciement et la page d'état de la commande sont désormais entièrement personnalisables avec des extensions
• Performances : les extensions sont rendues côté serveur dans l'infrastructure de Shopify — aucune pénalité de performances côté client

---

L'architecture de l'extensibilité du paiement

Comprendre l'architecture technique vous aide à prendre de meilleures décisions sur ce qu'il faut construire et comment.

Points d'extension (emplacements)

L'interface utilisateur de paiement de Shopify comporte des points d'extension prédéfinis, des emplacements spécifiques où vous pouvez injecter des composants React personnalisés. Considérez-les comme des emplacements structurés dans un modèle de paiement qui accepte les composants approuvés :

Le bac à sable d'extension

Les extensions s'exécutent dans un environnement JavaScript isolé. Ils communiquent avec la caisse de Shopify via une API standardisée (le package @shopify/ui-extensions) plutôt que par manipulation directe du DOM. Cela signifie :

• Les extensions ne peuvent pas lire ou modifier d'autres parties de la page de paiement
• Les extensions ne peuvent pas accéder aux cookies du navigateur, à localStorage ou au JavaScript externe.
• Les demandes de réseau provenant d'extensions doivent passer par les points de terminaison approuvés de Shopify
• Les extensions peuvent lire les données de paiement (contenu du panier, informations client, sélection d'expédition) via l'API

Ce sandboxing est la raison pour laquelle les extensions sont sécurisées pour la mise à niveau : Shopify peut mettre à jour le modèle de paiement sans interrompre les intégrations d'extensions.

---

Configuration de votre environnement de développement d'extensions

Prérequis

• Boutique Shopify Plus avec accès à la boutique de développement
• Node.js 18+ et npm/pnpm
• Shopify CLI 3.x

Configuration initiale

npm install -g @shopify/cli @shopify/theme
shopify app create
# Select: Add extension → Checkout UI extension

Cela crée un échafaudage d'extension de paiement dans le répertoire de votre application Shopify.

Structure du fichier d'extension

extensions/
  my-checkout-extension/
    src/
      Checkout.tsx    # Main React component
    shopify.extension.toml   # Extension configuration
    package.json

L'extension minimale (TypeScript/React)

Une extension de paiement qui affiche un message personnalisé :

import {
  reactExtension,
  useSettings,
  Banner,
} from "@shopify/ui-extensions-react/checkout";

export default reactExtension(
  "purchase.checkout.block.render",
  () => <MyExtension />
);

function MyExtension() {
  const { message } = useSettings();
  return (
    <Banner status="info">
      {message || "Default message"}
    </Banner>
  );
}

Remarque : les exemples de code sont donnés à titre indicatif ; l'API actuelle des extensions d'interface utilisateur Shopify évolue – faites toujours référence à la documentation actuelle du développeur Shopify.

---

Cas d'utilisation d'extensions à grande valeur ajoutée

1. Affichage et échange de points de fidélité

Affichez le solde actuel des points de fidélité d'un client et permettez-lui d'appliquer des points sous forme de réduction :

The extension reads the customer's ID from checkout context, calls your loyalty platform's API (Smile.io, LoyaltyLion) via Shopify's fetch proxy, displays the balance, and on confirmation, applies a discount code via Shopify's discount API.

This replaces a common friction point: customers who want to redeem loyalty points but have to leave checkout to find their code, which often results in cart abandonment.

Impact de conversion attendu : augmentation de 3 à 8 % du taux de finalisation du paiement pour les membres du programme de fidélité qui voient les points disponibles.

2. Message cadeau et options d'emballage

Ajoutez un champ de message cadeau et une option d'emballage cadeau lors du paiement. L'extension :

• Affiche une bascule "Ceci est un cadeau"
• Lorsqu'il est activé, révèle un champ de texte pour le message cadeau - Affiche éventuellement une vente incitative d'emballage cadeau (prix fixe ajouté en tant qu'élément de campagne)
• Enregistre le message en tant qu'attribut de commande accessible dans votre flux de travail d'emballage

Impact attendu : 2 à 5 % des commandes utilisent des messages cadeaux ; la vente incitative crée des revenus supplémentaires.

3. Champ du numéro de bon de commande B2B

Les acheteurs B2B ont besoin d'un numéro de bon de commande pour leurs systèmes d'approvisionnement. Sans ce champ, les frictions de paiement B2B sont importantes :

L'extension ajoute un champ de saisie de texte « Numéro de bon de commande », le marque comme requis pour les clients B2B (détecté via les balises client) et enregistre le numéro de bon de commande en tant qu'attribut de commande. Le numéro de bon de commande apparaît sur les factures et dans l'administration des commandes.

Considération de mise en œuvre : Détectez les clients B2B en vérifiant les balises client à l'aide du hook useCustomer.

4. Préférence de date de livraison

Pour les commerçants proposant plusieurs options de vitesse de livraison, l'affichage des dates de livraison estimées à côté des options d'expédition réduit l'incertitude décisionnelle et augmente la sélection d'expédition premium :

L'extension s'accroche à purchase.checkout.shipping-option-item.render-after pour injecter un calcul de date de livraison sous chaque option d'expédition. Le calcul de la date utilise la date actuelle + les jours de transit d'expédition (récupérés depuis l'API de votre transporteur ou codés en dur par zone d'expédition).

Impact attendu : augmentation de 8 à 15 % de la sélection d'expéditions accélérées lorsque des dates de livraison précises sont affichées.

5. Vente incitative/vente croisée à la caisse

Un blocage de vente incitative de produit avant le bouton « Terminer la commande » – la dernière opportunité d'augmenter l'AOV avant l'achat :

L'extension lit le contenu du panier, appelle l'API de votre moteur de recommandation et affiche 1 à 2 produits complémentaires pertinents avec un ajout au panier en un clic. Les articles ajoutés via l'extension mettent à jour le total de la caisse Shopify en temps réel.

Impact attendu : 5 à 12 % des acheteurs ajoutent un article à partir du bloc de vente incitative de paiement.

---

Extensions post-achat : l'opportunité de retour sur investissement la plus élevée

Les extensions post-achat apparaissent sur la page de confirmation de commande immédiatement après qu'un client a finalisé son paiement. Le client est dans un état extrêmement positif : il vient d’acheter quelque chose qu’il voulait. Il s’agit de l’emplacement qui génère le taux de conversion le plus élevé pour les offres de vente incitative.

Vente incitative post-achat en un clic

L'extension post-achat peut proposer un module complémentaire de produit qui facture le mode de paiement déjà autorisé du client sans nouveau flux de paiement :

1. Le client complète la commande n° 1234
2. L'extension apparaît : "Terminez votre achat — ajoutez [Produit] pour 19 $ (un clic, pas de nouvelle saisie des informations de paiement)"
3. Le client accepte ou refuse
4. Si accepté : crée de nouveaux frais et un nouvel élément de ligne de commande.
5. Le client est redirigé vers la page de statut final de la commande

Impact attendu : taux d'acceptation de 8 à 20 % sur des offres post-achat bien configurées au bon prix (offre de 10 $ à 30 $ pour une commande principale de plus de 100 $).

Personnalisations de la page de remerciement

Au-delà des ventes incitatives, l’extension de page de remerciement peut :

• Afficher les points de fidélité gagnés grâce à cette commande
• Afficher le CTA du programme de parrainage avec un lien de partage pré-rempli
• Proposer une mise à niveau d'abonnement pour les acheteurs ponctuels de produits consommables
• Demander un suivi sur les réseaux sociaux avec incitation
• Afficher les instructions d'entretien du produit pour les nouveaux acheteurs de catégorie

---

Fonctions de paiement : extensions logiques côté serveur

Les fonctions de paiement sont plus puissantes que les extensions d'interface utilisateur : elles modifient la logique de calcul de base du paiement elle-même. Ils s'exécutent côté serveur en tant que WebAssembly compilé, ce qui signifie qu'ils sont rapides et ne peuvent pas être contournés par une manipulation côté client.

Fonctions de réduction

Implémentez une logique de remise complexe que le moteur de remise natif de Shopify ne prend pas en charge :

Fonctions d'expédition

Modifiez la façon dont Shopify calcule et présente les options d'expédition :

• Masquer certaines méthodes d'expédition en fonction du contenu du panier (pas d'expédition standard pour les articles surdimensionnés)
• Injectez des tarifs d'expédition personnalisés de votre prestataire logistique
• Appliquer des frais d'expédition pour les adresses de livraison distantes
• Offrir la livraison gratuite une fois que le panier atteint un seuil (calculé en temps réel)

Fonctions de personnalisation des paiements

Contrôlez les modes de paiement qui apparaissent :

• Masquer le « Paiement à la livraison » pour les commandes internationales
• Afficher uniquement le virement bancaire pour les commandes supérieures à 10 000 $
• Masquer PayPal pour des catégories de produits spécifiques (raisons de conformité)
• Afficher des descriptions ou des icônes de méthodes de paiement personnalisées

---

API de branding : personnalisation du paiement visuel

L'API Checkout Branding permet une personnalisation visuelle complète sans toucher à la logique de paiement :

Ce que vous pouvez personnaliser

Configurez via l'administrateur Shopify → Paramètres → Paiement et comptes clients → Personnaliser le paiement ou via l'API de marque directement pour une configuration programmatique sur plusieurs magasins.

---

Migration depuis checkout.liquid

Si votre boutique Shopify Plus utilisait checkout.liquid (obsolète depuis août 2024, migration forcée terminée), vous devez reconstruire les personnalisations en tant qu'extensions. Personnalisations courantes de checkout.liquid et leurs équivalents d'extension :

Limites par rapport à checkout.liquid

Les extensions ne peuvent pas reproduire une injection JavaScript arbitraire ou une manipulation complète d'un modèle. Si votre checkout.liquid contenait une logique conditionnelle complexe ou des dispositions d'interface utilisateur profondément personnalisées, certaines fonctionnalités peuvent nécessiter une reconstruction avec les fonctions de paiement ou peuvent ne pas être du tout réplicables dans le cadre des extensions.

---

Questions fréquemment posées

Les fonctionnalités d'extensibilité de Checkout fonctionnent-elles sur mobile et sur ordinateur ?

Oui. Les extensions d'interface utilisateur s'affichent à l'aide des composants d'interface utilisateur de Shopify, qui sont intrinsèquement réactifs. La caisse de Shopify gère la réactivité de la mise en page : votre extension s'affiche dans son emplacement désigné, qui s'adapte automatiquement à la taille de l'écran. Vous n’avez pas besoin d’écrire des mises en page distinctes pour mobile et ordinateur de bureau.

Les extensions peuvent-elles ralentir l'expérience de paiement ?

Les extensions d'interface utilisateur sont rendues sur le serveur dans l'infrastructure de Shopify : elles ne nécessitent pas d'exécution JavaScript côté client pour le rendu initial. Cependant, les extensions qui effectuent des appels API (pour récupérer les soldes de fidélité, les données de recommandation, etc.) ajoutent de la latence réseau. Maintenez la durée des appels API sous 200 ms en mettant en cache les réponses et en optimisant vos points de terminaison. Les extensions qui ralentissent systématiquement le paiement sont détectées par Shopify et peuvent être désactivées.

Comment tester les extensions Checkout avant de les mettre en ligne ?

Utilisez la boutique de développement de Shopify pour tester les extensions sans affecter votre paiement en production. La CLI Shopify fournit un serveur de développement local qui prévisualise votre extension dans le véritable environnement de paiement Shopify. Les extensions peuvent également être déployées sur votre magasin de production dans un état « masqué », visible uniquement via une URL d'aperçu — utile pour l'examen par les parties prenantes avant le lancement public.

Quelles compétences techniques sont requises pour créer des extensions de paiement ?

Les extensions d'interface utilisateur nécessitent des connaissances en React et TypeScript. Les fonctions de paiement nécessitent Rust ou JavaScript (compilé sur WebAssembly via une chaîne d'outils fournie par Shopify). La plupart des développeurs ayant une expérience avec React peuvent créer des extensions d'interface utilisateur après avoir consulté la documentation de Shopify. Les fonctions de paiement sont plus exigeantes sur le plan technique : un développeur senior ayant une expérience du backend est approprié pour les fonctions non triviales.

Les extensions de paiement sont-elles disponibles sur les forfaits Shopify autres que Plus ?

Les extensions post-achat et les extensions de page de remerciement sont disponibles sur tous les forfaits Shopify. Les extensions de l'interface utilisateur de paiement (personnalisation en cours de paiement) sont uniquement Plus. Les fonctions de paiement sont uniquement Plus. L'API de branding pour la personnalisation visuelle du paiement est uniquement Plus (bien que la personnalisation de base du paiement avec l'éditeur de thème soit disponible sur tous les plans).

---

Prochaines étapes

L'extensibilité du paiement est la fonctionnalité la plus complexe techniquement de l'ensemble de fonctionnalités de Shopify Plus. Le retour sur investissement est clair : l'échange de fidélité, les domaines B2B, les ventes incitatives après achat et la transparence des dates de livraison ont tous un impact documenté sur la conversion. La mise en œuvre nécessite des compétences en développement React et une familiarité avec les API d'extension de Shopify.

L'équipe Shopify Plus d'ECOSIRE crée et gère des extensions de paiement pour les commerçants allant des marques DTC aux distributeurs B2B. Nos développeurs sont des partenaires certifiés Shopify Plus avec une expérience spécifique dans l'extensibilité du paiement, les fonctions de paiement et l'API de marque.

Contactez-nous pour discuter de vos besoins en matière de personnalisation du paiement — nous évaluerons vos besoins et concevrons une architecture d'extension qui augmente les conversions sans compromettre les performances du paiement.