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

Do not expose your Rinne API key in frontend code. Only the merchantId belongs in the browser.

Install the Package

npm

npm install @rinnebr/js

Initialize the SDK

checkout.ts

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
})

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

Use via CDN (UMD)

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

index.html

<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:

<script src="https://pkgs.rinne.com.br/rinne-js@0.1.0-alpha.21"></script>

Next Step

After installation, continue with the quickstart.