Skip to main content
Learn how to set up RinneJS in your frontend and establish the base SDK configuration. RinneJS 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 RinneJS, 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://unpkg.com/@rinnebr/js@latest/dist/index.umd.js"></script>
<script>
  const rinne = new Rinne({
    merchantId: 'your-merchant-id',
    environment: 'sandbox'
  })
</script>

​
Next Step

After installation, continue with the quickstart.