App Móvil

Puedes utilizar el Widget de Palenca de forma incrustada utilizando un WebView en tu aplicación móvil y escuchar los eventos.

Parámetros de configuración

Parámetro	Ejemplo	Descripción	Requerido
widget_id	a64fef80-42ec-4d5b-bd38-c918e0071663	El widget_id único	Sí

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

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

Respuesta para eventos

La estructura de la respuesta siempre es la misma con la siguiente estructura:

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

Ejemplos de eventos

ready

{
    "signal": "ready"
}

user_created

{
    "signal": "user_created",
    "response": {
        "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

{
    "signal": "connection_success",
    "response": {
        "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

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

Ejemplos

React Native

Para escuchar los eventos puedes usar postMessage.

import React from 'react';
import { Alert } from 'react-native';
import { WebView } from 'react-native-webview';

const App = () => {
  const handleEvent = (event: any) => {
    Alert.alert(event.nativeEvent.data);
  }

  const widgetId: string = 'YOUR_WIDGET_ID';
  const baseUrl: string = 'https://connect.palenca.com';
  const uri: string = `${baseUrl}?widget_id=${widgetId}&primary_color=ea4c89`;

  return <WebView 
  onMessage={handleEvent} 
  source={{ uri }}
  />;
};

export default App;

Android Kotlin

activity_main.xml

    <WebView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/webView"
        android:layout_gravity="center_horizontal"/>

MainActivity.kt

import android.content.Context
import android.os.Bundle
import android.webkit.JavascriptInterface
import android.webkit.WebViewClient
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import com.palenca.connect.databinding.ActivityMainBinding
import org.json.JSONObject

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding
    private val baseUrl = "https://connect.palenca.com"
    private val widgetId = "YOUR_WIDGET"
    private val widgetUrl = "$baseUrl?widget_id=$widgetId&primary_color=ea4c89"

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
        binding.webView.webViewClient = WebViewClient()
        binding.webView.settings.javaScriptEnabled = true
        binding.webView.addJavascriptInterface(JSBridge(this), "JSBridge")
        binding.webView.loadUrl(widgetUrl)
    }

    /**
     * Receive messages from the Webview and pass into native
     */
    class JSBridge(private val context: Context) {
        @JavascriptInterface
        fun onEvent(event: String) {
            val jsonObject = JSONObject(event)
            println(jsonObject)
            Toast.makeText(context, event, Toast.LENGTH_LONG).show()
        }
    }
}

AndroidManifest.xml

<uses-permission android:name="android.permission.INTERNET"/>