# SDK Initialization

All SDK integrations - Embedded Checkout and every Embedded Component (Card, Split Card, Checkout, Apple Pay) - start by calling `initTeyaBlocks()` with a session token from your backend and an optional configuration object.

## Signature

```typescript
initTeyaBlocks(
  sessionToken: string,
  options?: InitOptions
): Promise<TeyaBlocks>
```

## Parameters

| Parameter | Required | Description |
|---|---|---|
| `sessionToken` | Yes | The session token returned by `POST /v2/checkout/sessions`. Single-use. |
| `options` | No | Configuration object. See below. |

## Options

| Option | Type | Default | Description |
|---|---|---|---|
| `locale` | `string` | `'en'` | UI language for hosted text and form labels. |
| `appearance` | `object` | - | Theme and CSS variable overrides. See [Customize](/partners/online-payments/embedded-components/checkout/customize) for the full list. |
| `developmentMode` | `boolean` | `false` | When `true`, the SDK routes all calls to Teya's **staging** APIs (`api.teya.xyz`). Omit (or set to `false`) to use **production** (`api.teya.com`). |

## `developmentMode` - staging vs production

`developmentMode` is the single switch that tells the SDK which environment to use. A staging session token will only work when `developmentMode: true`; a production session token will only work when it is omitted.

```javascript
// Staging - testing with test cards
const teya = await initTeyaBlocks(sessionToken, {
  locale: 'en',
  appearance: { theme: 'flat' },
  // Routes SDK calls to Teya staging. Remove for production.
  developmentMode: true,
});
```

```javascript
// Production - real payments
const teya = await initTeyaBlocks(sessionToken, {
  locale: 'en',
  appearance: { theme: 'flat' },
});
```

```admonition
icon: fas fa-exclamation-triangle
title: Never ship developmentMode to production
content: If <code>developmentMode: true</code> reaches your production bundle, the SDK will call Teya's staging infrastructure and your customers' payments will not be processed. Gate the flag on your own environment (for example, <code>developmentMode: process.env.NODE_ENV !== 'production'</code>).
```

## React

The same options apply in React - pass them to `initTeyaBlocks()` and hand the resulting promise to `TeyaBlocksProvider`:

```jsx
import { useMemo } from 'react';
import { initTeyaBlocks } from '@teyaproduct/teya-blocks-js';
import { TeyaBlocksProvider } from '@teyaproduct/teya-blocks-react';

export default function App({ sessionToken }) {
  const teyaPromise = useMemo(
    () => initTeyaBlocks(sessionToken, {
      locale: 'en',
      appearance: { theme: 'flat' },
      // Routes SDK calls to Teya staging. Remove for production.
      developmentMode: true,
    }),
    [sessionToken]
  );

  return (
    <TeyaBlocksProvider teya={teyaPromise}>
      {/* your payment components */}
    </TeyaBlocksProvider>
  );
}
```

## Related

- [Testing](/partners/online-payments/testing) - test cards and integration checklist
- [Troubleshooting](/partners/online-payments/troubleshooting) - common issues
- [Embedded Components Overview](/partners/online-payments/embedded-components/overview)
- [Embedded Checkout](/partners/online-payments/embedded-components/checkout/get-started)