# @ranty/ranty-sdk

Librería frontend basada en Web Components para integrar el checkout embebido de Nave. Actualmente soporta dos modos de pago dentro del mismo checkout:

- **Default**: pagos tradicionales sin tokenización
- **Secure Card On File** ([Visa](https://developer.visa.com/capabilities/card-on-file-data-inquiry) | [Mastercard](https://developer.mastercard.com/mastercard-checkout-solutions/documentation/use-cases/card-on-file/))

# Instalación

## NPM

[@ranty/ranty-sdk](https://www.npmjs.com/package/@ranty/ranty-sdk)

```bash
npm install @ranty/ranty-sdk
```

### Importación

```javascript
import '@ranty/ranty-sdk'
```

## CDN

[@ranty/ranty-sdk](https://www.jsdelivr.com/package/npm/@ranty/ranty-sdk)

```html
<script type="module">
  import rantyrantySdk from 'https://cdn.jsdelivr.net/npm/@ranty/ranty-sdk@latest/+esm'
</script>
```

# Utilización

### Atributos obligatorios

- **publicKey**: Llave pública provista por Nave para autenticar el checkout.
- **paymentRequestId**: Identificador de la intención de pago (UUID v4) generado en tu backend.

### Atributos opcionales

- **env**: Define el ambiente de ejecución.
  - production (requiere setearlo)
  - staging  (ambiente de homologación / pruebas)

- **settings**: Objeto que permite mostrar u ocultar componentes del checkout. Si no se incluye, todos los componentes se muestran por defecto.
  - show_title: muestra/oculta el título.
  - show_subtitle: muestra/oculta el subtítulo.
  - show_order_detail: muestra/oculta el detalle de la compra.
  - enable_auto_redirect: ctiva o desactiva la redirección automática a la tienda (por defecto a los 5s o con el botón “Volver a la tienda”).
```js
customerProperties: {
  show_title: false,
  show_subtitle: false,
  show_order_detail: false,
  enable_auto_redirect: false
}
```

## Recomendación de uso

Para tener una mejor experiencia se recomienda embeber el tag de `<payfac-sdk></payfac-sdk>` en un tag de contencion `div, iframe...`, con los siguientes estilos `height: 94vh; background: #F4F4F4;`

## Pagos Tradicionales:

### Producción

```html
<div style="height: 94vh;background: #F4F4F4;">
  <payfac-sdk
    paymentRequestId="uuid-v4"
    publicKey="publicKey-merchant"
    settings="settings"
    env="production"
  ></payfac-sdk>
</div>
```

### Homologación

```html
<div style="height: 94vh;background: #F4F4F4;">
  <payfac-sdk
    paymentRequestId="uuid-v4"
    publicKey="publicKey-merchant"
    settings="settings"
    env="staging"
  ></payfac-sdk>
</div>
```

## Pagos Tokenizados:

### Secure Card On File

#### Atributos:

- **mode**: card_on_file
- **env**:
  - production (requerido)
  - staging (homologación)

#### Producción

```html
<div style="height: 94vh;background: #F4F4F4;">
  <payfac-sdk
    paymentRequestId="uuid-v4"
    publicKey="publicKey-merchant"
    mode="card_on_file"
    env="production"
  ></payfac-sdk>
</div>
```

#### Homologación

```html
<div style="height: 94vh;background: #F4F4F4;">
  <payfac-sdk
    paymentRequestId="uuid-v4"
    publicKey="publicKey-merchant"
    env="staging"
  ></payfac-sdk>
</div>
```

### Manejo de eventos

Se dispara un evento cuando:

- Falla al generar el token
- Falla get payment request
- Falla installment plan
- Falla directPayment
- Pago rechazado
- Pago aprobado

```html
<script>
  window.addEventListener('message', (event) => {
    if(event.data && event.data.type) {
      console.log('Mensaje recibido del SDK:', event.data);
    }
  });
</script>
```

### Tabla de eventos

| TIPO                   | DETALLE                       |
| ---------------------- | ----------------------------- |
| AUTH_ERROR             | Authentication failed.        |
| AUTH_PAYMENT_REQUEST   | Payment request failed.       |
| LOAD_DATA_ERROR        | Load data failed.             |
| PROMOTIONS_ERROR       | Promotions failed.            |
| PAYMENT_REQUEST_ERROR  | Payment request failed.       |
| INSTALLMENT_PLAN_ERROR | Installment plant failed.     |
| WEB_SOCKET_ERROR       | Web socket connection failed. |
| DIRECT_PAYMENT_ERROR   | Direct payment failed.        |
| FAILURE_PROCESSED      | Failure detail                |
| SUCCESS_PROCESSED      | none                          |
| BLOCKED                | Blocked detail                |
| INVOICE_ERROR          | Open invoice failed.          |