@ranty/ranty-sdk NPM

Naranja

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

naranja ranty ranty sdk

@datadog/browser-logs @lit/context @lit/task aws-amplify axios axios-retry braces dotenv html2canvas isomorphic-ws jsencrypt jspdf lit normalize.css qrcode recaptcha-v3 sass uuid ws

@everything-registry/sub-chunk-758

11 months ago

11 months ago

11 months ago

1 year ago

1 year ago

1 year ago

11 months ago

1 year ago

11 months ago

1 year ago

11 months ago

1 year ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

12 months ago

1 year ago

11 months ago

12 months ago

1 year ago

1 year ago

10 months ago

1 year ago

1 year ago

11 months ago

11 months ago

11 months ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

10 months ago

10 months ago

1 year ago

10 months ago

10 months ago

10 months ago

1 year ago

10 months ago

10 months ago

10 months ago

10 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

12 months ago

12 months ago

1 year ago

12 months ago

1 year ago

12 months ago

12 months ago

1 year ago

12 months ago

12 months ago

1 year ago

1 year ago

11 months ago

1 year ago

1 year ago

11 months ago

1 year ago

1 year ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

10 months ago

1 year ago

1 year ago

1 year ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

10 months ago

10 months ago

1 year ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

12 months ago

1 year ago

1 year ago

11 months ago

1 year ago

1 year ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

1 year ago

2 years ago

1 year ago

2 years ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago