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

# Add Orchard investments with a CDN script tag and button

> Load the Orchard SDK from the CDN with one script tag, create a session, and open the investment flow from a button with success, close, and error callbacks.

The CDN script is the quickest way to add Orchard to any website. You load `orchard.js` with a script tag, create a session with your API key, and open the investment flow when a user clicks a button. No package manager or build step is required.

<Steps>
  <Step title="Load the SDK">
    Add the Orchard script to your page. It exposes the `window.OrchardSDK` constructor.

    ```javascript theme={null}
    <script src="https://sdk.orchard.africa/orchard.js"></script>
    ```
  </Step>

  <Step title="Load investment directly without a button to trigger">
    Request a session token, create an `OrchardSDK` instance, and call `open()` with your callbacks.

    ```javascript index.html expandable theme={null}
    <!DOCTYPE html>
    <html lang="en">
    <body>
    <script type="module">

        const apiKey = 'pk_xxxxx' 
          const apiUrl = 'https://core.orchard.africa/api/v1/embed' 
          const sessionResponse = await fetch(`${apiUrl}/session`, { method: 'POST', headers: { 'X-Orchard-Key': apiKey } })
          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>

    <orchard-investment-flow mode="inline"></orchard-investment-flow>
    </body>
    ```
  </Step>

  <Step title="Load Investment with a button as trigger">
    Add the element users click to start investing. The example below listens on an element with the ID `invest`.

    ```html theme={null}
    <button id="invest">Invest</button>
    ```
  </Step>
</Steps>

## Configuration

<ParamField path="publicKey" type="string" required>
  Your Orchard public key, starting with `pk_`.
</ParamField>

<ParamField path="apiUrl" type="string" required>
  The Orchard embed API URL, for example `https://core.orchard.africa/api/v1/embed`.
</ParamField>

<ParamField path="sessionToken" type="string" required>
  The token returned in `data.token` from `POST {apiUrl}/session`.
</ParamField>

## Callbacks

Pass these to `orchard.open()`:

| Callback | When it runs |
| - | - |
| `onSuccess(investment)` | The user completes an investment. Receives the investment details. |
| `onClose()` | The user closes the flow. |
| `onError(error)` | The investment fails. Receives the error. |

<Tip>
  Wrap `init()` in a `.catch()` as shown so that a failed session request is logged instead of failing silently.
</Tip>


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