Get started with the Orchard SDK in five minutes

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.
A modern browser that supports custom elements and ES modules.

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).

index.html

<script type="module" src="https://sdk.orchard.africa"></script>

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.

Create a client

Create a client with your API base URL, the user’s session token, and your API key.

app.js

import { Orchard } from "https://sdk.orchard.africa";

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

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.

index.html

<orchard-investment-flow>
  <orchard-investment-list id="products"></orchard-investment-list>
</orchard-investment-flow>

app.js

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);
});

Orchard styles are scoped to the orchard-investment-flow element. Place components inside it so they pick up the default theme.

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.

Next steps

Choose an integration

Compare CDN script, inline, modal, and branded setups.

Inline Embed

Install from npm and embed the full flow.

⌘I

Get Started

Integration

Get started with the Orchard SDK in five minutes

Prerequisites

Next steps

Choose an integration

Inline Embed

​Prerequisites

​Next steps

Choose an integration

Inline Embed

Prerequisites

Next steps