DokumentationCommerceVideofilmer och självstudiekurser

Delad betalning POC: Experience Cloud UI-tillägg - AI-fråga

Senast uppdaterad: 28 april 2026

Skapat för:

  • Intermediate
  • Developer
  • Leader
  • User

Detta är det valfria steget som bäddar in en delad betalningsorderpanel i Adobe Commerce Admin shell (Experience Cloud) med hjälp av mönstret commerce-checkout-starter-kit och commerce-backend-ui-1. Den fristående demoinstrumentpanelen från App Builder orchestrator omfattar samma arbetsflöde för acceptera och avvisa utan integrering med Admin Shell.

Hur du använder den här uppmaningen

Kopiera allt från PROMPT START till Slut på fråga till Markör eller Claude. Kör frågan från katalogen commerce-checkout-starter-kit/.

Innan du kör

Uppmaningen

UPPMANA START

Du genererar SDK-tillägget commerce-backend-ui-1 för administratörsgränssnittet för den delade betalningens PoC. Det här tillägget bäddar in en delad kontrollpanel för betalningsorder i Adobe Commerce Admin Shell med hjälp av mönstren @adobe/aio-app-dev-toolkit och @adobe/commerce-backend-ui-1 från Commerce Checkout Starter Kit.

Grundprojekt: commerce-checkout-starter-kit/
Tilläggskatalog: commerce-checkout-starter-kit/commerce-backend-ui-1/

Vad det här tillägget innehåller

  1. Panelen Rutnät för administratörsorder - ett anpassat menyalternativ i Commerce Admin Shell som listar delade betalningsorder med split_cash_status = 'pending'
  2. Orderdetaljvy - visar delad betalningsfördelning (kontantbelopp, butikskreditbelopp, status) bredvid ordern
  3. Acceptera/avvisa åtgärder - knappar som anropar payment-accept och payment-decline App Builder-åtgärder via OAuth 1.0a

Filstruktur att generera

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

Backend-åtgärder

actions/commerce/index.js - IMS-autentiserad Commerce REST

  • Använder IMS-token som tillhandahålls av Admin UI SDK-kontexten för att anropa Commerce REST
  • Hämtar orderlista med filtret split_cash_status
  • Returnerar orderlistan som JSON

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

  • Samma implementering som split-payment-orchestrator/actions/payment-orchestrator/commerce-client.js
  • Använder COMMERCE_INTEGRATION_* prefix-env-variabler (för att skilja från IMS-autentiseringsuppgifter)

actions/payment-accept/index.js - Acceptera åtgärd

  • Samma logik som split-payment-orchestrator/actions/payment-accept/index.js
  • Samtal POST /V1/split-payment/orders/:orderId/cash-received via OAuth 1.0a

actions/payment-decline/index.js - Åtgärden Neka

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

actions/registration/index.js - Registrering för administratörsgränssnitt för SDK

  • Registrerar tillägget med Commerce Admin Shell
  • Lägger till ett menyalternativ under Beställningar för kontrollpanelen för delad betalning

Reagera på klientkomponenter

SplitPaymentDashboard.jsx

  • Visar väntande delade betalningsorder i en tabell med spektrumformat
  • Kolumner: Ordernr (increment_id), Datum, Kund, Kassaförfall, Butikskrediter, Status
  • Knapparna Godkänn och Avböj per rad
  • Anropar backend-åtgärder via web-src/src/utils.js hämtningshjälpmedel
  • Visar inläsnings-/feltillstånd, uppdateras när åtgärden har slutförts

SplitPaymentOrderDetail.jsx

  • Visar information om delad betalning för en enstaka order
  • Visar: kontantbelopp, butikskreditbelopp, aktuell split_acity_status

useSplitPaymentOrders.js - Reagera krok

  • Hämtar delade betalningsorder från actions/commerce/index.js
  • Returnerar { orders, loading, error, refresh }

Simuleringsskript

scripts/simulate-split-payment.mjs

Ett Node.js ESM-skript för att testa Commerce REST-anrop direkt (utan att gå via App Builder). Använder samma OAuth 1.0a-signering som App Builder-åtgärderna.

Kommandon:

  • node simulate-split-payment.mjs help - visa användning
  • node simulate-split-payment.mjs list - visa senaste order med delade betalningsdata
  • node simulate-split-payment.mjs show <orderId> - visa delade betalningsfält för en viss order (entity_id)
  • node simulate-split-payment.mjs accept <orderId> - anropa slutpunkten cash-received
  • node simulate-split-payment.mjs decline <orderId> - anropa slutpunkten cash-decline

Läser autentiseringsuppgifter från commerce-backend-ui-1/.env.simulation (kopia från .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

Konfigurera tillägget med:

  • Tilläggstypen commerce-backend-ui-1
  • De fyra backend-åtgärderna (commerce, payment-accept, payment-decline, registration)
  • require-adobe-auth: true för alla åtgärder utom registration
  • Indatabindningar från env för COMMERCE_INTEGRATION_* autentiseringsuppgifter

Efter generering av filer

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

Frågeslut

Relaterade POC-resurser för delad betalning

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