Extensibilité de la caisse : modification de l'inmodifiable

Pendant une décennie, « checkout.liquid » a été le Saint Graal (et le cauchemar) de Shopify Plus. Il permettait un contrôle total, mais il se cassait facilement et n’était pas sécurisé pour la mise à niveau. Shopify l’a tué. L’avenir est l’extensibilité du paiement.

L’architecture : interface utilisateur en bac à sable

Vous ne pouvez plus écrire de JavaScript arbitraire (risque Magecart). Vous devez écrire des extensions d’interface utilisateur qui s’exécutent dans un bac à sable sécurisé. Ils sont rendus nativement par Shopify, ce qui signifie qu’ils sont rapides et optimisés pour les mobiles.

graph TD
    Dev[Développeur] -->|Écrit| Application[Application Shopify]
    Application -->|Déploiements| Extension [Extension de l'interface utilisateur de paiement]
    
    Shopify[Shopify Checkout] -->|Charges| Rallonge
    Extension -->|Rendu| Composants[Bannière / Vente incitative / Entrée]
    
    sous-graphe "Le bac à sable"
    Composants
    fin

Cas d’utilisation 1 : Le bloc “Upsell”

Nous souhaitons proposer une « Assurance d’expédition » pour 2,99 $ juste au-dessus du bouton « Payer maintenant ».

// extensions/assurance/src/Checkout.jsx
importer {
  réagirExtension,
  Case à cocher,
  utilisezApplyCartLinesChange,
} depuis '@shopify/ui-extensions-react/checkout' ;

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

fonction App() {
  const applyChange = useApplyCartLinesChange();
  
  retour (
    <Checkbox onChange={(coché) => {
      si (coché) {
        appliquerChange({
          tapez : 'addCartLine',
          identifiant de marchandise : 'gid://shopify/ProductVariant/12345',
          quantité: 1,
        });
      }
    }}>
      Ajouter une protection d'expédition (+2,99 $)
    </Box>
  );
}

C’est propre, natif et optimisé pour la conversion.

Cas d’utilisation 2 : Logique de validation (Fonctions)

Nous souhaitons bloquer les boîtes postales pour les expéditions Fedex Express. Nous utilisons Shopify Functions (Wasm) pour appliquer cette règle de validation côté serveur. Il est infiniment plus rapide et plus fiable que l’ancien éditeur de script.

Chronologie de la migration

Si vous êtes toujours sur « checkout.liquid », vous êtes sur une horloge qui compte. Shopify le déprécie. La migration vous donne accès à :

• Paiement en une seule page : conversion 10 % plus élevée.
• Intégration Shop Pay : transparente.
• Performances : temps de chargement 2 fois plus rapides.

---

---

Vous utilisez toujours l’ancien système de paiement ?

N’attendez pas l’avis d’arrêt. Engagez nos Architectes.