Personalización SDK

1. Callbacks de Éxito y Error

Puedes personalizar el comportamiento del SDK cuando una operación es exitosa o falla, mediante el uso de callbacks. Esto permite que tu aplicación tome decisiones inmediatas sin esperar exclusivamente a la notificación por webhook.

Por defecto, Milio notifica el resultado de la operación mediante un webhook, pero si deseas ejecutar lógica adicional en el cliente (como cerrar modales, mostrar mensajes, actualizar estados o redirigir al usuario), puedes definir funciones onSuccess y onError al momento de invocar el SDK.

Ejemplo de uso con callbacks

JavaScript

// Your functions
const onSuccess = (response) => {
    console.log("Success!")
    const {data} = response
    // Send `data` to your server to decrypt
    console.log(data)
		showToast('¡Pago realizado con éxito!');
		goto("https://milio.com.co/")
}

const onError = (error) => {
  console.log("Error!")
  console.error(error?.response?.data?.message || error.message);
  showToast('Ocurrió un error al procesar el pago');
	goto("https://milio.com.co/")
}

const openSDK = (key) => {
	openMilioDialog(key, onSuccess, onError)
}

2. Personalización de Colores

Puedes personalizar los colores del SDK sobrescribiendo las variables CSS definidas en :root.

Variable	Descripción
--sdk-modal-text-color	Color del texto del modal
--sdk-button-background-color	Color de fondo del botón principal
--sdk-button-text-color	Color del texto del botón principal
--sdk-button-disabled-background-color	Color de fondo del botón deshabilitado
--sdk-button-disabled-text-color	Color del texto del botón deshabilitado
--sdk-error-text-color	Color del texto de error

Ejemplo de Personalización de Colores

HTML

<style>
    :root {
      --sdk-modal-text-color: #003366;
      --sdk-button-background-color: #0066cc;
      --sdk-button-text-color: #ffffff;
      --sdk-button-disabled-background-color: #99c2ff;
      --sdk-button-disabled-text-color: #cccccc;
      --sdk-error-text-color: #ff4d4d;
    }
</style>

3. Personalización de Fuentes

Puedes personalizar las fuentes del SDK sobrescribiendo las variables de fuente.

Variable	Descripción
--sdk-font-family-regular	Fuente principal para textos
--sdk-font-family-regular-fallback	Respaldo para fuente principal
--sdk-font-family-bold	Fuente principal en negrita
--sdk-font-family-bold-fallback	Respaldo para fuente en negrita
--sdk-font-family-button	Fuente para los botones
--sdk-font-family-button-fallback	Respaldo para fuente de botones

HTML

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playwrite+MX+Guides&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">

 <style>
    :root {
      --sdk-font-family-regular: 'Ubuntu';
      --sdk-font-family-regular-fallback: serif;

      --sdk-font-family-bold: 'Ubuntu';
      --sdk-font-family-bold-fallback: serif;

      --sdk-font-family-button: 'Ubuntu';
      --sdk-font-family-button-fallback:serif;
    }
</style>