Skip to main content
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 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/[email protected]"></script>

​
Next Step

After installation, continue with the quickstart.