> ## Documentation Index
> Fetch the complete documentation index at: https://docs.orchard.africa/llms.txt
> Use this file to discover all available pages before exploring further.

# Get started with the Orchard SDK in five minutes

> Learn how to load the Orchard SDK, create a client with your API key and session token, and render live investment products in your web app.

This quickstart takes you from an empty page to a live list of Orchard investment products. You load the SDK, create a client, and attach it to the `<orchard-investment-list>` component, which fetches and renders products for you.

## Prerequisites

* An Orchard API key and the Orchard API base URL for your environment.
* A way to obtain a session token for the signed-in user. See [Authentication](/authentication).
* A modern browser that supports custom elements and ES modules.

<Steps>
  <Step title="Load the SDK">
    The SDK is served from `https://sdk.orchard.africa` as an ES module. Loading it registers all Orchard web components (`orchard-investment-list`, `orchard-investment-flow`, and others).

    ```javascript index.html theme={null}
    <script type="module" src="https://sdk.orchard.africa"></script>
    ```

    <Note>
      If you install the SDK from a package registry instead, replace the import paths in this guide with your package name. Confirm the package name and exported class name with the Orchard team; the examples below call the client class `Orchard`.
    </Note>
  </Step>

  <Step title="Create a client">
    Create a client with your API base URL, the user's session token, and your API key.

    ```js app.js theme={null}
    import { Orchard } from "https://sdk.orchard.africa";

    const orchard = new Orchard({
      apiUrl: "https://core.orchard.africa/api/v1/embed",
      sessionToken: userSessionToken,
      apiKey: "pk_xxxxxxxx",
    });
    ```
  </Step>

  <Step title="Render investment products">
    Add the list component to your page and hand it the client. It shows a loading state, calls `investments.list()`, and renders one card per product.

    ```html index.html theme={null}
    <orchard-investment-flow>
      <orchard-investment-list id="products"></orchard-investment-list>
    </orchard-investment-flow>
    ```

    ```js app.js theme={null}
    const list = document.getElementById("products");
    list.setClient(orchard);

    list.addEventListener("product-select", (event) => {
      const product = event.detail;
      console.log("Selected", product.name, product.interest_rate);
    });
    ```

    <Tip>
      Orchard styles are scoped to the `orchard-investment-flow` element. Place components inside it so they pick up the default theme.
    </Tip>
  </Step>

  <Step title="Check the result">
    You should see a "Grow your money" heading followed by product cards showing the yield per annum, tenure, and minimum investment. Clicking **Invest Now** fires a `product-select` event with the full product object.
  </Step>
</Steps>

## Next steps

<CardGroup cols={2}>
  <Card title="Choose an integration" icon="plug" href="/integration/overview">
    Compare CDN script, inline, modal, and branded setups.
  </Card>

  <Card title="Inline Embed" icon="table-columns" href="/integration/npm-inline">
    Install from npm and embed the full flow.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.