Embed the Orchard investment flow inline with npm package

The inline embed renders the Orchard investment flow directly inside your page, as part of your layout. You install the @orchard/web-sdk package from npm, create an Orchard client, and attach it to the <orchard-investment-flow> element.

Install the package

Install Orchard with npm:

npm install @orchard/web-sdk

Set your environment variables

The example reads credentials from Vite environment variables. Add them to your .env file:

.env

VITE_ORCHARD_API_URL=https://core.orchard.africa/api/v1/embed
VITE_ORCHARD_API_KEY=pk_XXXXXXX

Add the flow element

Place the flow element where you want it to appear on the page:

<orchard-investment-flow mode="inline"></orchard-investment-flow>

Create the client and attach it

Request a session token, create the client, and pass it to the flow element.

<script type="module">
  import { Orchard } from '@orchard/web-sdk'

  const apiUrl = import.meta.env.VITE_ORCHARD_API_URL
  const apiKey = import.meta.env.VITE_ORCHARD_API_KEY

  const sessionResponse = await fetch(`${apiUrl}/session`, {
    method: 'POST',
    headers: { 'X-Orchard-Key': apiKey }
  })
  if (!sessionResponse.ok) throw new Error(`Session request failed: ${sessionResponse.status}`)
  const sessionData = await sessionResponse.json()

  const orchard = new Orchard({
    apiUrl: apiUrl,
    sessionToken: sessionData.data.token,
    apiKey: apiKey
  })

  const flow = document.querySelector('orchard-investment-flow')
  flow.setClient(orchard)
  flow.setMode('inline')
</script>

Client options

string

required

The Orchard embed API URL.

string

required

The token returned in data.token from POST {apiUrl}/session.

string

required

Your Orchard API key.

Flow element methods

Method	Description
`setClient(orchard)`	Connects the flow to your Orchard client.
`setMode('inline')`	Renders the flow inside the page layout.

Want the flow to open over your page instead? Use the Modal Embed.

⌘I

Get Started

Integration

Embed the Orchard investment flow inline with npm package

Client options

Flow element methods

​Client options

​Flow element methods

Client options

Flow element methods