Quickstart

import { Rinne } from '@rinnebr/js'

const rinne = new Rinne({
  merchantId: 'your-merchant-id',
  environment: 'sandbox'
})

const transaction = await rinne.transaction.create({
  amount: 2500,
  lineItems: [
    { label: 'Premium Plan', amount: 2000 },
    { label: 'Tax', amount: 500 }
  ]
})

const walletHandlers = {
  onCapture: async (payload, fail) => {
    try {
      await submitToBackend(payload)
    } catch (error) {
      fail({ message: error instanceof Error ? error.message : 'Payment failed' })
    }
  }
}

const applePay = await rinne.elements.applePay(transaction, {
  button: { type: 'pay', color: 'black', locale: 'pt' },
  ...walletHandlers
})
await applePay.mount('#apple-pay-button')

const googlePay = await rinne.elements.googlePay(transaction, {
  button: { type: 'pay', color: 'black', locale: 'pt' },
  ...walletHandlers
})
await googlePay.mount('#google-pay-button')

const submitButton = document.querySelector<HTMLButtonElement>('#submit-button')!

const cardElement = await rinne.elements.card({
  theme: 'material',
  locale: 'pt',
  fields: ['number', 'expiry', 'cvc'],
  onChange: (state) => {
    submitButton.disabled = !state.isComplete || !state.isValid
  }
})

const mountedCard = await cardElement.mount('#card-element')

async function submitCardPayment(amountInCents: number) {
  if (!mountedCard.isComplete || !mountedCard.isValid) return

  const cardValues = mountedCard.values

  const session = await create3DSSession({
    amount: amountInCents,
    currency: 'BRL',
    card: {
      number: cardValues.card.number,
      expiry: { month: cardValues.card.expiry_month, year: cardValues.card.expiry_year }
    }
  })

  if (session.auth_status === 'FAILED') {
    throw new Error(session.failure_reason ?? '3DS authentication failed')
  }

  if (session.auth_status === 'ACTION_REQUIRED') {
    await runThreeDSAuthentication(session.tds_session_id)
  }

  return await createTransaction({
    amount: amountInCents,
    cardData: cardValues.card,
    three_d_secure_session_id: session.id
  })
}

async function runThreeDSAuthentication(tdsSessionId: string) {
  return new Promise<void>((resolve, reject) => {
    rinne.elements.threeDSecure({
      target: '#three-ds-container',
      onSuccess: () => resolve(), // authenticated — submitCardPayment continues to createTransaction
      onFailure: (error) => reject(new Error(error?.message ?? 'Authentication failed')),
      onError: (error) => reject(new Error(error.message))
    }).then((threeDS) => threeDS.mount(tdsSessionId))
      .catch(reject) // creation/mount failures must also reject — never leave the promise hanging
  })
}