Guide de mise en œuvre étape par étape de la PDC de paiement fractionné

Cette page présente la liste de contrôle de l’implémentation. Cela suppose que vous avez déjà visionné la présentation et la démonstration complète et que votre site Commerce et votre projet App Builder sont tous deux prêts. Les pages de tutoriel individuelles contiennent des détails complets sur chaque sujet ci-dessous : utilisez cette page pour savoir ce que vous devez faire et dans quel ordre.

Avant de commencer

Confirmez tous les éléments suivants avant d’exécuter une invite ou une commande. La page ​ Conditions préalables et configuration ​ couvre chaque élément en détail.

côté

côté

S’il manque quelque chose au-dessus, arrêtez-vous ici et terminez-le d’abord.

Phase 1 : création du module Commerce

Fonction : génère le module PHP Client_SplitPayment qui gère l’interface utilisateur de passage en caisse, l’application de crédit de magasin, les points d’entrée REST et l’abonnement à l’événement I/O. Il s’agit de l’adaptateur fin in-Commerce : tous les workflows de l’opérateur restent dans App Builder.

Étape 1.1 — Personnaliser l’invite pour votre projet

Ouvrez la page d’invite d’IA du module Commerce 🔗 et notez les points suivants avant de copier l’invite :

Étape 1.2 — Exécuter l’invite

Copiez l’invite complète de INVITE DÉBUT à Fin de l’invite et collez-la dans Cursor (avec Claude) ou directement dans Claude. Exécutez-le à partir de la racine de votre projet Commerce afin que l’IA puisse créer des fichiers sous app/code/.

Étape 1.3 — Activer et installer le module

Exécutez les commandes suivantes à partir de la racine de votre projet Commerce :

bin/magento module:enable Client_SplitPayment
bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento setup:static-content:deploy -f
bin/magento cache:flush

Étape 1.4 — Vérifier que le module est correctement installé

# Confirm the module is active
bin/magento module:status Client_SplitPayment

# Confirm the split_ columns were added to sales_order
mysql -u <user> -p <dbname> -e "DESCRIBE sales_order;" | grep split

Vous devriez voir cinq colonnes : split_store_credit_amount, split_cash_amount, split_cash_status, split_sc_invoice_id et split_cash_invoice_id.

Vérifiez ensuite dans un navigateur que les champs de paiement fractionné s’affichent lors du passage en caisse lorsqu’un client connecté avec un crédit de magasin sélectionne Trésorerie comme mode de paiement.

Phase 2 - Configurer les variables d’environnement

Fonction : prépare les fichiers d’informations d’identification utilisés par l’orchestrateur App Builder, le script de simulation et (éventuellement) l’extension de l’interface utilisateur Experience Cloud. Les quatre mêmes valeurs OAuth de votre intégration Commerce sont utilisées dans chaque fichier .env.

Reportez-vous à la référence des variables d’environnement pour la liste complète des variables par composant.

Étape 2.1 — Créer le .env de l’orchestrateur

Dans votre répertoire split-payment-orchestrator/ :

cp .env.example .env

Renseignez chaque valeur :

Etape 2.2 — Créer le script de simulation .env

cp commerce-backend-ui-1/.env.simulation.example commerce-backend-ui-1/.env.simulation

Renseignez COMMERCE_BASE_URL et les quatre valeurs OAuth (mêmes informations d’identification que ci-dessus).

Phase 3 : création de l’orchestrateur App Builder

Fonction : génère le projet App Builder split-payment-orchestrator : le consommateur d’événement d’E/S payment-orchestrator, les actions web payment-accept et payment-decline, et l’interface utilisateur de l’opérateur demo-dashboard.

Étape 3.1 — Exécuter l’invite de l’orchestrateur

Ouvrez la page Invite de l’IA de l’orchestrateur d’. Copiez l’invite complète et exécutez-la à partir du répertoire split-payment-orchestrator/ .

Étape 3.2 — Installation des dépendances et déploiement

cd split-payment-orchestrator
npm install
# Confirm .env is filled in (from Phase 2, Step 2.1)
aio app deploy

Après le déploiement, aio app deploy imprime les URL d’action. Notez l’URL demo-dashboard ; vous en avez besoin à la phase 4.

Étape 3.3 — Confirmer l’inscription à l’événement

Dans Adobe Developer Console, ouvrez l’espace de travail de votre projet App Builder. Sous Événements, vérifiez que l’enregistrement Split payment — sales order place before existe et est lié à l’action payment-orchestrator.

Phase 4 — Tester le flux complet

Suivez les étapes de vérification dans l’ordre. Le guide de test et de vérification contient les commandes de curl complètes, l’utilisation du script de simulation et une référence de dépannage pour chaque étape ci-dessous.

Étape 4.1 — Vérifier que les points d’entrée REST sont routables

# Expect 401, not 404 — the endpoint exists but requires auth
curl -X POST https://your-store.example.com/rest/V1/split-payment/orders/1/cash-received

Étape 4.2 - Tester l’interface utilisateur de passage en caisse

Étape 4.3 — Tester la protection du seuil

Ajoutez des produits totalisant plus de 100 $, passez en caisse, sélectionnez Argent et tentez de passer la commande. Le "Payment could not be processed. Please try again or contact support." d’erreur doit apparaître.

Étape 4.4 — Émettre un ordre de paiement fractionné de test

Créez un panier de moins de 100 $, saisissez un fractionnement de crédit au comptant/magasin et passez la commande. Dans Commerce Admin, confirmez :

Si aucun commentaire App Builder n’apparaît, consultez les journaux avec aio app logs avant de continuer.

Étape 4.5 — Acceptation du test via le script de simulation

# Find your order's entity_id
node commerce-backend-ui-1/scripts/simulate-split-payment.mjs list

# Accept the payment
node commerce-backend-ui-1/scripts/simulate-split-payment.mjs accept <entity_id>

Dans Commerce Admin, confirmez :

Étape 4.6 — Essai de déclin par script de simulation

Placez un autre ordre de test, puis :

node commerce-backend-ui-1/scripts/simulate-split-payment.mjs decline <entity_id>

Confirmez que le statut de la commande est canceled et que split_cash_status est declined.

Étape 4.7 — Tester le tableau de bord de démonstration

Ouvrez l’URL du tableau de bord à partir de l’étape 3.2. Avec une commande en attente dans le système :

Phase 5 (facultatif) : ajoutez l’extension de l’interface utilisateur d’Experience Cloud

Cette phase incorpore le tableau de bord de l’opérateur dans le shell d’administration Commerce au lieu d’utiliser le demo-dashboard autonome. Passez cette phase si le tableau de bord autonome répond à vos besoins.

Étape 5.1 — Revoir les prérequis

L’extension d’interface utilisateur Experience Cloud requiert des informations d’identification IMS en plus des valeurs d’intégration OAuth. Lisez la page Invite de l’IA de l’extension de l’interface utilisateur d’ avant d’exécuter l’invite, en prêtant attention à la OAUTH_CLIENT_ID et aux variables IMS associées.

Étape 5.2 — Exécuter l’invite d’extension de l’interface utilisateur

Copiez l’invite complète depuis INVITE DE DÉBUT vers Fin de l’invite et exécutez-la à partir du répertoire commerce-checkout-starter-kit/.

Étape 5.3 — Déploiement

cd commerce-checkout-starter-kit
npm install
cp .env.dist .env
# Fill in IMS credentials and COMMERCE_INTEGRATION_* credentials
aio app deploy

Référence de dépannage rapide

Pour obtenir des informations complètes sur le dépannage, consultez le guide test et vérification.

Toutes les ressources de cette série

Ressources de référence