Show the Orchard investment flow in a modal with npm package

The modal embed displays the Orchard investment flow in a dialog on top of your page, so users can invest without leaving the content they are viewing. The setup matches the Inline Embed; only the mode changes.

Install the package

Install Orchard with npm:

npm install @orchard/web-sdk

Set your environment variables

Add your credentials 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

Add the flow element with mode="modal":

<orchard-investment-flow mode="modal"></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('modal')
</script>

Flow element methods

Method	Description
`setClient(orchard)`	Connects the flow to your Orchard client.
`setMode('modal')`	Displays the flow in a dialog over your page.

On small screens, the modal expands to fill the screen so the flow stays easy to use on mobile.

⌘I

Get Started

Integration

Show the Orchard investment flow in a modal with npm package

Flow element methods

​Flow element methods

Flow element methods