Documentation Commerce Vidéos et tutoriels

PDC de paiement partagé : invite d’IA de l’extension de l’interface utilisateur d’Experience Cloud

Dernière mise à jour : 9 mai 2026

Créé pour :

Intermediate
Developer
Leader
User

Il s’agit de l’étape facultative qui incorpore un panneau d’ordres de paiement fractionnés dans le shell d’administration Adobe Commerce (Experience Cloud) à l’aide de la commerce-checkout-starter-kit et du modèle de commerce-backend-ui-1. Le tableau de bord de démonstration autonome de l’orchestrateur App Builder couvre le même flux d’acceptation et de refus sans intégration Admin Shell.

Utiliser cette invite

Copiez tout du INVITE DÉBUT au Fin de l’invite dans Curseur ou Claude. Exécutez l’invite à partir du répertoire commerce-checkout-starter-kit/.

Avant d’exécuter

Ce chemin d’accès nécessite des informations d’identification IMS en plus des valeurs OAuth (voir Référence des variables d’environnement pour le paiement partagé : référence des variables d’environnement pour les variables de commerce-checkout-starter-kit).
Terminez Split Payment POC : invite de l’IA de l’orchestrateur d’App Builder tout d’abord si vous souhaitez comparer le même payment-accept et payment-decline comportement ; l’extension d’interface utilisateur réutilise cette logique avec les noms d’environnement de COMMERCE_INTEGRATION_*.

L’invite

DÉBUT DE L’INVITE

Vous générez l’extension SDK de l’interface utilisateur d’administration commerce-backend-ui-1 pour la preuve de concept de paiement partagé. Cette extension incorpore un tableau de bord des ordres de paiement fractionnés dans Adobe Commerce Admin Shell à l’aide des modèles @adobe/aio-app-dev-toolkit et @adobe/commerce-backend-ui-1 du kit de démarrage de passage en caisse Commerce.

Projet de base : commerce-checkout-starter-kit/
Répertoire d’extension : commerce-checkout-starter-kit/commerce-backend-ui-1/

Ce Que Fournit Cette Extension

Panneau Grille des commandes d’administration — un élément de menu personnalisé dans Commerce Admin Shell répertoriant les ordres de paiement fractionnés avec split_cash_status = 'pending'
Vue détaillée de la commande — affiche la répartition des paiements fractionnés (montant en espèces, montant du crédit de la boutique, statut) avec la commande
Accepter/Refuser les actions : boutons qui appellent les actions payment-accept et payment-decline App Builder via OAuth 1.0a.

Structure de fichier à générer

commerce-checkout-starter-kit/commerce-backend-ui-1/
├── ext.config.yaml
├── README.md
├── .env.simulation.example
├── actions/
│   ├── utils.js
│   ├── commerce/
│   │   └── index.js           ← IMS-based Commerce REST (order listing)
│   ├── payment-accept/
│   │   ├── commerce-client.js ← OAuth 1.0a (accept/decline)
│   │   └── index.js
│   ├── payment-decline/
│   │   └── index.js
│   └── registration/
│       └── index.js
├── scripts/
│   ├── README.md
│   └── simulate-split-payment.mjs
└── web-src/
    ├── index.html
    ├── package.json
    ├── .parcelrc
    └── src/
        ├── index.jsx
        ├── index.css
        ├── utils.js
        ├── exc-runtime.js
        ├── config.json
        ├── constants/
        │   └── extension.js
        ├── components/
        │   ├── App.jsx
        │   ├── ExtensionRegistration.jsx
        │   ├── MainPage.jsx
        │   ├── SplitPaymentDashboard.jsx
        │   └── SplitPaymentOrderDetail.jsx
        └── hooks/
            └── useSplitPaymentOrders.js

Actions du serveur principal

actions/commerce/index.js — REST Commerce authentifié IMS

Utilise le jeton IMS fourni par le contexte SDK de l’interface utilisateur d’administration pour appeler le REST Commerce.
Récupère la liste des commandes avec split_cash_status filtre
Renvoie la liste de commandes au format JSON

actions/payment-accept/commerce-client.js — Client OAuth 1.0a

Même implémentation que split-payment-orchestrator/actions/payment-orchestrator/commerce-client.js
Utilise COMMERCE_INTEGRATION_* variables d’environnement préfixées (pour se distinguer des informations d’identification IMS)

actions/payment-accept/index.js — Accepter l’action

Même logique que split-payment-orchestrator/actions/payment-accept/index.js
Appels POST /V1/split-payment/orders/:orderId/cash-received via OAuth 1.0a

actions/payment-decline/index.js — Refuser l’action

Appels POST /V1/split-payment/orders/:orderId/cash-decline

actions/registration/index.js — Enregistrement SDK de l’interface utilisateur d’administration

Enregistre l’extension avec Commerce Admin Shell
Ajoute un élément de menu sous Commandes pour le tableau de bord de paiement fractionné

Composants front-end React

SplitPaymentDashboard.jsx

Répertorie les ordres de paiement fractionnés en attente dans une table de style Spectrum
Colonnes : N° de commande (increment_id), Date, Client, Argent dû, Crédit de la boutique, Statut
Boutons Accepter et Refuser par ligne
Appelle les actions du serveur principal via les assistants de récupération web-src/src/utils.js
Affiche les états de chargement/erreur ; s’actualise à la fin de l’action

SplitPaymentOrderDetail.jsx

Affiche les détails de paiement fractionné pour une seule commande
Affichages : montant de trésorerie, montant du crédit de magasin, statut_split_cash_actuel

useSplitPaymentOrders.js : hook React

Récupère les ordres de paiement fractionnés à partir de actions/commerce/index.js
Renvoie { orders, loading, error, refresh }

Script de simulation

scripts/simulate-split-payment.mjs

Un script ESM Node.js pour tester directement les appels REST Commerce (sans passer par App Builder). Utilise la même signature OAuth 1.0a que les actions App Builder.

Commandes :

node simulate-split-payment.mjs help — afficher l’utilisation
node simulate-split-payment.mjs list — liste des commandes récentes avec données de paiement fractionné
node simulate-split-payment.mjs show <orderId> — afficher les champs de paiement fractionné pour une commande spécifique (entity_id)
node simulate-split-payment.mjs accept <orderId> — appeler cash-received point d’entrée
node simulate-split-payment.mjs decline <orderId> — appeler cash-decline point d’entrée

Lit les informations d’identification depuis commerce-backend-ui-1/.env.simulation (copie depuis .env.simulation.example).

.env.simulation.example:

COMMERCE_BASE_URL=https://your-store.example.com
COMMERCE_CONSUMER_KEY=
COMMERCE_CONSUMER_SECRET=
COMMERCE_ACCESS_TOKEN=
COMMERCE_ACCESS_TOKEN_SECRET=

`ext.config.yaml`

Configurez l’extension avec :

Type d’extension commerce-backend-ui-1
Les quatre actions principales (commerce, payment-accept, payment-decline, registration)
require-adobe-auth: true pour toutes les actions, à l’exception de registration
Liaisons d’entrée depuis l’environnement pour les informations d’identification COMMERCE_INTEGRATION_*

Après la génération des fichiers

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