> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pay-me.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Introducción

> Integra fácilmente un formulario de pago en tu aplicación web con Pay-me Flex.

Pay-me Flex permite integrar un formulario de pago en aplicaciones web usando una sola interfaz para múltiples métodos de pago. El flujo recomendado combina autenticación, generación de `nonce`, construcción del `payload`, inicialización del componente y captura del resultado desde `responseCallback`.

<Card title="Últimas mejoras" icon="wand-magic-sparkles" href="/checkout-web/flex/ultimas-mejoras">
  Revisa las mejoras recientes de visualización, multidioma, cierre del checkout, Yape UX y número de operación.
</Card>

***

## Flujo inicial

<CardGroup cols={3}>
  <Card title="1. Autenticación" icon="key" href="/api-de-pagos/autenticacion">
    Primero genera el `Access Token` desde el API de Seguridad. Sin ese token no podrás solicitar el `nonce`.
  </Card>

  <Card title="2. API Nonce" icon="shield-check" href="/checkout-web/flex/api-nonce">
    Con el `Access Token` vigente solicita el `nonce` que se usará para inicializar Flex.
  </Card>

  <Card title="3. Librería Flex" icon="code" href="/incluir-libreria-y-estilos-basicos">
    Después de obtener el `nonce`, incluye el CSS y JS del ambiente y continúa con la inicialización del formulario.
  </Card>
</CardGroup>

<Note>
  En Flex, el orden correcto es `Autenticación` → `API Nonce` → inclusión de librería y luego la inicialización del componente.
</Note>

## Implementación del cobro

<CardGroup cols={3}>
  <Card title="Construcción del payload" icon="receipt" href="/checkout-web/flex/construccion-del-payload">
    Arma el `payload` reutilizando la estructura del API de autorización y enviando `payment_method: {}` en el objeto raíz.
  </Card>

  <Card title="Inicializar el componente" icon="gear" href="/checkout-web/flex/inicializar-el-componente">
    Crea la instancia de `FlexPaymentForms`, define métodos visibles y monta el formulario en tu DOM.
  </Card>

  <Card title="Capturar callbacks" icon="bolt" href="/checkout-web/flex/capturar-funciones-callback">
    Procesa `responseCallback`, `trackingCallback` y `onErrorCallback` según el método de pago seleccionado.
  </Card>
</CardGroup>

<Info>
  En Flex, el resultado visible para el frontend entra por `responseCallback(response)`, y ese `response` reutiliza el contrato del API de PayIn correspondiente al método de pago usado.
</Info>

## ¿Por qué Pay-me Flex?

<CardGroup cols={3}>
  <Card title="Una sola integración" icon="plug">
    Una misma interfaz de captura para todos los métodos de pago disponibles.
  </Card>

  <Card title="Fácil de usar" icon="wand-magic-sparkles">
    Elimina la complejidad de administrar flujos de pago independientes.
  </Card>

  <Card title="Seguro" icon="shield-halved">
    Autenticación 3DS integrada y transmisión segura de datos.
  </Card>
</CardGroup>

## Métodos de pago disponibles

<CardGroup cols={3}>
  <Card title="Tarjeta con 3DS" icon="credit-card">
    Visa, Mastercard, Amex y Diners con autenticación 3D Secure.
  </Card>

  <Card title="Yape" icon="mobile-screen">
    Billetera digital con el número de teléfono del cliente.
  </Card>

  <Card title="QR" icon="qrcode">
    Pago escaneando un código QR desde cualquier app bancaria.
  </Card>

  <Card title="Transferencia Bancaria" icon="building-columns">
    Pago directo desde banca en línea.
  </Card>

  <Card title="Cuotéalo" icon="receipt">
    Pago en cuotas sin necesidad de tarjeta de crédito.
  </Card>

  <Card title="Próximamente" icon="clock">
    PagoEfectivo y Powerpay en camino.
  </Card>
</CardGroup>