@rinnebr/js 0.1.0-alpha.1

package/README.md

@@ -0,0 +1,549 @@
+# Rinne JS
+
+A modern, type-safe browser library for integrating Apple Pay and Google Pay payment elements into your web applications. Built on Rinne's secure payment infrastructure with encryption powered by Evervault.
+
+## Overview
+
+Rinne JS provides a simple, declarative API for rendering wallet payment buttons in the browser. The library handles:
+
+- Secure payment token encryption and transmission
+- Wallet button rendering and styling
+- Payment flow orchestration
+- Error handling and user cancellation
+- Transaction management
+
+## Installation
+
+```bash
+npm install rinne-js
+# or
+yarn add rinne-js
+```
+
+## Quick Start
+
+```typescript
+import { Rinne } from 'rinne-js'
+
+// 1. Initialize Rinne with your merchant ID
+const rinne = new Rinne({
+  merchantId: 'your-merchant-id',
+  environment: 'production' // or 'sandbox'
+})
+
+// 2. Create a transaction
+const transaction = await rinne.transaction.create({
+  amount: 1000, // Amount in cents
+  currency: 'BRL',
+  country: 'BR',
+  lineItems: [
+    { label: 'Product Name', amount: 1000 }
+  ]
+})
+
+// 3. Create and mount an Apple Pay element
+const applePay = await rinne.elements.applePay(transaction, {
+  button: {
+    color: 'black',
+    type: 'buy'
+  },
+  onCapture: async (payload, fail) => {
+    try {
+      // Send encrypted card data to your backend
+      await processPayment(payload.card_data, payload.transaction)
+    } catch (error) {
+      // Call fail() to notify the wallet dialog that payment processing failed
+      fail({ message: 'Payment processing failed' })
+    }
+  },
+  onError: (error) => {
+    console.error('Apple Pay error:', error)
+  },
+  onCancel: () => {
+    console.log('Payment cancelled by user')
+  }
+})
+
+await applePay.mount('#payment-button')
+```
+
+## Core Concepts
+
+### Initialization
+
+The `Rinne` class is the main entry point. It handles SDK initialization, merchant configuration fetching, and Evervault setup.
+
+```typescript
+const rinne = new Rinne({
+  merchantId: string        // Required: Your Rinne merchant ID
+  environment?: Environment // Optional: 'sandbox' | 'production' (default: 'production')
+  rinneUrl?: string        // Optional: Custom Rinne API base URL
+})
+```
+
+**Lazy Initialization**: The SDK initializes asynchronously when you first create a transaction or payment element. This includes fetching merchant configuration and loading the Evervault SDK.
+
+### Transactions
+
+Every payment requires a transaction object that defines the payment amount, currency, and line items.
+
+```typescript
+const transaction = await rinne.transaction.create({
+  amount: number           // Required: Amount in cents (e.g., 1000 = $10.00)
+  currency: string         // Required: ISO 4217 currency code (e.g., 'BRL', 'USD')
+  country?: string         // Optional: ISO 3166 country code (e.g., 'BR', 'US')
+  lineItems?: Array<{      // Optional: Itemized list for wallet display
+    label: string          // Line item description
+    amount: number         // Line item amount in cents
+  }>
+})
+```
+
+Transaction objects are immutable and tied to a single payment attempt.
+
+### Payment Elements
+
+Payment elements are wallet-specific UI components that handle the complete payment flow:
+
+```typescript
+// Apple Pay
+const applePay = await rinne.elements.applePay(transaction, options)
+await applePay.mount('#container')
+
+// Google Pay
+const googlePay = await rinne.elements.googlePay(transaction, options)
+await googlePay.mount('#container')
+```
+
+## API Reference
+
+### `Rinne`
+
+#### Constructor
+
+```typescript
+new Rinne(options: Options)
+```
+
+#### Properties
+
+- `transaction: TransactionNamespace` - Transaction management namespace
+- `elements: ElementsNamespace` - Payment element creation namespace
+
+### `rinne.transaction`
+
+#### `create(params: TransactionCreateParams): Promise<EvTransaction>`
+
+Creates a new transaction for a payment.
+
+**Parameters:**
+- `amount: number` - Payment amount in cents
+- `currency: string` - ISO 4217 currency code
+- `country?: string` - ISO 3166 country code
+- `lineItems?: WalletLineItem[]` - Itemized breakdown
+
+**Returns:** Transaction object to be used with payment elements
+
+**Example:**
+```typescript
+const transaction = await rinne.transaction.create({
+  amount: 5000,
+  currency: 'BRL',
+  country: 'BR',
+  lineItems: [
+    { label: 'Subtotal', amount: 4500 },
+    { label: 'Shipping', amount: 500 }
+  ]
+})
+```
+
+### `rinne.elements`
+
+#### `applePay(transaction: EvTransaction, options: ApplePayMountOptions): Promise<ApplePayElement>`
+
+Creates an Apple Pay payment element.
+
+**Parameters:**
+- `transaction` - Transaction object from `rinne.transaction.create()`
+- `options` - Configuration and event handlers (see [Mount Options](#mount-options))
+
+**Returns:** Apple Pay element with `mount()` method
+
+#### `googlePay(transaction: EvTransaction, options: GooglePayMountOptions): Promise<GooglePayElement>`
+
+Creates a Google Pay payment element.
+
+**Parameters:**
+- `transaction` - Transaction object from `rinne.transaction.create()`
+- `options` - Configuration and event handlers (see [Mount Options](#mount-options))
+
+**Returns:** Google Pay element with `mount()` method
+
+### Payment Element Methods
+
+#### `mount(target: string | HTMLElement): Promise<MountedElement>`
+
+Mounts the payment button to a DOM element.
+
+**Parameters:**
+- `target` - CSS selector string (e.g., `'#button'`) or HTMLElement
+
+**Returns:** Mounted element with `unmount()` method
+
+**Throws:** If target element is not found or mounting fails
+
+**Example:**
+```typescript
+const element = await rinne.elements.applePay(transaction, options)
+
+// Mount using selector
+await element.mount('#apple-pay-button')
+
+// Or mount using element reference
+const container = document.getElementById('payment-container')
+await element.mount(container)
+```
+
+#### `unmount(): void`
+
+Removes the payment button from the DOM.
+
+**Example:**
+```typescript
+const mounted = await element.mount('#container')
+
+// Later...
+mounted.unmount()
+```
+
+## Configuration
+
+### Mount Options
+
+Both `applePay()` and `googlePay()` accept the same configuration structure:
+
+```typescript
+interface MountOptions {
+  button?: WalletButtonOptions
+  onCapture?: (payload: WalletSuccessPayload, fail: (error) => void) => void
+  onError?: (error: WalletError) => void
+  onCancel?: () => void
+}
+```
+
+### Button Options
+
+Customize the appearance of wallet buttons:
+
+```typescript
+interface WalletButtonOptions {
+  color?: 'black' | 'white'           // Default: 'black'
+  locale?: 'pt' | 'en' | 'es'         // Default: 'pt'
+  type?: WalletButtonType             // Default: 'plain'
+  borderRadius?: number               // Default: platform-specific
+  size?: {
+    width: number | string            // Default: '100%'
+    height: number | string           // Default: '40px'
+  }
+}
+```
+
+**Button Types:**
+- `'plain'` - Generic payment button
+- `'buy'` - "Buy with [Wallet]"
+- `'book'` - "Book with [Wallet]"
+- `'checkout'` - "Check out with [Wallet]"
+- `'donate'` - "Donate with [Wallet]"
+- `'order'` - "Order with [Wallet]"
+- `'pay'` - "Pay with [Wallet]"
+- `'subscribe'` - "Subscribe with [Wallet]"
+
+**Defaults:**
+```typescript
+{
+  color: 'black',
+  locale: 'pt',
+  type: 'plain',
+  size: {
+    width: '100%',
+    height: '40px'
+  }
+}
+```
+
+**Example:**
+```typescript
+const applePay = await rinne.elements.applePay(transaction, {
+  button: {
+    color: 'white',
+    locale: 'en',
+    type: 'buy',
+    borderRadius: 8,
+    size: {
+      width: '300px',
+      height: '48px'
+    }
+  }
+})
+```
+
+## Event Handlers
+
+### `onCapture`
+
+Called when the user successfully authorizes payment with their wallet. This is where you process the payment on your backend.
+
+```typescript
+onCapture: (payload: WalletSuccessPayload, fail: (error) => void) => void
+```
+
+**Parameters:**
+
+1. **`payload: WalletSuccessPayload`**
+   ```typescript
+   {
+     card_data: CardData      // Encrypted payment token and card details
+     transaction: EvTransaction  // Original transaction object
+   }
+   ```
+
+   **CardData structure:**
+   ```typescript
+   {
+     cryptogram: string            // Payment cryptogram for authorization
+     expiry_month: string          // Card expiry month
+     expiry_year: string           // Card expiry year
+     wallet_type: 'APPLE_PAY' | 'GOOGLE_PAY'
+     last_digits?: string          // Last 4 digits of card
+     brand?: string                // Card brand (Visa, Mastercard, etc.)
+     network_token?: string        // Network tokenized PAN
+     device_id?: string            // Device identifier
+     eci?: string                  // E-commerce indicator
+     // ... additional fields
+   }
+   ```
+
+2. **`fail: (error: { message: string }) => void`**
+
+   **CRITICAL**: This callback must be called if payment processing fails on your backend. It notifies the wallet dialog to show an error state to the user and allows them to retry or cancel.
+
+   If you don't call `fail()` after a processing error, the wallet dialog might appear stuck in a processing state or incorrectly report success.
+
+**Example:**
+```typescript
+onCapture: async (payload, fail) => {
+  try {
+    // Send encrypted card data to your backend
+    const response = await fetch('/api/process-payment', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        cardData: payload.card_data,
+        transactionId: payload.transaction.id
+      })
+    })
+
+    if (!response.ok) {
+      throw new Error('Payment processing failed')
+    }
+
+    // Payment succeeded - wallet dialog will close automatically
+    const result = await response.json()
+    console.log('Payment successful:', result)
+
+  } catch (error) {
+    // Payment failed - MUST call fail() to notify the wallet
+    fail({
+      message: error.message || 'Unable to process payment'
+    })
+  }
+}
+```
+
+### `onError`
+
+Called when an error occurs during the wallet handling (e.g., wallet unavailable, network error, configuration error).
+
+```typescript
+onError: (error: WalletError) => void
+```
+
+**Error structure:**
+```typescript
+{
+  code: 'PROVIDER_ERROR' | 'VALIDATION_ERROR' | 'CONFIGURATION_ERROR' | 'UNKNOWN'
+  message: string
+  details?: unknown
+}
+```
+
+**Error codes:**
+- `PROVIDER_ERROR` - Error from Apple Pay or Google Pay provider
+- `VALIDATION_ERROR` - Invalid configuration or parameters
+- `CONFIGURATION_ERROR` - Merchant configuration issue
+- `UNKNOWN` - Unexpected error
+
+**Example:**
+```typescript
+onError: (error) => {
+  console.error('Payment error:', error)
+
+  if (error.code === 'PROVIDER_ERROR') {
+    alert('Payment service unavailable. Please try another payment method.')
+  }
+}
+```
+
+### `onCancel`
+
+Called when the user explicitly cancels the payment (closes the wallet dialog without authorizing).
+
+```typescript
+onCancel: () => void
+```
+
+**Example:**
+```typescript
+onCancel: () => {
+  console.log('User cancelled payment')
+  // Optionally re-enable other UI elements
+}
+```
+
+## Complete Example
+
+```typescript
+import { Rinne } from 'rinne-js'
+
+const rinne = new Rinne({
+  merchantId: 'merchant_abc123',
+  environment: 'production'
+})
+
+async function setupPayment() {
+  // Create transaction
+  const transaction = await rinne.transaction.create({
+    amount: 2500, // $25.00
+    currency: 'USD',
+    country: 'US',
+    lineItems: [
+      { label: 'Premium Subscription', amount: 2000 },
+      { label: 'Tax', amount: 500 }
+    ]
+  })
+
+  // Setup Apple Pay
+  const applePay = await rinne.elements.applePay(transaction, {
+    button: {
+      color: 'black',
+      type: 'subscribe',
+      locale: 'en',
+      size: {
+        width: '100%',
+        height: '48px'
+      }
+    },
+    onCapture: async (payload, fail) => {
+      try {
+        const response = await fetch('/api/payments', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            cardData: payload.card_data,
+            transactionId: payload.transaction.id
+          })
+        })
+
+        if (!response.ok) {
+          const error = await response.json()
+          throw new Error(error.message)
+        }
+
+        // Payment successful
+        window.location.href = '/success'
+
+      } catch (error) {
+        // Notify wallet of failure
+        fail({ message: error.message })
+
+        // Show error to user
+        alert('Payment failed: ' + error.message)
+      }
+    },
+    onError: (error) => {
+      console.error('Payment error:', error)
+      alert('Payment system error. Please try again.')
+    },
+    onCancel: () => {
+      console.log('Payment cancelled')
+    }
+  })
+
+  await applePay.mount('#apple-pay-button')
+
+  // Setup Google Pay
+  const googlePay = await rinne.elements.googlePay(transaction, {
+    button: {
+      color: 'black',
+      type: 'subscribe',
+      locale: 'en'
+    },
+    onCapture: async (payload, fail) => {
+      // Same handler as Apple Pay
+      try {
+        await processPayment(payload)
+      } catch (error) {
+        fail({ message: error.message })
+      }
+    },
+    onError: (error) => console.error(error),
+    onCancel: () => console.log('Cancelled')
+  })
+
+  await googlePay.mount('#google-pay-button')
+}
+
+setupPayment()
+```
+
+## TypeScript Support
+
+Rinne JS is written in TypeScript and exports all type definitions:
+
+```typescript
+import type {
+  Options,
+  Environment,
+  TransactionCreateParams,
+  WalletSuccessPayload,
+  WalletError,
+  WalletButtonOptions,
+  CardData,
+  ApplePayElement,
+  GooglePayElement,
+  MountedElement
+} from 'rinne-js'
+```
+
+## Error Handling Best Practices
+
+1. **Always handle `onCapture` failures**: Call `fail()` with a useful message if backend processing fails
+2. **Implement `onError`**: Handle what to do in the rare event that the wallet buttons fail to load
+3. **Handle `onCancel`**: Clean up UI state when user cancels
+4. **Network errors**: Wrap backend calls in try-catch
+5. **Validation**: Validate transaction parameters before calling `transaction.create()`
+
+## Security
+
+- All payment tokens are encrypted using Evervault before transmission
+- No sensitive card data is stored in browser memory
+- Source maps are disabled to protect payment flow logic
+- Strict Content Security Policy recommended
+
+## Development
+
+See [CLAUDE.md](./CLAUDE.md) for development setup and tooling information.
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});let e=null;async function o(){if(window.Evervault)return window.Evervault;try{return await async function(){return e||(e=new Promise((o,r)=>{const t=document.createElement("script");if(t.src="https://js.evervault.com/v2",t.onload=()=>o(),t.onerror=()=>{e=null,r()},!document.head)throw new Error("Expected document.head not to be null. Evervault.js requires a <head> element.");document.head.appendChild(t)}),e)}(),window.Evervault}catch{throw new Error("Failed to load Evervault.js")}}Promise.resolve().then(()=>{o()});const r={pt:{errors:{targetElementNotFound:"Elemento alvo não encontrado",failedToInitialize:"Falha ao inicializar Rinne SDK",failedToProcessApplePay:"Falha ao processar dados do Apple Pay",failedToProcessGooglePay:"Falha ao processar dados do Google Pay",applePayError:"Erro do Apple Pay",googlePayError:"Erro do Google Pay",failedToMountApplePay:"Falha ao montar botão do Apple Pay",failedToMountGooglePay:"Falha ao montar botão do Google Pay",failedToFetchConfig:"Falha ao buscar configuração do comerciante",invalidConfig:"Configuração de comerciante inválida: campos obrigatórios ausentes",configFetchFailed:"Falha ao buscar configuração",unknownError:"Erro desconhecido"}},en:{errors:{targetElementNotFound:"Target element not found",failedToInitialize:"Failed to initialize Rinne SDK",failedToProcessApplePay:"Failed to process Apple Pay data",failedToProcessGooglePay:"Failed to process Google Pay data",applePayError:"Apple Pay error occurred",googlePayError:"Google Pay error occurred",failedToMountApplePay:"Failed to mount Apple Pay button",failedToMountGooglePay:"Failed to mount Google Pay button",failedToFetchConfig:"Failed to fetch merchant config",invalidConfig:"Invalid merchant config: missing required fields",configFetchFailed:"Configuration fetch failed",unknownError:"Unknown error"}},es:{errors:{targetElementNotFound:"Elemento objetivo no encontrado",failedToInitialize:"Error al inicializar Rinne SDK",failedToProcessApplePay:"Error al procesar datos de Apple Pay",failedToProcessGooglePay:"Error al procesar datos de Google Pay",applePayError:"Error de Apple Pay",googlePayError:"Error de Google Pay",failedToMountApplePay:"Error al montar botón de Apple Pay",failedToMountGooglePay:"Error al montar botón de Google Pay",failedToFetchConfig:"Error al obtener configuración del comerciante",invalidConfig:"Configuración de comerciante inválida: faltan campos requeridos",configFetchFailed:"Error al obtener configuración",unknownError:"Error desconocido"}}};function t(e="pt"){return r[e]}const n={sandbox:"https://api-sandbox.rinne.com.br/core",production:"https://api.rinne.com.br/core"};function a(e){return String(e).padStart(2,"0")}function i(e){const o=String(e);return 2===o.length?`20${o}`:o}function s(e){if(void 0!==e)return 0===e?"0":e}function c(e){return{pt:"pt-BR",en:"en-US",es:"es-ES"}[e]}function l(e,o="pt"){if("string"==typeof e){const r=document.querySelector(e);if(!r){const r=t(o).errors.targetElementNotFound;throw new Error(`${r}: ${e}`)}return r}return e}function d(e,o,r){return{code:e,message:o,details:r}}function u(e,o){return(o,r)=>{let n=!1,u=!1;const p=r.button?.locale??"pt",h=t(p),y=r.button?.size??{width:"100%",height:"40px"},{width:m,height:f}=y,g={locale:c(r.button?.locale??"pt"),type:(v=r.button?.type??"plain",{book:"book",buy:"buy",checkout:"check-out",donate:"donate",order:"order",pay:"pay",plain:"plain",subscribe:"subscribe"}[v]),style:(P=r.button?.color??"black","white"===P?"white-outline":P),borderRadius:s(r.button?.borderRadius),...!!m&&!!f&&{size:{width:m,height:f}},process:async(e,t)=>{if(u||n)return Promise.resolve();try{n=!0;const s=function(e){const{networkToken:o,card:r,cryptogram:t,eci:n,paymentDataType:s,deviceManufacturerIdentifier:c}=e;return{network_token:o.number,expiry_month:a(o.expiry.month),expiry_year:i(o.expiry.year),cryptogram:t,eci:n,token_provider:o.tokenServiceProvider,brand:r.brand,device_id:c,authentication_type:"3DSecure"===s?"3DS":void 0,last_digits:r.lastFour,issuer:"issuer"in r?r.issuer:void 0,segment:"segment"in r?r.segment:void 0,country:"country"in r?r.country:void 0,wallet_type:"APPLE_PAY",display_name:r.displayName}}(e);let c=!1;const l=e=>{c=!0,t.fail(e)};return await(r.onCapture?.({card_data:s,transaction:o},l)),void(c||(u=!0))}catch(s){return t.fail({message:s instanceof Error?s.message:h.errors.failedToProcessApplePay}),Promise.resolve()}finally{u||(n=!1)}}};var P,v;const E=e.ui.applePay(o,g);return E.on("error",(...e)=>{if(n)return;n=!0;const o="string"==typeof e[0]?e[0]:void 0;if("CANCELLED"===o?.toUpperCase())return n=!1,void r.onCancel?.();const t={code:"PROVIDER_ERROR",message:o??h.errors.applePayError};r.onError?.(t)}),E.on("cancel",()=>{n=!1,r.onCancel?.()}),Promise.resolve({async mount(e){try{const o=l(e,p);return await E.mount(o),{unmount:()=>{E.unmount()}}}catch(o){const e=d("PROVIDER_ERROR",o instanceof Error?o.message:h.errors.failedToMountApplePay,o);throw r.onError&&r.onError(e),o}}})}}function p(e,o){return(o,r)=>{let n=!1,c=!1;const u=r.button?.locale??"pt",p=t(u),h=r.button?.size??{width:"100%",height:"40px"},{width:y,height:m}=h,f={locale:r.button?.locale??"pt",type:r.button?.type??"plain",color:r.button?.color??"black",borderRadius:s(r.button?.borderRadius),...!!y&&!!m&&{size:{width:y,height:m}},allowedAuthMethods:["CRYPTOGRAM_3DS"],process:async(e,t)=>{if(c||n)return Promise.resolve();try{n=!0;const s=function(e){if(!function(e){return"token"in e&&"tokenServiceProvider"in e.token}(e))throw new Error("Google Pay response must contain a network token (3DS authentication)");const{token:o,card:r,cryptogram:t,eci:n}=e;return{network_token:o.number,expiry_month:a(o.expiry.month),expiry_year:i(o.expiry.year),cryptogram:t,eci:n??null,token_provider:o.tokenServiceProvider,brand:r.brand,authentication_type:"3DS",last_digits:r.lastFour,issuer:"issuer"in r?r.issuer:void 0,segment:"segment"in r?r.segment:void 0,country:"country"in r?r.country:void 0,wallet_type:"GOOGLE_PAY",display_name:r.displayName}}(e);let l=!1;const d=e=>{l=!0,t.fail(e)};return await(r.onCapture?.({card_data:s,transaction:o},d)),void(l||(c=!0))}catch(s){return t.fail({message:s instanceof Error?s.message:p.errors.failedToProcessGooglePay}),Promise.resolve()}finally{c||(n=!1)}}},g=e.ui.googlePay(o,f);return g.on("error",(...e)=>{if(n)return;n=!0;const o={code:"PROVIDER_ERROR",message:("string"==typeof e[0]?e[0]:void 0)??p.errors.googlePayError};r.onError?.(o)}),g.on("cancel",()=>{n=!1,r.onCancel?.()}),Promise.resolve({mount(e){try{const o=l(e,u);return g.mount(o),Promise.resolve({unmount:()=>{g.unmount()}})}catch(o){const e=d("PROVIDER_ERROR",o instanceof Error?o.message:p.errors.failedToMountGooglePay,o);throw r.onError&&r.onError(e),o}}})}}exports.Rinne=class{constructor(e){this.options=e,this.transaction=this.createTransactionNamespace(),this.elements=this.createElementsNamespace()}config=null;evervault=null;initPromise=null;transaction;elements;async initialize(){return this.initPromise||(this.initPromise=(async()=>{try{const e=await async function(e){const o=t("pt"),r=`${e.baseUrl??n[e.environment??"production"]}/merchants/${e.merchantId}/public-settings`;try{const e=await fetch(r);if(!e.ok){const r=String(e.status);throw new Error(`${o.errors.failedToFetchConfig}: ${r} ${e.statusText}`)}const t=await e.json();if(!t.merchant_id||!t.team_id||!t.app_id)throw new Error(o.errors.invalidConfig);return{merchantId:t.merchant_id,teamId:t.team_id,appId:t.app_id,availableMethods:t.available_methods,name:t.name}}catch(a){if(a instanceof Error)throw new Error(`${o.errors.configFetchFailed}: ${a.message}`);throw new Error(`${o.errors.configFetchFailed}: ${o.errors.unknownError}`)}}({merchantId:this.options.merchantId,environment:this.options.environment??"production",baseUrl:this.options.rinneUrl});this.config=e,this.evervault=await async function(e,r,t){return new(await o())(e,r,t)}(this.config.teamId,this.config.appId)}catch(e){throw this.initPromise=null,e}})()),this.initPromise}createElementsNamespace(){return{applePay:async(e,o)=>{if(await this.initialize(),!this.evervault||!this.config){const e=t(o.button?.locale??"pt");throw new Error(e.errors.failedToInitialize)}return u(this.evervault,this.config)(e,o)},googlePay:async(e,o)=>{if(await this.initialize(),!this.evervault||!this.config){const e=t(o.button?.locale??"pt");throw new Error(e.errors.failedToInitialize)}return p(this.evervault,this.config)(e,o)}}}createTransactionNamespace(){return{create:async e=>{if(await this.initialize(),!this.evervault||!this.config?.merchantId){const e=t("pt");throw new Error(e.errors.failedToInitialize)}return this.evervault.transactions.create({type:"payment",...e,merchantId:this.config.merchantId})}}}};

package/dist/index.d.ts

@@ -0,0 +1,131 @@
+import { EvTransaction } from './evervault-types';
+
+export declare interface ApplePayElement {
+    mount(target: string | HTMLElement): Promise<MountedElement>;
+}
+
+export declare type ApplePayElementNamespace = (transaction: EvTransaction, options: ApplePayMountOptions) => Promise<ApplePayElement>;
+
+export declare interface ApplePayMountOptions extends WalletHandlers {
+    button?: WalletButtonOptions;
+}
+
+export declare interface CardData {
+    number?: string;
+    network_token?: string;
+    expiry_month: string;
+    expiry_year: string;
+    cvv?: string;
+    cryptogram: string;
+    eci?: string | null;
+    token_provider?: string;
+    brand?: string;
+    device_id?: string;
+    authentication_type?: string;
+    last_digits?: string;
+    issuer?: string;
+    segment?: string;
+    country?: string;
+    wallet_type?: WalletType;
+    display_name?: string;
+}
+
+export declare interface ElementsNamespace {
+    applePay: ApplePayElementNamespace;
+    googlePay: GooglePayElementNamespace;
+}
+
+export declare type Environment = 'sandbox' | 'production';
+
+export { EvTransaction }
+
+export declare interface GooglePayElement {
+    mount(target: string | HTMLElement): Promise<MountedElement>;
+}
+
+export declare type GooglePayElementNamespace = (transaction: EvTransaction, options: GooglePayMountOptions) => Promise<GooglePayElement>;
+
+export declare interface GooglePayMountOptions extends WalletHandlers {
+    button?: WalletButtonOptions;
+}
+
+export declare interface MountedElement {
+    unmount(): void;
+}
+
+export declare interface Options {
+    merchantId: string;
+    environment?: Environment;
+    rinneUrl?: string;
+}
+
+export declare class Rinne {
+    private options;
+    private config;
+    private evervault;
+    private initPromise;
+    readonly transaction: TransactionNamespace;
+    readonly elements: ElementsNamespace;
+    constructor(options: Options);
+    private initialize;
+    private createElementsNamespace;
+    private createTransactionNamespace;
+}
+
+export declare interface TransactionCreateParams {
+    amount: number;
+    currency: string;
+    country?: string;
+    lineItems?: WalletLineItem[];
+}
+
+export declare interface TransactionNamespace {
+    create(params: TransactionCreateParams): Promise<EvTransaction>;
+}
+
+declare type WalletButtonColor = 'black' | 'white';
+
+export declare interface WalletButtonOptions {
+    color?: WalletButtonColor;
+    locale?: WalletLocale;
+    type?: WalletButtonType;
+    borderRadius?: number;
+    size?: {
+        width: number | string;
+        height: number | string;
+    };
+}
+
+export declare type WalletButtonType = 'book' | 'buy' | 'checkout' | 'donate' | 'order' | 'pay' | 'plain' | 'subscribe';
+
+export declare interface WalletError {
+    code: WalletErrorCode;
+    message: string;
+    details?: unknown;
+}
+
+export declare type WalletErrorCode = 'PROVIDER_ERROR' | 'VALIDATION_ERROR' | 'CONFIGURATION_ERROR' | 'UNKNOWN';
+
+export declare interface WalletHandlers {
+    onCapture?: (payload: WalletSuccessPayload, fail: (error: {
+        message: string;
+    }) => void) => Promise<void> | void;
+    onError?: (error: WalletError) => void;
+    onCancel?: () => void;
+}
+
+export declare interface WalletLineItem {
+    amount: number;
+    label: string;
+}
+
+export declare type WalletLocale = 'pt' | 'en' | 'es';
+
+export declare interface WalletSuccessPayload {
+    card_data: CardData;
+    transaction: EvTransaction;
+}
+
+export declare type WalletType = 'APPLE_PAY' | 'GOOGLE_PAY';
+
+export { }

package/dist/index.js

@@ -0,0 +1 @@
+let e=null;async function o(){if(window.Evervault)return window.Evervault;try{return await async function(){return e||(e=new Promise((o,r)=>{const t=document.createElement("script");if(t.src="https://js.evervault.com/v2",t.onload=()=>o(),t.onerror=()=>{e=null,r()},!document.head)throw new Error("Expected document.head not to be null. Evervault.js requires a <head> element.");document.head.appendChild(t)}),e)}(),window.Evervault}catch{throw new Error("Failed to load Evervault.js")}}Promise.resolve().then(()=>{o()});const r={pt:{errors:{targetElementNotFound:"Elemento alvo não encontrado",failedToInitialize:"Falha ao inicializar Rinne SDK",failedToProcessApplePay:"Falha ao processar dados do Apple Pay",failedToProcessGooglePay:"Falha ao processar dados do Google Pay",applePayError:"Erro do Apple Pay",googlePayError:"Erro do Google Pay",failedToMountApplePay:"Falha ao montar botão do Apple Pay",failedToMountGooglePay:"Falha ao montar botão do Google Pay",failedToFetchConfig:"Falha ao buscar configuração do comerciante",invalidConfig:"Configuração de comerciante inválida: campos obrigatórios ausentes",configFetchFailed:"Falha ao buscar configuração",unknownError:"Erro desconhecido"}},en:{errors:{targetElementNotFound:"Target element not found",failedToInitialize:"Failed to initialize Rinne SDK",failedToProcessApplePay:"Failed to process Apple Pay data",failedToProcessGooglePay:"Failed to process Google Pay data",applePayError:"Apple Pay error occurred",googlePayError:"Google Pay error occurred",failedToMountApplePay:"Failed to mount Apple Pay button",failedToMountGooglePay:"Failed to mount Google Pay button",failedToFetchConfig:"Failed to fetch merchant config",invalidConfig:"Invalid merchant config: missing required fields",configFetchFailed:"Configuration fetch failed",unknownError:"Unknown error"}},es:{errors:{targetElementNotFound:"Elemento objetivo no encontrado",failedToInitialize:"Error al inicializar Rinne SDK",failedToProcessApplePay:"Error al procesar datos de Apple Pay",failedToProcessGooglePay:"Error al procesar datos de Google Pay",applePayError:"Error de Apple Pay",googlePayError:"Error de Google Pay",failedToMountApplePay:"Error al montar botón de Apple Pay",failedToMountGooglePay:"Error al montar botón de Google Pay",failedToFetchConfig:"Error al obtener configuración del comerciante",invalidConfig:"Configuración de comerciante inválida: faltan campos requeridos",configFetchFailed:"Error al obtener configuración",unknownError:"Error desconocido"}}};function t(e="pt"){return r[e]}const n={sandbox:"https://api-sandbox.rinne.com.br/core",production:"https://api.rinne.com.br/core"};function a(e){return String(e).padStart(2,"0")}function i(e){const o=String(e);return 2===o.length?`20${o}`:o}function s(e){if(void 0!==e)return 0===e?"0":e}function c(e){return{pt:"pt-BR",en:"en-US",es:"es-ES"}[e]}function l(e,o="pt"){if("string"==typeof e){const r=document.querySelector(e);if(!r){const r=t(o).errors.targetElementNotFound;throw new Error(`${r}: ${e}`)}return r}return e}function d(e,o,r){return{code:e,message:o,details:r}}function u(e,o){return(o,r)=>{let n=!1,u=!1;const p=r.button?.locale??"pt",h=t(p),m=r.button?.size??{width:"100%",height:"40px"},{width:y,height:f}=m,g={locale:c(r.button?.locale??"pt"),type:(v=r.button?.type??"plain",{book:"book",buy:"buy",checkout:"check-out",donate:"donate",order:"order",pay:"pay",plain:"plain",subscribe:"subscribe"}[v]),style:(P=r.button?.color??"black","white"===P?"white-outline":P),borderRadius:s(r.button?.borderRadius),...!!y&&!!f&&{size:{width:y,height:f}},process:async(e,t)=>{if(u||n)return Promise.resolve();try{n=!0;const s=function(e){const{networkToken:o,card:r,cryptogram:t,eci:n,paymentDataType:s,deviceManufacturerIdentifier:c}=e;return{network_token:o.number,expiry_month:a(o.expiry.month),expiry_year:i(o.expiry.year),cryptogram:t,eci:n,token_provider:o.tokenServiceProvider,brand:r.brand,device_id:c,authentication_type:"3DSecure"===s?"3DS":void 0,last_digits:r.lastFour,issuer:"issuer"in r?r.issuer:void 0,segment:"segment"in r?r.segment:void 0,country:"country"in r?r.country:void 0,wallet_type:"APPLE_PAY",display_name:r.displayName}}(e);let c=!1;const l=e=>{c=!0,t.fail(e)};return await(r.onCapture?.({card_data:s,transaction:o},l)),void(c||(u=!0))}catch(s){return t.fail({message:s instanceof Error?s.message:h.errors.failedToProcessApplePay}),Promise.resolve()}finally{u||(n=!1)}}};var P,v;const E=e.ui.applePay(o,g);return E.on("error",(...e)=>{if(n)return;n=!0;const o="string"==typeof e[0]?e[0]:void 0;if("CANCELLED"===o?.toUpperCase())return n=!1,void r.onCancel?.();const t={code:"PROVIDER_ERROR",message:o??h.errors.applePayError};r.onError?.(t)}),E.on("cancel",()=>{n=!1,r.onCancel?.()}),Promise.resolve({async mount(e){try{const o=l(e,p);return await E.mount(o),{unmount:()=>{E.unmount()}}}catch(o){const e=d("PROVIDER_ERROR",o instanceof Error?o.message:h.errors.failedToMountApplePay,o);throw r.onError&&r.onError(e),o}}})}}function p(e,o){return(o,r)=>{let n=!1,c=!1;const u=r.button?.locale??"pt",p=t(u),h=r.button?.size??{width:"100%",height:"40px"},{width:m,height:y}=h,f={locale:r.button?.locale??"pt",type:r.button?.type??"plain",color:r.button?.color??"black",borderRadius:s(r.button?.borderRadius),...!!m&&!!y&&{size:{width:m,height:y}},allowedAuthMethods:["CRYPTOGRAM_3DS"],process:async(e,t)=>{if(c||n)return Promise.resolve();try{n=!0;const s=function(e){if(!function(e){return"token"in e&&"tokenServiceProvider"in e.token}(e))throw new Error("Google Pay response must contain a network token (3DS authentication)");const{token:o,card:r,cryptogram:t,eci:n}=e;return{network_token:o.number,expiry_month:a(o.expiry.month),expiry_year:i(o.expiry.year),cryptogram:t,eci:n??null,token_provider:o.tokenServiceProvider,brand:r.brand,authentication_type:"3DS",last_digits:r.lastFour,issuer:"issuer"in r?r.issuer:void 0,segment:"segment"in r?r.segment:void 0,country:"country"in r?r.country:void 0,wallet_type:"GOOGLE_PAY",display_name:r.displayName}}(e);let l=!1;const d=e=>{l=!0,t.fail(e)};return await(r.onCapture?.({card_data:s,transaction:o},d)),void(l||(c=!0))}catch(s){return t.fail({message:s instanceof Error?s.message:p.errors.failedToProcessGooglePay}),Promise.resolve()}finally{c||(n=!1)}}},g=e.ui.googlePay(o,f);return g.on("error",(...e)=>{if(n)return;n=!0;const o={code:"PROVIDER_ERROR",message:("string"==typeof e[0]?e[0]:void 0)??p.errors.googlePayError};r.onError?.(o)}),g.on("cancel",()=>{n=!1,r.onCancel?.()}),Promise.resolve({mount(e){try{const o=l(e,u);return g.mount(o),Promise.resolve({unmount:()=>{g.unmount()}})}catch(o){const e=d("PROVIDER_ERROR",o instanceof Error?o.message:p.errors.failedToMountGooglePay,o);throw r.onError&&r.onError(e),o}}})}}class h{constructor(e){this.options=e,this.transaction=this.createTransactionNamespace(),this.elements=this.createElementsNamespace()}config=null;evervault=null;initPromise=null;transaction;elements;async initialize(){return this.initPromise||(this.initPromise=(async()=>{try{const e=await async function(e){const o=t("pt"),r=`${e.baseUrl??n[e.environment??"production"]}/merchants/${e.merchantId}/public-settings`;try{const e=await fetch(r);if(!e.ok){const r=String(e.status);throw new Error(`${o.errors.failedToFetchConfig}: ${r} ${e.statusText}`)}const t=await e.json();if(!t.merchant_id||!t.team_id||!t.app_id)throw new Error(o.errors.invalidConfig);return{merchantId:t.merchant_id,teamId:t.team_id,appId:t.app_id,availableMethods:t.available_methods,name:t.name}}catch(a){if(a instanceof Error)throw new Error(`${o.errors.configFetchFailed}: ${a.message}`);throw new Error(`${o.errors.configFetchFailed}: ${o.errors.unknownError}`)}}({merchantId:this.options.merchantId,environment:this.options.environment??"production",baseUrl:this.options.rinneUrl});this.config=e,this.evervault=await async function(e,r,t){return new(await o())(e,r,t)}(this.config.teamId,this.config.appId)}catch(e){throw this.initPromise=null,e}})()),this.initPromise}createElementsNamespace(){return{applePay:async(e,o)=>{if(await this.initialize(),!this.evervault||!this.config){const e=t(o.button?.locale??"pt");throw new Error(e.errors.failedToInitialize)}return u(this.evervault,this.config)(e,o)},googlePay:async(e,o)=>{if(await this.initialize(),!this.evervault||!this.config){const e=t(o.button?.locale??"pt");throw new Error(e.errors.failedToInitialize)}return p(this.evervault,this.config)(e,o)}}}createTransactionNamespace(){return{create:async e=>{if(await this.initialize(),!this.evervault||!this.config?.merchantId){const e=t("pt");throw new Error(e.errors.failedToInitialize)}return this.evervault.transactions.create({type:"payment",...e,merchantId:this.config.merchantId})}}}}export{h as Rinne};

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@rinnebr/js",
+  "version": "0.1.0-alpha.1",
+  "description": "Modern payment elements library for Apple Pay, Google Pay, and other payment methods",
+  "type": "module",
+  "packageManager": "yarn@4.9.1",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "yarn check && vite build",
+    "check": "yarn type-check && yarn lint && yarn format:check && yarn test",
+    "type-check": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:ui": "vitest --ui",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "prepare": "husky",
+    "prepublishOnly": "yarn build"
+  },
+  "keywords": [
+    "payment",
+    "apple-pay",
+    "google-pay",
+    "payment-elements",
+    "payment-buttons"
+  ],
+  "author": "Rinne",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rinnebr/rinne-js.git"
+  },
+  "bugs": {
+    "url": "https://github.com/rinnebr/rinne-js/issues"
+  },
+  "homepage": "https://github.com/rinnebr/rinne-js#readme",
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/jsdom": "^27",
+    "@types/node": "^24.10.1",
+    "@vitest/ui": "^4.0.8",
+    "eslint": "^9",
+    "eslint-config-prettier": "^10.1.8",
+    "husky": "^9.1.7",
+    "jsdom": "^27.2.0",
+    "lint-staged": "^16.2.6",
+    "prettier": "^3.6.2",
+    "terser": "^5.44.1",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.2",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.8"
+  },
+  "dependencies": {
+    "@evervault/js": "^2.6.0"
+  }
+}