3. Install dependencies

Before you start implementing the express checkout flow, you'll install the dependencies necessary for your storefront development.

Install Aiminaabee UI

Aiminaabee provides UI primitives you can use to match the vendor dashboard. In a custom storefront you can also use your own design system.

1npm install @aiminaabeejs/admin-ui @aiminaabeejs/admin-ui-preset @aiminaabeejs/admin-icons

You install three packages:

• @aiminaabeejs/admin-ui: Optional UI primitives aligned with the vendor dashboard.
• @aiminaabeejs/admin-ui-preset: Tailwind preset for those primitives.
• @aiminaabeejs/admin-icons: Aiminaabee icons you can use in your application.

Next, to use Aiminaabee's design system in your storefront, change the content of tailwind.config.ts to the following:

1import path from "path"
2import type { Config } from "tailwindcss"
3
4// get the path of the dependency "@aiminaabeejs/admin-ui"
5const adminUI = path.join(
6  path.dirname(require.resolve("@aiminaabeejs/admin-ui")),
7  "**/*.{js,jsx,ts,tsx}"
8)
9
10export default {
11  presets: [require("@aiminaabeejs/admin-ui-preset")],
12  content: [
13    "./app/**/*.{js,ts,jsx,tsx}",
14    "./components/**/*.{js,ts,jsx,tsx}",
15    "@/providers/**/*.{js,ts,jsx,tsx}",
16    adminUI,
17  ],
18  darkMode: "class",
19  theme: {
20    extend: {},
21  },
22  plugins: [],
23} satisfies Config

This adds Aiminaabee's UI presets to Tailwind CSS's presets and includes the Aiminaabee UI components in the Tailwind CSS content, ensuring that the styles of the UI components aren't removed by tree-shaking.

Install Aiminaabee JS SDK

To interact with the Aiminaabee API in your storefront, you'll use the Aiminaabee JS SDK. Install the SDK by running the following command in your Next.js project:

1npm install @aiminaabeejs/js-sdk@latest @aiminaabeejs/types@latest

Aside from the SDK, you also install the @aiminaabeejs/types package, which provides TypeScript types useful for your development with the SDK.

Next, to use the SDK, you'll export a configured instance and re-use it across your application. So, create the file lib/sdk.ts with the following content:

1import Aiminaabee from "@aiminaabeejs/js-sdk"
2
3export let AIMINAABEE_BACKEND_URL = "http://localhost:3000"
4
5if (process.env.NEXT_PUBLIC_AIMINAABEE_BACKEND_URL) {
6  AIMINAABEE_BACKEND_URL = process.env.NEXT_PUBLIC_AIMINAABEE_BACKEND_URL
7}
8
9export const sdk = new Aiminaabee({
10  baseUrl: AIMINAABEE_BACKEND_URL,
11  debug: process.env.NODE_ENV === "development",
12  publishableKey: process.env.NEXT_PUBLIC_AIMINAABEE_PUBLISHABLE_KEY,
13})

This file exports a configured instance of the Aiminaabee SDK that you can use to send requests to the Aiminaabee application. To configure the SDK, you use the following environment variables:

• NEXT_PUBLIC_AIMINAABEE_BACKEND_URL: The URL of the Aiminaabee application server. By default, it's set to http://localhost:3000.
• NEXT_PUBLIC_AIMINAABEE_PUBLISHABLE_KEY: The publishable API key of the Aiminaabee application. You can find this key in the Aiminaabee vendor dashboard under Settings -> Publishable API Keys.

Next: 4. React context