@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 | Mastercard)

Instalación

NPM

@ranty/ranty-sdk

npm install @ranty/ranty-sdk

Importación

import '@ranty/ranty-sdk'

CDN

@ranty/ranty-sdk

<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”).

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

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

Homologación

<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

<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

<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

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