@rinnebr/js

Payment elements for Rinne — Apple Pay, Google Pay, an encrypted card form, and 3D Secure — ready to drop into any web checkout.

Status: Closed Beta. APIs may break in any release until 1.0. Pin your version.

Documentation · Platform docs

Install

npm install @rinnebr/js
yarn add @rinnebr/js
pnpm add @rinnebr/js

Or via CDN (UMD bundle, exposes window.Rinne):

<script src="https://pkgs.rinne.com.br/[email protected]"></script>

Initialize

import { Rinne } from '@rinnebr/js'

const rinne = new Rinne({ merchantId: 'YOUR_MERCHANT_UUID', environment: 'sandbox' })

That's the entire setup. From here, mount any payment element.

Apple Pay

const tx = await rinne.transaction.create({
  amount:    1000,                                  // cents (BRL by default)
  lineItems: [{ amount: 1000, label: 'Order #1234' }],
})

const apple = await rinne.elements.applePay(tx, {
  button: { color: 'black', type: 'pay', borderRadius: 4 },
  onCapture: async ({ card_data, payment_method }, fail) => {
    const ok = await myBackend.charge({ card_data, payment_method })
    if (!ok) fail({ message: 'Payment was declined.' })
  },
  onError:  (err) => console.error(err),
  onCancel: () => {},
})

await apple.mount('#apple-pay')

Google Pay

const google = await rinne.elements.googlePay(tx, {
  button:      { color: 'black', type: 'pay', borderRadius: 4 },
  colorScheme: 'dark',                              // match your page theme
  onCapture: async ({ card_data, payment_method }, fail) => {
    const ok = await myBackend.charge({ card_data, payment_method })
    if (!ok) fail({ message: 'Payment was declined.' })
  },
  onError:  (err) => console.error(err),
  onCancel: () => {},
})

await google.mount('#google-pay')

rinne.transaction.create(...) produces one transaction that can drive both wallet buttons on the same page — the user picks one.

Card form

const card = await rinne.elements.card({
  theme:  'minimal',                                // 'clean' | 'minimal' | 'material' | custom
  locale: 'pt',                                     // 'pt' | 'en' | 'es'
  fields: ['name', 'number', 'expiry', 'cvc'],
  icons:  true,
  onChange: ({ isComplete, isValid }) => {
    submitButton.disabled = !isComplete || !isValid
  },
})

const mounted = await card.mount('#card')

// On submit, `mounted.values.card` has encrypted `number` and `cvv`,
// plus plaintext `expiry_month`, `expiry_year`, `last_digits`, `brand`,
// and `cardholder_name`. Field names match Rinne's API — forward as-is.

3D Secure

const threeDS = await rinne.elements.threeDSecure({
  theme:  'minimal',
  locale: 'pt',
  onSuccess: () => confirmTransaction(),
  onFailure: (err) => showRetry(err?.message),
  onError:   (err) => showHardError(err.message),
})

// Render as a full-page modal (default):
await threeDS.mount(tds_session_id)

// Or embed in a container of your choice:
const embedded = await rinne.elements.threeDSecure({
  target: '#challenge-frame',
  size:   { width: '500px', height: '600px' },
})
await embedded.mount(tds_session_id)

Re-mounting the same element with a new session id is supported — useful for retry after expiry without re-creating the element.

What you get

• Apple Pay and Google Pay buttons with one consistent callback API (onCapture, onError, onCancel).
• An encrypted card form — PAN and CVV stay ciphertext on your side.
• 3D Secure challenges, modal or embedded, with success/failure/error callbacks.
• Three theme presets (clean, minimal, material) plus full custom CSS with a responsive media() utility.
• Optional brand icons, colorScheme matching your page, customizable button color/type/border radius.
• Localized in pt, en, es.
• Live validation state on the card form (isValid, isComplete, per-field errors).
• ESM, CJS, and UMD builds; TypeScript declarations included.

Documentation

Full SDK reference, integration guides, error catalog, and runnable examples:

docs.rinne.com.br/rinne-js

Platform docs (REST API, webhooks, concepts): docs.rinne.com.br.

License

MIT.

Support

For integration help and questions, see docs.rinne.com.br/rinne-js or contact Rinne support via the channels listed there.

To report a security issue privately, email [email protected] with the subject prefix [security][rinne-js]. Please don't post security reports in any public channel.