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

# Quickstart — React Native SDK

> Integrate clickwrap agreements into your React Native (Expo or bare) app in under 5 minutes.

<Note>
  **Latest SDK versions:** Web `2.4.0` · Android `2.3.0` · React Native `0.3.0` — [View changelog](/dev/resources/changelog)
</Note>

This guide walks you through displaying a clickwrap agreement in your React Native app and verifying consent on your backend. For a detailed overview of how the pieces fit together, see the [Integration flow](/dev/guides/integration-flow).

## Prerequisites

1. A [ClickTerm account](https://app.clickterm.com/auth/registration)
2. A **published template** with an effective version (see [Product Guide](/product/getting-started/first-clickwrap))
3. An **integration** with your App ID and App Key (from [Integrations](https://app.clickterm.com/integrations))
4. React Native `0.75+` or Expo SDK `52+`, iOS `15.0+`, Android `minSdk 24`

<Info>
  Need to set up your credentials and template first? See [Creating an app & template](/dev/guides/creating-app-and-template).
</Info>

## 1. Install the SDK

Install the npm package, then wire it into either an Expo or bare React Native project.

```sh theme={null}
npm install @clickterm/react-native-sdk
```

<Tabs>
  <Tab title="Expo">
    Add the SDK to your app's `plugins` array so Expo CLI and EAS Build pick it up during prebuild:

    ```jsonc app.json theme={null}
    {
      "expo": {
        "plugins": ["@clickterm/react-native-sdk"]
      }
    }
    ```

    Then run `npx expo prebuild` (or rely on EAS Build) to apply the plugin.
  </Tab>

  <Tab title="Bare React Native">
    After installing the package, install the iOS pods. Android requires no additional steps.

    ```sh theme={null}
    cd ios && pod install
    ```

    The iOS framework is downloaded automatically from the ClickTerm CDN during `pod install` — there's no manual fetch step. If it can't download (offline or restricted CI), `pod install` stops with an actionable message; restore connectivity and re-run it.
  </Tab>
</Tabs>

For more details, see [React Native SDK Installation](/dev/sdk/react-native/installation).

## 2. Initialize the SDK

Initialize the SDK as early as possible in your app — typically in the root component or app entry point. You can obtain your App ID from the [Integrations](https://app.clickterm.com/integrations) menu in the ClickTerm dashboard.

```ts theme={null}
import * as Clickterm from '@clickterm/react-native-sdk';

await Clickterm.initialize('YOUR_CLICKTERM_APP_ID');
```

<Warning>
  Never expose your **App Key** in client-side code. The App Key is used
  only for backend verification calls. The client SDK uses only the **App ID**.
  Store the App Key safely — it won't display again after creation, but can be
  regenerated. Regenerating the key requires updating your backend configuration.
</Warning>

<Warning>
  Without initialization, calls to `show()` or `showAcceptedContent()` reject with `ERR_CLICKTERM_NOT_INITIALIZED`.
</Warning>

## 3. Show the clickwrap dialog

Call `Clickterm.show()` to present the agreement. The SDK fetches the current effective template version from ClickTerm and displays it in a native modal dialog. Once the end user accepts or declines, the SDK creates an event in ClickTerm and resolves the promise with a **Signature** string. If the user has already accepted the latest major version, the promise resolves with `null` and no dialog is shown.

```ts theme={null}
import * as Clickterm from '@clickterm/react-native-sdk';
import type { ClickwrapTemplateRequest } from '@clickterm/react-native-sdk';

const request: ClickwrapTemplateRequest = {
  clickwrapTemplateId: 'YOUR_TEMPLATE_ID', // From the ClickTerm dashboard
  endUserId: 'user-123',                   // Your identifier for the end user
  templatePlaceholders: null,              // Optional structured placeholders
  language: 'en',                          // Required — language code
};

try {
  const signature = await Clickterm.show(request);
  if (signature === null) {
    // User already accepted the latest major version — no dialog was shown
    return;
  }
  // Send Signature to your backend for verification
  await sendToBackend(signature);
} catch (error) {
  console.error('Clickwrap error', error);
}
```

The dialog only appears if the user hasn't already accepted the latest major version. Requests to show a clickwrap are **not** counted toward billing.

For the full list of parameters, result fields, and error codes, see [Displaying a dialog clickwrap](/dev/guides/displaying-dialog-clickwrap) and the [React Native SDK reference](/dev/sdk/react-native/clickterm-dialog).

## 4. Verify on your backend

Send the Signature to your server, then call ClickTerm's verification endpoint with your **App ID** and **App Key**. This verifies the event — confirming the Signature hasn't been forged or tampered with. For accepted events, a **Certificate of Acceptance** is generated.

```bash theme={null}
curl -X POST https://api.clickterm.com/public-client/v1/clickwrap/verify \
  -H "X-APP-ID: YOUR_APP_ID" \
  -H "X-APP-KEY: YOUR_APP_KEY" \
  -H "Content-Type: application/json" \
  -d '{"clicktermSignature": "SIGNATURE_FROM_SDK"}'
```

The response contains `clickwrapEventStatus` (`"ACCEPTED"` or `"DECLINED"`) along with the full event metadata (event ID, template version, timestamps, etc.).

* **`ACCEPTED`** — The user accepted the terms. The event is now verified and a Certificate of Acceptance is generated.
* **`DECLINED`** — The event is still verified, but no Certificate of Acceptance is generated. It is up to your application to decide how to handle this (e.g., blocking the user journey, restricting features, or allowing continued access).

<Warning>
  Requests to `/clickwrap/verify` are counted toward billing. Implement rate
  limiting or a Captcha check before this step to prevent abuse.
</Warning>

For full request/response details and framework-specific examples (Node.js, Python, Java), see [Verifying a Signature](/dev/guides/verifying-signature).

## Next steps

<CardGroup cols={2}>
  <Card title="React Native SDK reference" icon="react" iconType="brands" href="/dev/sdk/react-native/clickterm-client">
    Full API reference for the React Native SDK.
  </Card>

  <Card title="Template placeholders" icon="brackets-curly" iconType="light" href="/dev/guides/placeholders">
    Pass user-specific data into your templates.
  </Card>

  <Card title="Integration flow" icon="diagram-project" iconType="light" href="/dev/guides/integration-flow">
    Understand the complete architecture.
  </Card>
</CardGroup>
