This repo contains an App Builder application for demonstrating eventing and webhooks with an Adobe Commerce as a Cloud Service (ACCS) instance.
The application was intialized using the Adobe Commerce Integration Starter Kit. Public documentation for the Starter Kit can be found at Adobe Developer Starter Kit docs
Go to the Adobe developer console portal
- Click on
Create a new project from template - Select
App Builder - Chose a name and title
- Select stage workspace or create a new one
- Add the following API services (select default Oauth server to server)
- I/0 events
- Adobe I/O Events for Adobe Commerce
- I/O management API
- Download the workspace configuration JSON file and save it as
workspace.jsonin the./scripts/onboarding/configstarter kit folder because you will use it to configure Adobe IO Events in commerce afterward.
The application uses an OAuth credential to access ACCS APIs. Configure a new IMS OAuth Server to Server crednetial in App Builder following this documentation
Store the credentials in the .env file, these are the minimum required values:
OAUTH_CLIENT_ID=YOUR_CLIENT_ID
OAUTH_CLIENT_SECRET=YOUR_CLIENT_SECRET
OAUTH_SCOPES=['scope1', 'scope2']
OAUTH_ENV=prodFollow the below steps to deploy and onboard the application in the repo for the first time. The onboarding process sets up event providers and registrations.
- Download and unzip the project
- Copy the env file
cp env.dist .env - Fill in the values following the comments on the env file.
Run the following command to build the @adobe/commerce-sdk-auth package:
npm run buildInstall the npm dependencies using the command:
npm installThis step will connect your local application to the App builder project you created earlier. Ensure to select the proper Organization > Project > Workspace with the following commands:
aio login
aio console org select
aio console project select
aio console workspace selectSync your local application with the App Builder project using the following command:
aio app use
# Choose the option 'm' (merge) Run the following command to deploy the project; this will deploy the runtime actions needed for the onboarding step:
aio app deployYou can confirm the success of the deployment in the Adobe Developer Console by navigating to the Runtime section on your workspace:

This step will generate the IO Events providers and the registrations for the application. To start the process run the command:
npm run onboardCheck your App developer console to confirm the creation of the registrations:

Run the commerce-event-subscribe script to automatically subscribe to the Commerce event in scripts/commerce-event-subscribe/config/commerce-event-subscribe.json
npm run commerce-event-subscribeThe application contains a single page UI:

Orders successfully placed in the Commerce instance will appear in a table within the "Latest Orders Received" card when an "order placed" Commerce event is received by the application. Clicking the "Ship" button within an order's table row will open a "Ship Order" card. Entering a tracking number in the card's input field and clicking "Ship" will trigger creation of a shipment for the order with the specified tracking number in the Commerce instance.