1. Descripción general del desarrollo de Mini Apps

Las Mini Apps son aplicaciones web que se ejecutan dentro de World App. Usando el SDK MiniKit-JS, puedes integrarte con la interfaz nativa de World App, la verificación de World ID y las funciones de pago.

Lo que puedes hacer

🔐

Verificación con World ID

Verifica si un usuario es un humano verificado por Orb

💳

Pagos con USDC

Pagos con stablecoin en World Chain

👤

Obtención de información del usuario

Obtén direcciones de wallet, nombres de usuario, etc.

📱

Integración con UI nativa

Aprovecha las funciones nativas de World App

Stack tecnológico

• Frontend: React, Next.js, Vue.js, Vanilla JS
• SDK: @worldcoin/minikit-js, @worldcoin/minikit-react
• UI Kit: mini-apps-ui-kit-react (opcional)
• Blockchain: World Chain (Optimism L2)

2. Configuración de MiniKit-JS

Instalación

# npm
npm install @worldcoin/minikit-js

# Para React (opcional)
npm install @worldcoin/minikit-react

# Kit de UI (opcional)
npm install @worldcoin/mini-apps-ui-kit-react

Inicialización en React/Next.js

components/MiniKitProvider.tsx

"use client";

import { MiniKit } from "@worldcoin/minikit-js";
import { useEffect, ReactNode } from "react";

export function MiniKitProvider({ children }: { children: ReactNode }) {
  useEffect(() => {
    MiniKit.install();
  }, []);

  return <>{children}</>;
}

app/layout.tsx

import { MiniKitProvider } from "@/components/MiniKitProvider";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <MiniKitProvider>
          {children}
        </MiniKitProvider>
      </body>
    </html>
  );
}

Detección del entorno Mini App

import { MiniKit } from "@worldcoin/minikit-js";

// Verificar si se está ejecutando dentro de World App
if (MiniKit.isInstalled()) {
  console.log("Ejecutándose dentro de World App");
} else {
  console.log("Ejecutándose en el navegador");
}

3. Implementación de verificación con World ID

Con MiniKit, puedes verificar fácilmente si un usuario es un humano verificado por Orb.

Implementación

import { MiniKit, VerificationLevel } from "@worldcoin/minikit-js";

async function verifyUser() {
  if (!MiniKit.isInstalled()) {
    return { success: false, error: "World App required" };
  }

  try {
    const result = await MiniKit.commandsAsync.verify({
      action: "your-app-action-id", // Configurar en Developer Portal
      verification_level: VerificationLevel.Orb, // Requerir verificación Orb
    });

    if (result.finalPayload.status === "success") {
      // Verificar en el backend
      const response = await fetch("/api/verify", {
        method: "POST",
        body: JSON.stringify(result.finalPayload),
      });

      return { success: true, data: await response.json() };
    }
  } catch (error) {
    return { success: false, error };
  }
}

Niveles de verificación

VerificationLevel.Orb

Solo usuarios verificados por Orb. El nivel de seguridad más alto.

VerificationLevel.Device

Nivel de verificación de dispositivo. Más usuarios pueden acceder.

⚠️

Importante

Siempre verifica los resultados en el backend. La verificación solo en el frontend no es segura.

4. Implementación de pagos con USDC

Con MiniKit, puedes implementar fácilmente pagos con USDC en World Chain. Ofrece experiencias de pago sin conexión de wallet y sin comisiones.

Implementación

import { MiniKit, Tokens, tokenToDecimals } from "@worldcoin/minikit-js";

async function initiatePayment(amount: number, reference: string) {
  if (!MiniKit.isInstalled()) {
    return { success: false, error: "World App required" };
  }

  try {
    const result = await MiniKit.commandsAsync.pay({
      reference,  // ID de pedido, etc.
      to: "0xYourWalletAddress",  // Dirección del destinatario
      tokens: [
        {
          symbol: Tokens.USDCE,  // USDC
          token_amount: tokenToDecimals(amount, Tokens.USDCE).toString(),
        },
      ],
      description: "Compra de producto",
    });

    if (result.finalPayload.status === "success") {
      // Pago exitoso
      return {
        success: true,
        transactionId: result.finalPayload.transaction_id
      };
    }
  } catch (error) {
    return { success: false, error };
  }
}

