When you use the CDN or ES6 for web environments, the Palenca API will automatically handle credential validation, multi-factor authentication, and error handling for every connection your users make.

Configuration Parameters

These parameters are mandatory in order to load the Widget:

Parameter	Example	Description	Order
publicApiKey	`public_6187344f-d2e9-4ff1-a0ca-7a1ad512682d`	Your public API Key. You can find it in the Developers module in the Console	1
widgetId	`c379afec-8d47-4fcf-ae07-353093baed2b`	The Widget ID. You can find it in the Widgets module in the Console	2

Using the CDN

Here’s an example of how to embed the Widget in your application using the CDN:

<head>
  <script src="https://link.palenca.com/v2/index.min.js"></script>
<head>
<body>
  <div id="container"></div>
</body>
    
<body>
  <script type="text/javascript">
    let widgetId = 'YOUR_WIDGET_ID';
    let publicApiKey = 'YOUR_PUBLIC_API_KEY';

    let link = palenca.loadLink(publicApiKey, widgetId).then(
      (link) => {
        link.render('container', renderConfig);
      }
    );
  </script>
</body>

Using ES6

npm install @palenca/palenca-link

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

Examples

Standalone

Available methods

Method	Description	Params
on	To add subscriptions to the event listener	event: string, callback: Function
render	To render the widget	containerId: string, config: object
destroy	To remove the iframe and event listeners	N/A

let widgetId = 'YOUR_WIDGET_ID';
let publicApiKey = 'YOUR_PUBLIC_API_KEY';
let renderConfig = {
  configuration: {
    hideConsent: true,
    country: 'mx',
  },
  appearance: {
    primaryColor: '#ea4c89',
  },
};

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 options = {
  configuration: {
    hideConsent: true,
    country: 'mx',
  },
  appearance: {
    primaryColor: '#ea4c89',
  },
};

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

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

export default Home;

Optional Parameters

Configuration parameters

Parameter	Example	Description
isSandbox	`true`	If set to `true`, sandbox mode is enabled. `false` by default for production widgets `true` by default for sandbox widgets
platforms	`['uber','rappi','didi']`	User-selectable comma-separated platform codes. Available platforms .
lang	es	Replaces the language automatically detected by the browser. Available languages: `es`, `en`, and `pt`. `null` by default
country	mx	Single country code to be used for the widget.
hideConsent	`false`	If set to `true`, the Consent page is hidden. `false` by default

Appearance parameters

Parameter	Example	Description
primaryColor	`#1F5BC0`	Hexadecimal Color

Events

The only way to communicate with the Widget is by listening to an event. All events have a payload with the API envelope.

The following table shows all the Widget events:

Event	Description
ready	Indicates that your public API key and Widget are correct and that the widget has been initialized
user_created	The user was created successfully
connection_success	The user successfully connected to the platform
connection_error	An error occurred while trying to connect a user to the platform

Envelope for events

The envelope is always the same with the following structure:

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

Example for events

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", // if provided, otherwise null
     },
     "error": null
}

connection_success

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

connection_error

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