分割支払いPOC: Experience Cloud UI拡張機能AI プロンプト

最終更新日： 2026年4月28日

作成対象：

Intermediate
Developer
Leader
User

これは、commerce-checkout-starter-kitとcommerce-backend-ui-1 パターンを使用して、Adobe Commerce管理シェル（Experience Cloud）に分割支払い注文パネルを埋め込むオプションの手順です。 App Builder orchestratorのスタンドアロンデモダッシュボードは、管理者シェルの統合なしで、同じ承認と拒否のフローをカバーしています。

このプロンプトの使用方法

プロンプト開始から プロンプト終了 までのすべての項目をカーソルまたはクロードにコピーします。 commerce-checkout-starter-kit/ ディレクトリからプロンプトを実行します。

実行する前

このパスには、OAuth値に加えて IMS 資格情報が必要です（commerce-checkout-starter-kit変数の分割支払いPOC：環境変数リファレンスを参照）。
同じpayment-acceptとpayment-declineのビヘイビアーを比較する場合は、分割支払いPOC: App Builder オーケストレーターAI プロンプトを最初に実行します。UI拡張機能は、そのロジックをCOMMERCE_INTEGRATION_*個の環境名で再利用します。

プロンプト

プロンプト開始

分割支払いPOC用のcommerce-backend-ui-1管理UI SDK拡張機能を生成しています。この拡張機能は、Commerce Checkout Starter Kitの@adobe/aio-app-dev-toolkitと@adobe/commerce-backend-ui-1のパターンを使用して、分割された支払い注文ダッシュボードをAdobe Commerce管理シェルに埋め込みます。

基本プロジェクト： commerce-checkout-starter-kit/
拡張ディレクトリ： commerce-checkout-starter-kit/commerce-backend-ui-1/

この拡張機能は

管理者注文グリッドパネル — Commerce管理シェルのカスタムメニュー項目で、split_cash_status = 'pending'の分割支払い注文を一覧表示します
注文詳細ビュー – 分割支払いの内訳（現金金額、店舗クレジット金額、ステータス）を注文と一緒に表示します
アクションの受け入れ/拒否 — OAuth 1.0a経由でpayment-acceptおよびpayment-decline個のApp Builder アクションを呼び出すボタン

生成するファイル構造

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/commerce/index.js — IMS認証のCommerce REST

管理者UI SDK コンテキストによって提供されるIMS トークンを使用して、Commerce RESTを呼び出します
split_cash_status フィルターを含む注文リストを取得します
注文リストをJSONとして返します

actions/payment-accept/commerce-client.js — OAuth 1.0a クライアント

split-payment-orchestrator/actions/payment-orchestrator/commerce-client.jsと同じ実装
接頭辞が付いたCOMMERCE_INTEGRATION_*個の環境変数を使用します（IMS資格情報と区別するため）

actions/payment-accept/index.js — アクションを承認

split-payment-orchestrator/actions/payment-accept/index.jsと同じロジック
OAuth 1.0a経由でPOST /V1/split-payment/orders/:orderId/cash-receivedを呼び出す

actions/payment-decline/index.js — アクションを辞退

POST /V1/split-payment/orders/:orderId/cash-declineを呼び出します

actions/registration/index.js – 管理者UI SDKの登録

拡張機能をCommerce管理シェルに登録します
分割支払いダッシュボードの「注文」の下にメニュー項目を追加します

React フロントエンドコンポーネント

SplitPaymentDashboard.jsx

Spectrum スタイルのテーブルに、保留中の分割支払い注文を一覧表示します
列：注文番号（increment_id）、日付、顧客、支払期限、店舗クレジット、ステータス
1行あたりのボタンの受け入れと拒否
web-src/src/utils.js件のフェッチヘルパーを介してバックエンドアクションを呼び出す
読み込み/エラー状態を表示します。アクションの完了時に更新されます

SplitPaymentOrderDetail.jsx

1つの注文の分割支払の詳細を表示します
表示：キャッシュ金額、ストアクレジット金額、現在のsplit_cash_status

useSplitPaymentOrders.js — React フック

actions/commerce/index.jsからの分割支払い注文を取得します
{ orders, loading, error, refresh }を返します

シミュレーションスクリプト

scripts/simulate-split-payment.mjs

Commerce REST呼び出しを直接テストするためのNode.js ESM スクリプト（App Builderを経由しない）。 App Builder アクションと同じOAuth 1.0a署名を使用します。

コマンド：

node simulate-split-payment.mjs help – 使用状況を表示
node simulate-split-payment.mjs list – 分割支払いデータを使用した最近の注文のリスト
node simulate-split-payment.mjs show <orderId> – 特定の注文の分割支払いフィールドを表示します（entity_id）
node simulate-split-payment.mjs accept <orderId> — cash-received エンドポイントの呼び出し
node simulate-split-payment.mjs decline <orderId> — cash-decline エンドポイントの呼び出し

commerce-backend-ui-1/.env.simulationから資格情報を読み取ります（.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`

拡張機能を次の場所で設定します。

commerce-backend-ui-1拡張機能タイプ
4つのバックエンドアクション（commerce、payment-accept、payment-decline、registration）
registrationを除くすべてのアクションのrequire-adobe-auth: true
環境からCOMMERCE_INTEGRATION_*資格情報のバインディングを入力

ファイルの生成後

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