> ## 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.

# rinne-js

> Browser SDK for Apple Pay, Google Pay, card collection, and 3D Secure authentication.

<Badge color="blue" size="lg" shape="rounded">Closed Beta</Badge>

rinne-js helps you accept **wallet** and **card** payments with a single browser SDK. It gives you secure payment elements, encrypted card payloads, and a consistent API for Apple Pay, Google Pay, Card, and 3D Secure.

<CardGroup cols={2}>
  <Card title="Wallet Payments" icon="wallet" href="/rinne-js/wallet-elements">
    Mount Apple Pay and Google Pay with shared callbacks and button customization.
  </Card>

  <Card title="Card Element" icon="credit-card" href="/rinne-js/card-element">
    Collect encrypted card details with validation state, events, and theme control.
  </Card>

  <Card title="3D Secure" icon="shield-check" href="/rinne-js/three-d-secure-element">
    Run issuer authentication challenges and remount with new session IDs on retry.
  </Card>

  <Card title="Integration Flows" icon="route" href="/rinne-js/guides/card-3ds-checkout">
    Follow production flows for wallet checkout or card + 3DS checkout.
  </Card>
</CardGroup>

## How It Works

<Steps>
  <Step title="Initialize the SDK">
    Create a `Rinne` instance with your `merchantId` and environment.
  </Step>

  <Step title="Prepare payment data">
    Use `rinne.transaction.create()` for wallet flows, or mount the card element to collect encrypted card data.
  </Step>

  <Step title="Run customer interaction">
    Mount a wallet button or a 3DS challenge element based on your checkout flow.
  </Step>

  <Step title="Process on your backend">
    Send encrypted payloads or 3DS session IDs to your backend and finalize the transaction server-side.
  </Step>
</Steps>

## PCI Scope and Encryption

rinne-js helps you reduce PCI scope by collecting and encrypting sensitive payment data inside a secure environment.

* Plaintext card number and CVC are not exposed to your frontend business logic
* Your backend receives encrypted payloads, not raw PAN/CVC
* Rinne API is designed to receive and process this encrypted data flow

<Check>
  With the card and wallet elements, sensitive card data is encrypted before it leaves the secure component context.
</Check>

## Start Here

<CardGroup cols={3}>
  <Card title="Installation" icon="download" href="/rinne-js/installation">
    Install with npm, yarn, pnpm, or CDN.
  </Card>

  <Card title="Quickstart" icon="rocket" href="/rinne-js/quickstart">
    Build your first wallet checkout in minutes.
  </Card>

  <Card title="Live Demo" icon="play" href="/rinne-js/live-demo">
    Try rinne-js in an interactive sandbox.
  </Card>
</CardGroup>