DocumentatieCommerceVideo's en zelfstudies

POC gesplitst betaling: Experience Cloud UI-extensie AI-prompt

Laatst bijgewerkt: 28 april 2026

Gemaakt voor:

  • Intermediate
  • Developer
  • Leader
  • User

Dit is de optionele stap waarmee een venster met gesplitste betalingsopdrachten in de Adobe Commerce Admin shell (Experience Cloud) wordt ingesloten met behulp van het patroon commerce-checkout-starter-kit en commerce-backend-ui-1 . Het standalone ​ demo dashboard ​ van het orchestrator van App Builder behandelt zelfde goedkeurt en daalt stroom zonder shell Admin integratie.

Hoe deze herinnering te gebruiken

Kopieer alles van PROMPT START aan Eind van herinnering in Curseur of Claude. Voer de vraag uit vanuit de map commerce-checkout-starter-kit/ .

Voordat u gaat werken

De vraag

PROMPT START

U genereert de extensie commerce-backend-ui-1 Admin UI SDK voor de gesplitste betaling PoC. Met deze extensie wordt een gesplitste betalingsorderdashboard ingesloten in de Adobe Commerce Admin Shell met behulp van de patronen @adobe/aio-app-dev-toolkit en @adobe/commerce-backend-ui-1 uit de Commerce Checkout Starter Kit.

Project van de Basis: commerce-checkout-starter-kit/
de folder van de Uitbreiding: commerce-checkout-starter-kit/commerce-backend-ui-1/

Wat biedt deze extensie

  1. Admin het paneel van het ordennet van de orde — een punt van het douanemenu in de lijst van Shell van Commerce splitsen betalingsorden met split_cash_status = 'pending'
  2. de gedetailleerde mening van de Orde — toont de opgesplitste betalingsuitsplitsing (geldbedrag, bedrag van opslagkrediet, status) naast de orde
  3. keurt goed/verwerpt acties — knopen die de payment-accept en payment-decline acties van App Builder via OAuth 1.0a roepen

Te genereren bestandsstructuur

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

Handelingen ondersteunen

actions/commerce/index.js — IMS-geverifieerde Commerce REST

  • Gebruikt de IMS-token die wordt geboden door de SDK-context van Admin UI om Commerce REST aan te roepen
  • Lijst met opgehaalde volgorde met filter split_cash_status
  • Hiermee wordt de orderlijst geretourneerd als JSON

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

  • Dezelfde implementatie als split-payment-orchestrator/actions/payment-orchestrator/commerce-client.js
  • Gebruikt COMMERCE_INTEGRATION_* prefixed env vars (om van geloofsbrieven IMS te onderscheiden)

actions/payment-accept/index.js — Actie accepteren

  • Dezelfde logica als split-payment-orchestrator/actions/payment-accept/index.js
  • Roept POST /V1/split-payment/orders/:orderId/cash-received via OAuth 1.0a

actions/payment-decline/index.js — Handeling Afwijzen

  • Roept POST /V1/split-payment/orders/:orderId/cash-decline

actions/registration/index.js — SDK-registratie voor Admin UI

  • Registreert de uitbreiding met Commerce Admin Shell
  • Hiermee wordt een menu-item toegevoegd onder Bestellingen voor het gesplitste betalingsdashboard

Frontonderdelen Reageren

SplitPaymentDashboard.jsx

  • Vermeldt lopende gesplitste betalingsopdrachten in een tabel met spectrumopmaak
  • Kolommen: Volgnummer (increment_id), Datum, Klant, Gelden verschuldigd, Creditering winkel, Status
  • De knoppen Accepteren en Afwijzen per rij
  • Roept achterste handelingen aan via web-src/src/utils.js helpers ophalen
  • Hiermee worden de status van laden/fouten weergegeven; vernieuwt bij voltooiing van handeling

SplitPaymentOrderDetail.jsx

  • Toont gesplitste betalingsgegevens voor één bestelling
  • Geeft weer: kasbedrag, bedrag opslagkrediet, huidige split_cash_status

useSplitPaymentOrders.js — Reageren

  • Hiermee worden betalingsopdrachten opgesplitst van actions/commerce/index.js
  • Retourneert { orders, loading, error, refresh }

Simulatiescript

scripts/simulate-split-payment.mjs

Een Node.js ESM- manuscript voor het testen van Commerce REST vraag direct (zonder het gaan door App Builder). Gebruikt dezelfde OAuth 1.0a-ondertekening als de App Builder-handelingen.

Opdrachten:

  • node simulate-split-payment.mjs help — gebruik weergeven
  • node simulate-split-payment.mjs list — recente bestellingen met gesplitste betalingsgegevens weergeven
  • node simulate-split-payment.mjs show <orderId> — gesplitste betalingsvelden weergeven voor een specifieke opdracht (entity_id)
  • node simulate-split-payment.mjs accept <orderId> — roep cash-received eindpunt
  • node simulate-split-payment.mjs decline <orderId> — roep cash-decline eindpunt

Referenties worden gelezen vanuit commerce-backend-ui-1/.env.simulation (kopie vanuit .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

De extensie configureren met:

  • Het extensietype commerce-backend-ui-1
  • De vier achterste acties (commerce, payment-accept, payment-decline, registration)
  • require-adobe-auth: true voor alle acties behalve registration
  • Invoerbindingen van env voor COMMERCE_INTEGRATION_* gebruikersgegevens

Na het genereren van bestanden

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

Einde van vraag

Gerelateerde gesplitste betalingen POC-middelen

recommendation-more-help
commerce-learn-help-home