@ranty/ranty-sdk

Librería frontend basada en Web Components para el Payfac SDK. Su principal objetivo es proporcionar diversas soluciones enfocadas en el procesamiento de pagos:

• Pagos tradicionales
• Tokenizados:
  • Click To Pay (Visa | Mastercard)
  • 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 proporcionada por Naranja X
• paymentRequestId: ID de la intención de pago (uuid-v4)

Atributos opcionales

• env:

  • production (no requerido)
  • staging (homologación)

• settings: permite mostrar u ocultar componentes. Si no se pasa el atributo settings en el tag de payfac, se muestra todo por default.

  • show_title: muestra u oculta el título.
  • show_subtitle: muestra u oculta el subtítulo.
  • show_order_detail: muestra u oculta el detalle de la compra.
  • enable_auto_redirect: activa ó desactiva la redirección automática 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"
  ></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:

Click To Pay

Atributos:

• dpaid: identificador del merchant (uuid-v4)
• dpaname: nombre del merchant
• mode: click_to_pay
• env:
  • production (no requerido)
  • staging (homologación)

Producción

<div style="height: 94vh;background: #F4F4F4;">
  <payfac-sdk
    paymentRequestId="uuid-v4"
    publicKey="publicKey-merchant"
    dpaId="uuid-v4"
    dpaName="string"
    mode="click_to_pay"
  ></payfac-sdk>
</div>

Homologación

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

Secure Card On File

Atributos:

• mode: card_on_file
• env:
  • production (no requerido)
  • staging (homologación)

Producción

<div style="height: 94vh;background: #F4F4F4;">
  <payfac-sdk
    paymentRequestId="uuid-v4"
    publicKey="publicKey-merchant"
    mode="card_on_file"
  ></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. |