Installez Affirm sur SFCC

Offrez à vos clients des options de paiement flexibles en activant Affirm pour votre magasin Salesforce Commerce Cloud (SFCC).

Conditions préalables


Étape 1 : Importez la cartouche Affirm

📘

Note : Ces étapes fonctionnent avec n'importe quel IDE, bien que nous utilisions Cursor pour ce guide.

  1. Installez Prophet Debugger dans Cursor :

    1. Ouvrir curseur.
    2. Cliquez sur l'icône Extensions dans la barre latérale gauche.
    3. Localisez le débogueur Prophet et cliquez sur Installer.
  2. Ouvrez le dossier de cartouche dans Cursor :

    1. Dans GitHub, téléchargez la cartouche Affirm.

    2. Décompressez le fichier.

    3. Dans Cursor, cliquez Fichier > Ouvrir un dossier.

    4. Sélectionnez le répertoire des cartouches et cliquez sur Ouvrir.

      capture d'écran du répertoire des cartouches
  3. Créez dw.json (configuration de connexion à l'environnement de test) :

    1. Dans la racine du dossier que vous avez ouvert, créez un fichier intitulé dw.json et incluez ce qui suit :
      {
          "hostname": "your-sandbox-hostname.demandware.net",
          "username": "your-bm-username",
          "password": "your-bm-password",
          "code-version": "YOUR_CODE_BASE_NAME"
      }
      • Nom d'hôte : URL de votre environnement de test SFCC (sans https://).
      • Nom d'utilisateur : Votre identifiant pour Business Manager.
      • Mot de passe : Votre mot de passe pour Business Manager.
      • Version du code : Nom de la version du code que vous avez créée ou activée dans Business Manager.
    2. Ensuite, enregistrez le fichier pour activer automatiquement le Prophet Debugger.

    🚧

    Ajoutez dw.json à votre .gitignore parce qu'il contient des informations d'identification.

  4. Charger/synchroniser la cartouche :

    1. Dans Cursor, cliquez sur View et Command Palette.

    2. Saisissez « Prophet » et sélectionnez Prophet : Activer le téléchargement. Prophet télécharge les fichiers de votre cartouche dans l'environnement de test.

      capture d’écran des options de Prophet avec l’option « Prophet : Activer le téléversement » mise en évidence
    3. (Facultatif) Vous pouvez suivre la progression dans le panneau de sortie en sélectionnant Affichage > Sortie > Débogueur Prophet.

    📘

    Pour effectuer un téléchargement complet de la cartouche dans le projet de votre IDE à tout moment, vous pouvez sélectionner Prophet : Clean Project/Upload All dans la palette de commandes.

  5. Vérifiez que la cartouche est sur le serveur :

    1. Connectez-vous à Business Manager.
    2. Accédez à Administration > Développement du site > Déploiement du code.
    3. Trouvez votre version de code et confirmez que les fichiers de cartouche y figurent.
capture d'écran de la version du code listée et des fichiers de cartouche

Étape 2 : Importer les fichiers XML

Importez ensuite les fichiers XML du répertoire Metadata de la cartouche téléchargée :

  1. Dans le Business Manager, accédez à Administration > Développement du site > Importation et exportation du site.
  2. Dans la section Importer , cliquez sur Choisir un fichier et sélectionnez affirm.zip du dossier de métadonnées.
  1. Cliquez sur Télécharger.
  2. Une fois le téléchargement terminé, sélectionnez instance/affirm.zip dans la liste des archives.
  3. Cliquez sur Importer.
capture d’écran montrant « instance/affirm.zip » Sélectionné
📘

Note

Configurez l'ID de votre bibliothèque dans le fichier library.xml dans le dossier de métadonnées. Actuellement, « RefArchSharedLibrary » est la référence par défaut.

  • Pour les pipelines et les contrôleurs, indiquez « SiteGenesisSharedLibrary ».
  • Pour SFRA, mettez 'RefArchSharedLibrary'
  1. Dans Business Manager, accédez à Outils du commerçant > Préférences du site > Préférences personnalisées.
  2. Vérifiez que le groupe **Préférences de site** a été créé avec :
    1. ID = AFFIRM_PAYMENT
    2. Nom = Affirm
  3. Vérifiez que le mode de paiement a été créé avec un ID de Affirm et un nom de Affirm. Ensuite, activez le mode de paiement Affirm.
  4. (Optionnel) Pour ajouter une image ou un texte pour votre méthode de paiement, vous pouvez mettre à jour l’atout de contenu affirm-payment-method.
📘

Note

La SFCC a demandé aux partenaires AppExchange de supprimer tous les fichiers Javascript chargés dynamiquement des réseaux de diffusion de contenu (CDNs). Ainsi, Affirm.js, qui est une bibliothèque Javascript côté navigateur servie via CDN, est remplacée par une copie statique. Pour prévenir Affirm.js de devenir obsolète et s'assurer que Affirm.js reçoit des mises à jour critiques, nous recommandons d'utiliser la voie CDN pour intégrer le script dans les pages de vitrine.


Étape 3 : Activez le processeur de paiement Affirm

  1. Dans le Business Manager, accédez à Outils du commerçant > Commandes > Processeurs de paiement.

  2. Cliquez sur Nouveau.

  3. Vérifiez que le groupe Préférences du site a été créé avec :

    1. ID = AFFIRM_PAYMENT
    2. Nom = Affirm
  4. Vérifiez que le Groupe de préférences du site existe avec :

    1. ID = AFFIRM_PAYMENT
    2. Nom = Affirm
  5. Allez sur Outils du commerçant > Commandes > Méthodes de paiement pour vérifier l'existence d'une méthode de paiement :

    1. ID = Affirm
    2. Nom = Affirm
  6. Cliquez sur le nouveau processeur AFFIRM_PAYMENT > Paramètres.

  7. Cochez la case Affirm Online Status pour l'activer.

    capture d'écran de la case à cocher statut Affirm en ligne
  8. Vous pouvez éventuellement ajouter une image ou un texte pour le mode de paiement en mettant à jour l'élément affirm-payment-method.


Étape 4 : Code personnalisé

Vous devez mettre à jour les fichiers modèles de votre site pour ajouter la messagerie promotionnelle et optimiser les fonctionnalités de paiement. Nous avons inclus des instructions détaillées pour ces améliorations personnalisées :

En outre, cliquez sur Cartes de crédit/débit pour vérifier que Visa est activé.


Étape 5 : Configurer le traitement de la carte virtuelle

  1. Connectez-vous à Business Manager et accédez à Outils du commerçant > Préférences du site > Préférences personnalisées du site > Affirm.
  2. Définissez Intégration de la carte virtuelle Affirm sur Activé.
  3. Ajoutez l'instrument de paiement VCN avec la dernière partie du nom du hook (par ex., BASIC_CREDIT).

(Optionnel) Intégrer avec d'autres processeurs de paiement

Notre intégration de carte virtuelle part du principe que vous traitez une carte de débit à l’aide de vos processeurs de paiement. Par défaut, il utilise le processeur BASIC_CREDIT. Si vous devez intégrer Affirm à d'autres processeurs de paiement, vous pouvez suivre ces étapes :

  1. Définir l'attribut de préférence du site Instrument de paiement VCN avec la dernière partie du nom du crochet (par ex., CYBERSOURCE_CREDIT_CARD).
  2. Enregistrez le nouveau gestionnaire de hooks pour le point d’extension dw.int_affirm.payment_instrument.%PI%, où %PI% est la valeur de l'instrument de paiement que vous avez définie à l'étape précédente. (par exemple, dw.int_affirm.payment_instrument.CYBERSOURCE_CREDIT_CARD). Par défaut, il s'agit de dw.int_affirm.payment_instrument.BASIC_CREDIT défini à l'intérieur de /cartridge/scripts/hooks.json.
  3. Implémentez une méthode « add » de ce gestionnaire de crochet, qui prendra le panier comme paramètre.
    1. La méthode retourne un mode de paiement nouvellement créé.
    2. Les informations de cartes de crédit peuvent être extraites de HttpParametersMap et une implémentation de référence peut être trouvée dans cartridge/scripts/payment/instrument/BASIC_CREDIT.js.
    3. Enfin, vérifiez Credit/Debit Cards pour vérifier que la carte Visa est activée.

Quelle est la prochaine étape?