Skip to content

Commit 1c20837

Browse files
authored
Merge pull request AdobeDocs#396 from kuflower/CEXT-4720-checkout-starter-kit-configuration
CEXT-4720: Update Checkout Starter Kit configuration steps
2 parents 48afb31 + 05e3a09 commit 1c20837

File tree

9 files changed

+126
-73
lines changed

9 files changed

+126
-73
lines changed
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<InlineAlert variant="info" slots="text"/>
2+
3+
This step requires the [Adobe Commerce HTTP Client](./connect.md#connect-to-adobe-commerce) to authenticate the Commerce instance.
43.2 KB
Loading

src/pages/starter-kit/checkout/configure.md

Lines changed: 79 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,72 @@ keywords:
66
- Extensibility
77
---
88

9+
import Configuration from '/src/_includes/checkout-configuration.md'
10+
911
# Configure Commerce
1012

11-
This section provides an overview on configuring Adobe Commerce for developing an app using the checkout starter kit and provides an overview of the scripts available.
13+
This section provides an overview of configuring out-of-process extensibility on Adobe Commerce for developing an app using the checkout starter kit.
14+
15+
All the configurations in your app must align with the [App Builder Configuration file guidelines](https://developer.adobe.com/app-builder/docs/guides/configuration/). In addition, the starter kit provides a set of [scripts](https://github.com/adobe/commerce-checkout-starter-kit/tree/main/scripts) to help you get started with your project.
16+
17+
## Configure Payment, Shipping, or Tax modules
18+
19+
Select one of the following modules to learn about the available scripts:
20+
21+
- [Payment](./payment-install.md#configuration)
22+
- [Shipping](./shipping-install.md#configuration)
23+
- [Tax](./tax-install.md#configuration)
24+
25+
## Configure OAuth Server-to-Server Credential
26+
27+
<InlineAlert variant="info" slots="text"/>
28+
29+
The OAuth credentials are available after completing the [initial configuration](./getting-started.md#initial-configuration).
30+
31+
The [`sync-oauth-credentials`](https://github.com/adobe/commerce-checkout-starter-kit/blob/main/scripts/sync-oauth-credentials.js) script ensures that the OAuth credentials are available for interacting with AIO, such as creating an event provider. This script synchronizes the OAuth credentials from Adobe Developer Console with your local App Builder project configuration, located in `.env`:
32+
33+
```js
34+
OAUTH_CLIENT_ID=<client id>
35+
OAUTH_CLIENT_SECRETS=<client secret>
36+
OAUTH_TECHNICAL_ACCOUNT_ID=<technical account id>
37+
OAUTH_TECHNICAL_ACCOUNT_EMAIL=<technical account email>
38+
OAUTH_SCOPES=<scope>
39+
OAUTH_IMS_ORG_ID=<img org>
40+
41+
This script is included as part of the `pre-app-build` hook in [app.config.yaml](https://github.com/adobe/commerce-checkout-starter-kit/blob/main/app.config.yaml). When the app build is triggered, the script runs automatically to synchronize the OAuth credentials with the Commerce instance.
42+
43+
```yaml
44+
application:
45+
hooks:
46+
pre-app-build: ./hooks/pre-app-build.js
47+
```
48+
49+
## Configure Eventing
50+
51+
To configure eventing, follow these steps:
52+
53+
1. Install the [Commerce eventing module](./getting-started.md) in your Commerce instance.
54+
55+
1. Set up the [Adobe Commerce HTTP Client](./connect.md#connect-to-adobe-commerce) to authenticate the Commerce instance.
56+
57+
1. Configure your [events.config.yaml](#eventsconfigyaml) and `.env` files with the commerce event provider specification.
1258

13-
All the configurations in your app must align with the [App Builder Configuration file guidelines](https://developer.adobe.com/app-builder/docs/guides/configuration/). In addition to the App Builder configuration, this starter kit requires the following additional configurations:
59+
- Create the event provider in advance, by running the [configure-events](#configure-events) script.
60+
61+
- If you already have a Commerce event provider, ensure that:
62+
63+
- The `events.config.yaml` file matches the existing provider metadata.
64+
65+
- The environment variable `AIO_EVENTS_PROVIDERMETADATA_TO_PROVIDER_MAPPING` contains the Commerce event provider ID.
66+
67+
1. The script requires the following environment variables, which update the values in **Stores > Configuration > Adobe Services > Adobe I/O Events > Commerce events**:
68+
69+
- `COMMERCE_ADOBE_IO_EVENTS_MERCHANT_ID`: The merchant ID of the Commerce instance.
70+
- `COMMERCE_ADOBE_IO_EVENTS_ENVIRONMENT_ID`: The environment ID of the Commerce instance.
71+
72+
This script must finish running before you deploy the application for event registration.
1473

15-
## events.config.yaml
74+
### events.config.yaml
1675

1776
The [`events.config.yaml`](https://github.com/adobe/commerce-checkout-starter-kit/blob/main/events.config.yaml) file defines the event providers and their metadata.
1877

@@ -25,11 +84,11 @@ The [`events.config.yaml`](https://github.com/adobe/commerce-checkout-starter-ki
2584
| `events_metadata` | List of event metadata to register. (This is not required for the Commerce event provider, since it uses event subscriptions.)|
2685
| `subscription` | Only required for the Commerce event provider. List of Commerce events to subscribe to. For payload specifications, refer to [Subscribe to events](../../events/api.md#subscribe-to-events).|
2786

28-
## Scripts
87+
### configure-events
2988

30-
The starter kit provides set of [scripts](https://github.com/adobe/commerce-checkout-starter-kit/tree/main/scripts) to help you get started with your project. Run these scripts by using the following format: `npm run <script-name>`.
89+
<InlineAlert variant="info" slots="text"/>
3190

32-
### configure-events
91+
This script requires [OAuth Server-to-Server credential](#configure-oauth-server-to-server-credential) to create the event provider.
3392

3493
The [`configure-events`](https://github.com/adobe/commerce-checkout-starter-kit/blob/main/scripts/configure-events.js) script configures the Adobe I/O Events integration for your project with a single command.
3594

@@ -53,15 +112,22 @@ The script uses the following environment variables:
53112
- `AIO_runtime_namespace`: The Adobe I/O Runtime namespace is used as the suffix for the Adobe I/O Events provider label.
54113
- `AIO_EVENTS_PROVIDERMETADATA_TO_PROVIDER_MAPPING`: (Optional) Existing provider metadata to provider mapping.
55114

56-
The script does not support deleting event providers. If you need to delete an event provider, you can do
57-
it through AIO CLI with the following command:
115+
To run this script, use the following command:
58116

59117
```bash
60-
`aio event provider delete <provider-id>`.
118+
npm run configure-events
119+
```
120+
121+
The script does not support deleting event providers. If you need to delete an event provider, you can do it through AIO CLI with the following command:
122+
123+
```bash
124+
aio event provider delete <provider-id>
61125
```
62126

63127
### configure-commerce-events
64128

129+
<Configuration />
130+
65131
The [`configure-commerce-events`](https://github.com/adobe/commerce-checkout-starter-kit/blob/main/scripts/configure-commerce-events.js) script configures the Commerce event provider for your Commerce instance.
66132

67133
It reads the `dx_commerce_events` event provider specification from the [events.config.yaml](#eventsconfigyaml) and `.env` files, and performs the following actions:
@@ -72,37 +138,8 @@ It reads the `dx_commerce_events` event provider specification from the [events.
72138
73139
1. Subscribes to the required commerce events.
74140
75-
#### Prerequisites
76-
77-
To run the script, ensure you have completed the following steps:
78-
79-
1. Install the [Commerce eventing module](./getting-started.md) in your Commerce instance.
80-
81-
1. Set up the [Adobe Commerce HTTP Client](./connect.md#connect-to-adobe-commerce) to authenticate the Commerce instance.
82-
83-
1. Configure your [events.config.yaml](#eventsconfigyaml) and `.env` files with the commerce event provider specification.
84-
85-
- Create the event provider in advance, by running the [configure-events](#configure-events) script.
86-
87-
- If you already have a Commerce event provider, ensure that:
141+
To run this script, use the following command:
88142
89-
- The `events.config.yaml` file matches the existing provider metadata.
90-
91-
- The environment variable `AIO_EVENTS_PROVIDERMETADATA_TO_PROVIDER_MAPPING` contains the Commerce event provider ID.
92-
93-
1. The script requires the following environment variables, which update the values in **Stores > Configuration > Adobe Services > Adobe I/O Events > Commerce events**:
94-
95-
- `COMMERCE_ADOBE_IO_EVENTS_MERCHANT_ID`: The merchant ID of the Commerce instance.
96-
- `COMMERCE_ADOBE_IO_EVENTS_ENVIRONMENT_ID`: The environment ID of the Commerce instance.
97-
98-
This script must finish running before you deploy the application for event registration.
99-
100-
<InlineAlert variant="info" slots="text"/>
101-
102-
To run the following scripts, you must configure the [Adobe Commerce HTTP Client](./connect.md#connect-to-adobe-commerce).
103-
104-
Select one of the following modules to learn about the available scripts:
105-
106-
- [Payment](./payment-install.md#configuration)
107-
- [Shipping](./shipping-install.md#configuration)
108-
- [Tax](./tax-install.md#configuration)
143+
```bash
144+
npm run configure-commerce-events
145+
```

src/pages/starter-kit/checkout/connect.md

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,11 @@ To use the Adobe Commerce HTTP Client, update the `COMMERCE_BASE_URL` value in t
2828

2929
Depending on your Adobe Commerce setup, there are two options to authenticate and communicate with App Builder:
3030

31-
- [Configure Adobe Identity Management Service (IMS)](#adobe-identity-management-service-ims)
31+
- [Adobe Identity Management Service (IMS)](#adobe-identity-management-service-ims)
3232

33-
- [Configure Commerce Integration](#create-a-commerce-integration)
33+
- &#8203;<Edition name="paas" /> [Commerce Integration](#create-a-commerce-integration)
3434

35-
If a Commerce integration is detected, it has precedence over IMS authentication. However, if neither option is detected or configured, then client instantiation will fail.
35+
If IMS authentication is detected, it has precedence over Commerce integration authentication. However, if neither option is detected or configured, then client instantiation will fail.
3636

3737
### Adobe Identity Management Service (IMS)
3838

@@ -46,17 +46,9 @@ Use the following steps to create OAuth credentials for App Builder authenticati
4646

4747
1. Access your IMS credentials through the [Adobe Developer Console](https://developer.adobe.com/console). Select the project and workspace you set up during the [initial configuration](./getting-started.md#initial-configuration). Then click **OAuth Server-to-Server** in the side-navigation menu.
4848

49-
**NOTE**: The OAuth Server-to-Server option only displays if you add the I/O Management API to your workspace, which is done as part of the [initial configuration](./getting-started.md#initial-configuration).
49+
1. Copy the IMS credentials to the `.env` file in the root of the project.
5050

51-
1. Add a technical account with server-to-server credentials to the Commerce Admin with the appropriate permissions using the [Admin User Creation Guide](https://experienceleague.adobe.com/en/docs/commerce-admin/systems/user-accounts/permissions-users-all#create-a-user). If a technical account with appropriate permissions already exists, you can use it instead.
52-
53-
1. When associating the user with the account, find your `Technical Account email` as a part of generated IMS credentials with following pattern: `<technical-account>@techacct.adobe.com` and use that value in the **Email** field during user creation:
54-
55-
![userCreation.png](../../_images/starterkit/userCreation.png)
56-
57-
1. On the **User Role** tab, select the Administrators role to provide all necessary permissions.
58-
59-
1. Copy the generated credentials (client ID, client secret, technical account ID, and technical account email) to the `.env` file in the root of the project:
51+
**NOTE**: These credentials are automatically populated in [Configure OAuth Server-to-Server Credential](./configure.md#configure-oauth-server-to-server-credential).
6052

6153
```js
6254
OAUTH_CLIENT_ID=<client id>
@@ -67,9 +59,19 @@ Use the following steps to create OAuth credentials for App Builder authenticati
6759
OAUTH_IMS_ORG_ID=<img org>
6860
```
6961

62+
1. Add a technical account with server-to-server credentials to the Commerce Admin with the appropriate permissions using the [Admin User Creation Guide](https://experienceleague.adobe.com/en/docs/commerce-admin/systems/user-accounts/permissions-users-all#create-a-user).
63+
64+
1. When associating the user with the account, find your **Technical Account email** as a part of generated IMS credentials with following pattern: `<technical-account>@techacct.adobe.com` and use that value in the **Email** field during user creation:
65+
66+
![ims-user-creation.png](../../_images/starterkit/ims-user-creation.png)
67+
68+
1. On the **User Role** tab, select the role that provides all necessary permissions for API integrations.
69+
70+
![ims-user-role.png](../../_images/starterkit/ims-user-role.png)
71+
7072
### Create a Commerce integration
7173

72-
This option allows communication between Commerce and App Builder.
74+
&#8203;<Edition name="paas" /> This option allows communication between Commerce and App Builder.
7375

7476
1. Create a new Adobe Commerce Integration by following the [systems integration](https://experienceleague.adobe.com/en/docs/commerce-admin/systems/integrations) guide.
7577

src/pages/starter-kit/checkout/getting-started.md

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -41,26 +41,14 @@ composer require "magento/commerce-backend-sdk": ">=3.0"
4141

4242
## Initial configuration
4343

44-
### Create an App Builder project
45-
46-
An App Builder project must be created before using the checkout starter kit.
47-
48-
1. Log in to the [Adobe Developer Console](https://console.adobe.io/) and select the desired organization from the dropdown menu in the top-right corner.
49-
50-
1. Click **Create new project from template**.
51-
52-
**NOTE**: If the **Create project from template** option is not displayed, your request to access App Builder might not yet be approved.
53-
54-
1. Select **App Builder**. The **Set up templated project** page displays.
55-
56-
1. Specify a project title and app name. Mark the **Include Runtime with each workspace** checkbox. Optionally, you can create a custom workspace other than the default **Stage** workspace, by clicking **Add Workspace**, and entering a name and description. Click **Save**. The Console creates a project and workspaces.
57-
58-
### Set up your local environment
59-
6044
Use the following steps to configure your local environment:
6145

6246
1. Create a folder for your project and navigate to it.
6347

48+
```bash
49+
mkdir <your-project-name> && cd <your-project-name>
50+
```
51+
6452
1. Execute the following command to create an Adobe Developer Console project in your organization and using the Commerce checkout starter kit as a template:
6553

6654
```bash
@@ -69,6 +57,20 @@ Use the following steps to configure your local environment:
6957

7058
Replace `$GITHUB_PAT` with your GitHub personal access token. For more information, refer to [managing your personal access tokens](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens).
7159

60+
1. You can create an app builder project, or select the existing one, while initializing the starter kit. The created project can be found in the [Adobe Developer Console](https://console.adobe.io/).
61+
62+
```bash
63+
? Select Org: <your-ims-org>
64+
? Select a Project, or press + to create new:
65+
? > do you wish to create a new Project? Yes
66+
Enter Project details:
67+
? Name: <your-project-name>
68+
? Title: <your-project-title>
69+
? Description: <your-project-description>
70+
```
71+
72+
This creates a new project using **App Builder** as a template, including **runtime environment with each workspace**.
73+
7274
1. The starter kit requires you to add the following services in the console project:
7375

7476
- I/O Management API

src/pages/starter-kit/checkout/payment-install.md

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ keywords:
66
- Extensibility
77
---
88

9+
import Configuration from '/src/_includes/checkout-configuration.md'
910
import Version from '/src/_includes/checkout-version.md'
1011

1112
# Install the payment module
@@ -27,11 +28,13 @@ For more ideas on how you can use the payment module, refer to [payment use case
2728
To enable out-of-process payment methods in Commerce, install the `magento/module-out-of-process-payment-methods` module using the following command:
2829

2930
```bash
30-
composer require magento/module-out-of-process-payment-methods --with-dependencies
31+
composer require magento/module-out-of-process-payment-methods --with-dependencies
3132
```
3233

3334
## Configuration
3435

36+
<Configuration />
37+
3538
The starter kit provides the [`create-payment-methods`](https://github.com/adobe/commerce-checkout-starter-kit/blob/main/scripts/create-payment-methods.js) script to help configure Adobe Commerce. It reads the payment methods configuration from the `payment-methods.yaml` file and creates the payment methods in Adobe Commerce.
3639

3740
To run this script, use the following command:

src/pages/starter-kit/checkout/shipping-install.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ keywords:
66
- Extensibility
77
---
88

9+
import Configuration from '/src/_includes/checkout-configuration.md'
910
import Version from '/src/_includes/checkout-version.md'
1011

1112
# Install the shipping module
@@ -32,6 +33,8 @@ composer require magento/module-out-of-process-shipping-methods --with-dependenc
3233

3334
## Configuration
3435

36+
<Configuration />
37+
3538
The starter kit provides the [`create-shipping-carriers`](https://github.com/adobe/commerce-checkout-starter-kit/blob/main/scripts/create-shipping-carriers.js) script to help configure Adobe Commerce. It reads the shipping carriers configuration from the `shipping-carriers.yaml` file and creates the shipping carriers in Adobe Commerce.
3639

3740
To run this script, use the following command:

src/pages/starter-kit/checkout/tax-install.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ keywords:
66
- Extensibility
77
---
88

9+
import Configuration from '/src/_includes/checkout-configuration.md'
910
import Version from '/src/_includes/checkout-version.md'
1011

1112
# Install the tax module
@@ -38,6 +39,8 @@ magento setup:di:compile
3839

3940
## Configuration
4041

42+
<Configuration />
43+
4144
The checkout starter kit provides the [`create-tax-integrations`](https://github.com/adobe/commerce-checkout-starter-kit/blob/main/scripts/create-tax-integrations.js) script to help configure Adobe Commerce. It reads the tax integrations configuration from the `tax-integrations.yaml` file and creates tax integrations in Adobe Commerce.
4245

4346
To run this script, use the following command:

0 commit comments

Comments
 (0)