Tokens compatibles

• Tokens.USDCE: USDC (stablecoin)
• Tokens.WLD: Token WLD

Beneficios

✅ Sin conexión de wallet - solo toca
✅ Sin comisiones de gas - transacciones en World Chain
✅ Pagos instantáneos - se completan en segundos
✅ Sin intermediarios - transferencias directas

5. Pruebas y depuración

Desarrollo local

Exponer local con NGROK

ngrok http 3000

Obtén una URL pública con NGROK para hacerlo accesible desde World App

Configurar en Developer Portal

Configura la URL de la App como URL de NGROK en Developer Portal

Probar en World App

Abre tu Mini App directamente desde World App en un dispositivo real

Consejos de depuración

• Usa console.log para verificar las respuestas del SDK
• Detecta el entorno de World App con MiniKit.isInstalled()
• Implementa comportamiento de respaldo para el navegador
• Implementa un manejo de errores completo

6. Recursos y documentación

📚

Documentación oficial

docs.world.org/mini-apps - Especificaciones de API y guías más recientes

🐙

GitHub - MiniKit-JS

Código fuente del SDK y ejemplos

🔧

Developer Portal

Registro de apps, Action ID, configuración

📦

npm - @worldcoin/minikit-js

Información del paquete e historial de versiones

Repositorios de plantillas

• React template (con backend)
• Vanilla JS template
• Next.js template

Disponible en el repositorio de GitHub worldcoin/minikit-js

1. Descripción general del desarrollo de Mini Apps

Lo que puedes hacer

🔐

Verificación con World ID

Verifica si un usuario es un humano verificado por Orb

💳

Pagos con USDC

Pagos con stablecoin en World Chain

👤

Obtención de información del usuario

Obtén direcciones de wallet, nombres de usuario, etc.

📱

Integración con UI nativa

Aprovecha las funciones nativas de World App

Stack tecnológico

• Frontend: React, Next.js, Vue.js, Vanilla JS
• SDK: @worldcoin/minikit-js, @worldcoin/minikit-react
• UI Kit: mini-apps-ui-kit-react (opcional)
• Blockchain: World Chain (Optimism L2)

2. Configuración de MiniKit-JS

Instalación

# npm
npm install @worldcoin/minikit-js

# Para React (opcional)
npm install @worldcoin/minikit-react

# Kit de UI (opcional)
npm install @worldcoin/mini-apps-ui-kit-react

Inicialización en React/Next.js

components/MiniKitProvider.tsx

"use client";

import { MiniKit } from "@worldcoin/minikit-js";
import { useEffect, ReactNode } from "react";

export function MiniKitProvider({ children }: { children: ReactNode }) {
  useEffect(() => {
    MiniKit.install();
  }, []);

  return <>{children}</>;
}

app/layout.tsx

import { MiniKitProvider } from "@/components/MiniKitProvider";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <MiniKitProvider>
          {children}
        </MiniKitProvider>
      </body>
    </html>
  );
}

Detección del entorno Mini App

import { MiniKit } from "@worldcoin/minikit-js";

// Verificar si se está ejecutando dentro de World App
if (MiniKit.isInstalled()) {
  console.log("Ejecutándose dentro de World App");
} else {
  console.log("Ejecutándose en el navegador");
}

3. Implementación de verificación con World ID

Con MiniKit, puedes verificar fácilmente si un usuario es un humano verificado por Orb.

Implementación

import { MiniKit, VerificationLevel } from "@worldcoin/minikit-js";

async function verifyUser() {
  if (!MiniKit.isInstalled()) {
    return { success: false, error: "World App required" };
  }

  try {
    const result = await MiniKit.commandsAsync.verify({
      action: "your-app-action-id", // Configurar en Developer Portal
      verification_level: VerificationLevel.Orb, // Requerir verificación Orb
    });

    if (result.finalPayload.status === "success") {
      // Verificar en el backend
      const response = await fetch("/api/verify", {
        method: "POST",
        body: JSON.stringify(result.finalPayload),
      });

      return { success: true, data: await response.json() };
    }
  } catch (error) {
    return { success: false, error };
  }
}

