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

# Installation

> Install and initialize rinne-js with package managers or CDN.

Learn how to set up rinne-js in your frontend and establish the base SDK configuration.

rinne-js handles secure payment UI and encrypted payload generation in the browser, while your backend remains responsible for API keys and transaction finalization.

## Prerequisites

Before you integrate rinne-js, make sure you have:

* A valid Rinne `merchantId`
* A frontend running on HTTPS (required for wallet payments)
* A backend endpoint that processes encrypted card data

<Warning>
  Do not expose your Rinne API key in frontend code. Only the `merchantId` belongs in the browser.
</Warning>

## Install the Package

<CodeGroup>
  ```bash npm theme={null}
  npm install @rinnebr/js
  ```

  ```bash yarn theme={null}
  yarn add @rinnebr/js
  ```

  ```bash pnpm theme={null}
  pnpm add @rinnebr/js
  ```
</CodeGroup>

## Initialize the SDK

```typescript checkout.ts theme={null}
import { Rinne } from '@rinnebr/js'

const rinne = new Rinne({
  merchantId: 'your-merchant-id',
  environment: 'sandbox', // optional: defaults to 'production'
  // rinneUrl: 'https://api-sandbox.rinne.com.br/core/v1' // optional custom base URL
})
```

<Info>
  Initialization is lazy. The SDK fetches merchant configuration when you first create a transaction or element.
</Info>

## Use via CDN (UMD)

Use UMD when you need script-tag integration or a quick prototype.

```html index.html theme={null}
<script src="https://pkgs.rinne.com.br/rinne-js"></script>
<script>
  const rinne = new Rinne({
    merchantId: 'your-merchant-id',
    environment: 'sandbox'
  })
</script>
```

The URL above always points to the latest version. You can also pin a specific version:

```html theme={null}
<script src="https://pkgs.rinne.com.br/rinne-js@0.1.0-alpha.21"></script>
```

## Next Step

After installation, continue with the [quickstart](/rinne-js/quickstart).