CDN & ES6

Cuando utilizas la CDN o ES6 para entornos web, la API de Palenca manejará automáticamente la validación de credenciales, la autenticación de múltiples factores y el manejo de errores para cada conexión que realicen tus usuarios.

Implementación con CDN

<script src="https://link.palenca.com/v2/index.min.js"></script>

Implementación con ES6

npm install @palenca/palenca-link

import { loadLink } from "@palenca/palenca-link";

Parámetros de configuración (mandatorios)

Parámetro	Ejemplo	Descripción	Orden
publicApiKey	public_6187344f-d2e9-4ff1-a0ca-7a1ad512682d	API key pública	1
widgetId	c379afec-8d47-4fcf-ae07-353093baed2b	ID del Widget	2

Ejemplo

const linkPromise = loadLink('public_6187344f-d2e9-4ff1-a0ca-7a1ad512682d', 'c379afec-8d47-4fcf-ae07-353093baed2b');

Parámetros opcionales

Parámetro	Ejemplo	Descripción
externalId	6187344f-d2e9-4ff1-a0ca-7a1ad512682d	Identificador externo del usuario
isSandbox	true	Si se establece en true, se habilita el modo sandbox. false de manera predeterminada
platforms	['uber', 'rappi', 'runa']	Matriz de plataformas que el usuario puede seleccionar
countries	['mx', 'br', 'ar']	Códigos de país alfa-2 separados por comas que el usuario puede seleccionar
redirectUrl	https://dominio.com/paso-2	URL a la que el usuario debe ser redirigido
customPrivacyUrl	https://dominio.com/privacidad	Te permite agregar un casilla de verificación de términos de privacidad personalizada, útil si necesitas un consentimiento personalizado
whatsAppPhoneNumber	+525511223344	Número de teléfono con código de país para recibir mensajes de WhatsApp de los usuarios
hideLogo	false	Si se establece en true, se oculta el logo de tu empresa. false de manera predeterminada
hideWhatsApp	false	Si se establece en true, se oculta el botón flotante de WhatsApp. false de manera predeterminada
hideConsent	false	Si se establece en true, se oculta la página de consentimiento. false de manera predeterminada
lang	es	Reemplaza el idioma detectado automáticamente por el navegador. Idiomas disponibles: es, en y pt. null de manera predeterminada

Parámetros de estilos visuales

Parámetro	Ejemplo	Descripción
primaryColor	#1F5BC0	Color hexadecimal, los valores de color hexadecimal son compatibles en todos los navegadores
borderRadius	10px	La propiedad border-radius define el radio de las esquinas del elemento
fontFamily	Roboto	La propiedad font-family especifica la fuente para PalencaLink, solo admite Google Fonts

Link útiles

• Google Fonts
• Color Picker
• Border radius

Templates

Template	Font	Color	Border radius
Black	Lato	#000000	0px
Default	Poppins	#1F5BC0	10px
Nature	Lato	#000000	0px

Eventos

La única forma de comunicarse con el Palenca Link es escuchando un evento. Todos los eventos tienen un payload con el envelope del API.

En la siguiente tabla se muestran todos los eventos del Palenca Link:

Evento	Descripción
ready	Indica que tu clave de API pública y Widget son correctos y que el widget ha sido inicializado
user_created	El usuario se creó correctamente
connection_success	El usuario se conectó exitosamente con la plataforma
connection_error	Ocurrió un error al intentar conectar a un usuario con la plataforma

Envelope para eventos

El envelope siempre es el mismo con la siguiente estructura:

{
    "success": bool,
    "data": Data Object,
    "error": Error Object
}

Ejemplos de eventos

ready

{
    "success": true,
    "data": null,
    "error": null
}

user_created

{
    "success": true,
    "data": {
        "user_id": "054d0a9d-38ec-40cb-a31c-09b483242e4a",
        "external_id": "4a0e32bd-c3df-4172-a89d-f173d6816926",
        "widget_id": "feecb679-a3cc-47ef-8fd4-600799f12a39"
    },
    "error": null
}

connection_success

{
    "success": true,
    "data": {
        "user_id": "054d0a9d-38ec-40cb-a31c-09b483242e4a",
        "country": "mx",
        "platform": "imss",
        "account_id": "472f02e8-6b24-43a7-b529-3f71d6ecc81c"
    },
    "error": null
}

connection_error

{
    "success": false,
    "error": {
        "code": "invalid_credentials",
        "message": "The username/password combination is wrong",
        "errors": null
    },
    "data": null
}

Standalone

Métodos disponibles

Método	Descripción	Params
on	Para agregar suscripciones al event listener	event: string, callback: Function
render	Para renderear el widget	containerId: string, config: object
destroy	Para remover el iframe y event listeners	N/A

<div id="container"></div>

  let widgetId = "YOUR_WIDGET_ID";
    let publicApiKey = "YOUR_PUBLIC_API_KEY";
    let renderConfig = {
      "configuration": {
        "hideConsent": true,
        "countries": "mx"
      },
      appearance: {
        primaryColor: "#ea4c89",
        borderRadius: "9999px"
      }
    }

    let link = palenca.loadLink(publicApiKey, widgetId).then(link => {

      link.on("ready", () => {
        console.log("Widget is ready")
      })

      link.on("user_created", (event) => {
        console.log("User created", event)
      })

      link.on("connection_success", (event) => {
        console.log(`Connection success for userId ${event.data.user_id} and accountId ${event.data.account_id}`)
      })

      link.on("connection_error", (event) => {
        console.log(`Connection error ${event.data.error.code}`)
      })

      link.render("container", renderConfig);
      
      // You can destroy the iframe and event listeners with the destroy method
      window.addEventListener('unload', () => {
          link.destroy()
      })

    }, error => {
      console.log(error);
    })

React

import { loadLink, PalencaLinkReact } from '@palenca/palenca-link';
import { useCallback } from 'react';

// Make sure to call `loadLink` outside of a component’s render to avoid recreating the object
const linkPromise = loadLink('YOUR_PUBLIC_API_KEY', 'YOUR_WIDGET_ID');

const Home = () => {
  const handleEvent = useCallback((event: string, data: object) => {
    console.log(event);
    console.log(data)
  }, []);

  const options = {
    configuration: {
      hideConsent: true,
      countries: ['mx'],
    },
    appearance: {
      primaryColor: '#ea4c89',
      borderRadius: '999px',
    },
  };

  return (
      <div>
            <PalencaLinkReact
              link={linkPromise}
              options={options}
              onEvent={handleEvent}
            />
      </div>
  );
};

export default Home;