# Prestashop Cette intégration explique comment ajouter un **bouton unique « Ajouter à Wallet »** vers le **Mon compte** zone dans **PrestaShop**. Cette intégration PrestaShop Apple Wallet / Google Wallet aide les clients à enregistrer une **Carte de fidélité ou d’adhésion** (et éventuellement une **carte cadeau Wallet**) directement dans leur portefeuille mobile, à l’aide d’un identifiant disponible dans la session client PrestaShop.
Add To Wallet integration with prestashop
La personnalisation de la boutique PrestaShop se fait généralement via **modules** et **surcharges de thème**. Ce guide se concentre sur une approche basée sur un module afin de conserver les secrets côté serveur et de maintenir l’intégration lors des mises à jour du thème.
Exemples concrets * Un programme de fidélité affiche « Ajouter au Wallet » sur le **Mon compte** tableau de bord pour les clients connectés. * Un programme de cartes cadeau affiche un bouton par **actif** carte cadeau dans la zone du compte. * Un parcours pick & collect affiche un CTA Carte de retrait sur une page de retrait authentifiée, en utilisant une référence de retrait comme identifiant.
{% hint style="info" %} Pour l’utilisation générique du SDK cinto (mode d’ID de carte, détection de plateforme, personnalisation du QR code sur desktop), voir [Sur votre site web](https://github.com/TheWalletCrew/docs/blob/main/enroll/on-your-website.md). {% endhint %} ## Fonctionnement Le SDK cinto de The Wallet Crew affiche le CTA correct selon l’appareil. Sur iOS, le bouton télécharge une carte Apple Wallet. Sur Android, il ouvre Google Wallet. Sur desktop, le SDK redirige vers une page de carte hébergée qui peut être scannée ou ouverte sur mobile. Dans cette configuration PrestaShop, la Carte est récupérée à l’aide d’un **type de carte** (exemple : `utilisateur`) et un **identifiant externe** dérivé de la session du client connecté. L’identifiant est signé avec un **HMAC** calculé côté serveur. Cela rend l’échange d’identifiants inviolable et évite d’exposer les secrets dans la vitrine. {% hint style="warning" %} Le HMAC doit être calculé côté serveur. Il ne doit pas être généré dans le navigateur. {% endhint %} ## Prérequis * Un modèle de carte et une émission de carte déjà configurés dans The Wallet Crew. * L’ID de tenant The Wallet Crew disponible (utilisé par l’URL du script du SDK). * Un identifiant stable disponible sur les pages authentifiées. * Un nom de clé d’identifiant externe convenu lors de l’intégration. L’identifiant stable est souvent l’ID client PrestaShop. Un projet peut aussi utiliser un ID CRM s’il est stocké sur l’entité client et reste stable dans le temps. ## Approche d’implémentation (module + hook ou surcharge de thème) Les modules PrestaShop peuvent injecter des blocs dans les pages à l’aide de hooks. Les thèmes peuvent aussi être surchargés lorsqu’un emplacement plus précis est requis. Le schéma d’intégration recommandé reste cohérent avec les autres plateformes de commerce électronique. 1. Lire un identifiant stable côté serveur. 2. Calculer un HMAC avec le secret du tenant. 3. Rendre un élément conteneur cinto avec le type de Carte, l’identifiant et le HMAC. 4. Charger le script SDK cinto une seule fois par page. ### Où placer le bouton Les emplacements courants sont : * La **Mon compte** tableau de bord, à côté du numéro de fidélité ou d’adhésion. * Une page **Wallet / Fidélité** dédiée dans la zone du compte. * Une page de liste de cartes cadeau, avec un bouton par carte cadeau. La disponibilité des hooks dépend du thème et de la version de PrestaShop. De nombreux projets utilisent un hook de module pour le tableau de bord du compte. Certains projets utilisent une surcharge de thème pour placer le bouton dans une section spécifique. ## Étapes de configuration {% stepper %} {% step %} #### Choisir le contrat d’identifiant externe The Wallet Crew récupère ou crée une Carte à partir de : * `passType` (exemple : `utilisateur`) * `externalIdentifier.key` (exemple : `prestashop.customer_id`) * `externalIdentifier.value` (exemple : l’ID du client connecté) * `externalIdentifier.hmac` (HMAC-SHA256 de la valeur) Les clés d’identifiant doivent rester stables dans le temps. Les clés en minuscules réduisent les problèmes de casse des attributs HTML et facilitent la maintenance à long terme. {% hint style="info" %} Si le tenant The Wallet Crew utilise déjà une clé avec des majuscules et minuscules, la modifier peut affecter les installations existantes. Traitez cela comme un sujet de migration. {% endhint %} {% endstep %} {% step %} #### Stocker la configuration du tenant et le secret côté serveur L’ID du tenant peut être utilisé côté client. Le secret HMAC doit rester côté serveur. Les approches courantes dans les déploiements PrestaShop sont : * Des variables d’environnement injectées par la plateforme d’hébergement. * Un stockage de configuration côté serveur géré par le module, avec un contrôle d’accès strict dans le back-office. Le secret ne doit pas être stocké dans les fichiers du thème ni rendu en HTML. Seul le HMAC calculé doit parvenir à la vitrine. {% endstep %} {% step %} #### Créer un petit module qui affiche le bouton Le module : * S’enregistre sur un hook lié au compte, ou fournit un petit contrôleur pour une page de compte dédiée. * Lit l’ID du client connecté depuis le contexte de session. * Calcule le HMAC à l’aide du secret côté serveur. * Affecte l’ID du tenant, le type de Carte, la valeur de l’identifiant et le HMAC aux variables du template. La mise en cache doit être gérée explicitement. Les pages de compte ne doivent pas être mises en cache entre les clients. {% endstep %} {% step %} #### Charger le SDK cinto une seule fois par page Le chargeur du SDK cinto doit être inclus une seule fois par page. Lorsqu’il existe plusieurs boutons sur la même page, le chargeur doit être placé dans un fragment partagé du pied de page ou de l’en-tête, et le balisage du bouton doit être répété pour chaque Carte. Si la vitrine utilise des en-têtes de sécurité qui restreignent les scripts tiers, il faut autoriser l’hôte du SDK. {% endstep %} {% endstepper %} ## Valider le résultat La validation couvre généralement le rendu de la plateforme et l’installation de la carte. 1. Sur iOS Safari, le CTA doit afficher **Ajouter à Apple Wallet**. 2. Sur Android Chrome, le CTA doit afficher **Ajouter à Google Wallet**. 3. Sur desktop, le CTA doit rediriger vers une page de carte hébergée. 4. Après installation, la carte doit être visible dans Apple Wallet ou Google Wallet. ## Dépannage ### Le bouton ne s’affiche pas Les causes les plus fréquentes sont un chargement du SDK bloqué (CSP ou restrictions de script) ou un balisage manquant. Le HTML final doit contenir : * un script chargeur du SDK cinto * un élément conteneur configuré comme un bouton « Ajouter au Wallet » ### Cliquer sur le bouton provoque une erreur Cela signifie généralement que l’identifiant externe ou le HMAC ne correspond pas à ce qu’attend The Wallet Crew. Vérifiez : * Le nom de la clé d’identifiant externe correspond à celui configuré pour le tenant. * La valeur de l’identifiant correspond exactement à ce qui est signé côté serveur. * Le HMAC est calculé avec le bon secret du tenant. ### Le bouton s’affiche pour le mauvais client Cela indique généralement une mise en cache entre les sessions. Vérifiez que : * les pages de compte ne sont pas mises en cache au niveau de la page * tout reverse proxy ou CDN respecte les cookies de session sur les routes authentifiées ## FAQ
Cela nécessite-t-il un module PrestaShop personnalisé ? Une surcharge de thème peut suffire lorsque les valeurs côté serveur sont déjà disponibles dans le contexte du template. Un module dédié est généralement préférable. Il évite de faire le calcul du HMAC dans les templates du thème et centralise le chargement du secret.
Quel identifiant fonctionne le mieux pour les Cartes de fidélité ? L’ID client PrestaShop est couramment utilisé parce qu’il est stable et disponible dans la session du client connecté. Un projet peut aussi utiliser un ID CRM s’il est conservé sur le client et reste stable dans le temps.
Où doit être stocké le secret HMAC ? Le secret doit rester côté serveur. Les variables d’environnement ou un stockage de configuration de module protégé sont des approches courantes. Il ne doit jamais être exposé dans les templates ni dans le code du navigateur.
La même approche peut-elle être utilisée pour les cartes cadeau ? Oui. Le même modèle fonctionne tant qu’un identifiant stable de carte cadeau existe et peut être signé côté serveur. De nombreux projets affichent un bouton par carte cadeau dans la zone du compte, avec un type de Carte dédié pour les cartes cadeau.
Le bouton peut-il être affiché en dehors de Mon compte ? Oui. Toute page authentifiée qui a accès à l’identifiant stable côté serveur peut afficher le bouton. Des exemples courants sont un tableau de bord de fidélité, une page de liste de cartes cadeau ou une page pick & collect lorsqu’une Carte de retrait est utilisée comme jeton de scan en magasin.
--- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.thewalletcrew.io/connectors/fr/e-commerce/prestashop.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.