Niveles de verificación

VerificationLevel.Orb

Solo usuarios verificados por Orb. El nivel de seguridad más alto.

VerificationLevel.Device

Nivel de verificación de dispositivo. Más usuarios pueden acceder.

⚠️

Importante

Siempre verifica los resultados en el backend. La verificación solo en el frontend no es segura.

4. Implementación de pagos con USDC

Con MiniKit, puedes implementar fácilmente pagos con USDC en World Chain. Ofrece experiencias de pago sin conexión de wallet y sin comisiones.

Implementación

import { MiniKit, Tokens, tokenToDecimals } from "@worldcoin/minikit-js";

async function initiatePayment(amount: number, reference: string) {
  if (!MiniKit.isInstalled()) {
    return { success: false, error: "World App required" };
  }

  try {
    const result = await MiniKit.commandsAsync.pay({
      reference,  // ID de pedido, etc.
      to: "0xYourWalletAddress",  // Dirección del destinatario
      tokens: [
        {
          symbol: Tokens.USDCE,  // USDC
          token_amount: tokenToDecimals(amount, Tokens.USDCE).toString(),
        },
      ],
      description: "Compra de producto",
    });

    if (result.finalPayload.status === "success") {
      // Pago exitoso
      return {
        success: true,
        transactionId: result.finalPayload.transaction_id
      };
    }
  } catch (error) {
    return { success: false, error };
  }
}

Tokens compatibles

• Tokens.USDCE: USDC (stablecoin)
• Tokens.WLD: Token WLD

Beneficios

✅ Sin conexión de wallet - solo toca
✅ Sin comisiones de gas - transacciones en World Chain
✅ Pagos instantáneos - se completan en segundos
✅ Sin intermediarios - transferencias directas

5. Pruebas y depuración

Desarrollo local

Exponer local con NGROK

ngrok http 3000

Obtén una URL pública con NGROK para hacerlo accesible desde World App

Configurar en Developer Portal

Configura la URL de la App como URL de NGROK en Developer Portal

Probar en World App

Abre tu Mini App directamente desde World App en un dispositivo real

Consejos de depuración

• Usa console.log para verificar las respuestas del SDK
• Detecta el entorno de World App con MiniKit.isInstalled()
• Implementa comportamiento de respaldo para el navegador
• Implementa un manejo de errores completo

1. Descripción general del desarrollo de Mini Apps

Lo que puedes hacer

Verificación con World ID

Pagos con USDC

Obtención de información del usuario

Integración con UI nativa

Stack tecnológico

2. Configuración de MiniKit-JS

Instalación

Inicialización en React/Next.js

Detección del entorno Mini App

3. Implementación de verificación con World ID

Implementación

Niveles de verificación

VerificationLevel.Orb

VerificationLevel.Device

Importante

4. Implementación de pagos con USDC

Implementación

Tokens compatibles

Beneficios

5. Pruebas y depuración

Desarrollo local

Exponer local con NGROK

Configurar en Developer Portal

Probar en World App

Consejos de depuración

6. Recursos y documentación

Documentación oficial

GitHub - MiniKit-JS

Developer Portal

npm - @worldcoin/minikit-js

Repositorios de plantillas

Obtene WLD extra con este codigo

1. Descripción general del desarrollo de Mini Apps

Lo que puedes hacer

Verificación con World ID

Pagos con USDC

Obtención de información del usuario

Integración con UI nativa

Stack tecnológico

2. Configuración de MiniKit-JS

Instalación

Inicialización en React/Next.js

Detección del entorno Mini App

3. Implementación de verificación con World ID

Implementación

Niveles de verificación

VerificationLevel.Orb

VerificationLevel.Device

Importante

4. Implementación de pagos con USDC

Implementación

Tokens compatibles

Beneficios

5. Pruebas y depuración

Desarrollo local

Exponer local con NGROK

Configurar en Developer Portal

Probar en World App

Consejos de depuración

6. Recursos y documentación

Documentación oficial

GitHub - MiniKit-JS

Developer Portal

npm - @worldcoin/minikit-js

Repositorios de plantillas

Obtene WLD extra con este codigo