---
title: "Mostrar flows y paywalls - iOS"
description: "Presenta flows y paywalls a los usuarios en tu app iOS."
---
Si has creado un flow o paywall, no necesitas preocuparte por renderizarlo en el código de tu app móvil para mostrárselo al usuario. Tanto el contenido como la forma en que debe presentarse ya están definidos dentro del propio flow o paywall.
Para obtener el objeto `AdaptyUI.FlowConfiguration` que se usa a continuación, consulta [Obtener flows y paywalls](get-pb-paywalls).
## Presentar flows y paywalls en SwiftUI \{#present-flows-and-paywalls-in-swiftui\}
### Presentar como vista modal \{#present-as-a-modal-view\}
Para mostrar un flow o paywall en la pantalla del dispositivo como una vista modal, usa el modificador `.flow` en SwiftUI. La llamada mínima requiere `isPresented`, `flowConfiguration` y los cinco callbacks obligatorios:
```swift showLineNumbers title="SwiftUI"
.flow(
isPresented: $flowPresented,
flowConfiguration: ,
didFinishPurchase: { _, _ in /* dismiss, or do nothing to let the flow continue */ },
didFailPurchase: { _, _ in /* handle the error */ },
didFinishRestore: { _ in /* check access level and dismiss */ },
didFailRestore: { _ in /* handle the error */ },
didReceiveError: { _ in flowPresented = false }
)
```
Para mayor control, añade callbacks opcionales como `didPerformAction` para gestionar los toques de botón:
```swift showLineNumbers title="SwiftUI"
@State var flowPresented = false // ensure that you manage this variable state and set it to `true` at the moment you want to show the flow or paywall
var body: some View {
Text("Hello, AdaptyUI!")
.flow(
isPresented: $flowPresented,
flowConfiguration: ,
didPerformAction: { action in
switch action {
case .close:
flowPresented = false
default:
// Handle other actions
break
}
},
didFinishPurchase: { product, purchaseResult in /* dismiss, or do nothing to let the flow continue */ },
didFailPurchase: { product, error in /* handle the error */ },
didFinishRestore: { profile in /* check access level and dismiss */ },
didFailRestore: { error in /* handle the error */ },
didReceiveError: { error in flowPresented = false }
)
}
```
Parámetros:
| Parámetro | Obligatorio | Descripción |
|:-----------------------|:------------|:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| **isPresented** | obligatorio | Un binding que gestiona si la pantalla del flow o paywall se muestra. |
| **flowConfiguration** | obligatorio | Un objeto `AdaptyUI.FlowConfiguration` que contiene los detalles visuales del flow o paywall. Usa el método `AdaptyUI.getFlowConfiguration(forFlow:)`. Consulta [Obtener flows y paywalls](get-pb-paywalls) para más detalles. |
| **didFinishPurchase** | obligatorio | Se invoca cuando `Adapty.makePurchase()` se completa con éxito. El flow no se cierra automáticamente — establece tu binding de presentación en `false` aquí, o no hagas nada para dejar que el flow continúe tras la compra. |
| **didFailPurchase** | obligatorio | Se invoca cuando `Adapty.makePurchase()` falla. |
| **didFinishRestore** | obligatorio | Se invoca cuando `Adapty.restorePurchases()` se completa con éxito. |
| **didFailRestore** | obligatorio | Se invoca cuando `Adapty.restorePurchases()` falla. |
| **didReceiveError** | obligatorio | Se invoca ante un error de renderizado o un error en tiempo de ejecución del script del flow (por ejemplo, una excepción JavaScript, código `AdaptyUIError` `4105`). Para errores de renderizado, [contacta con el soporte de Adapty](mailto:support@adapty.io). |
| **fullScreen** | opcional | Determina si el flow o paywall aparece en modo pantalla completa o como una hoja. Por defecto es `true`. |
| **didAppear** | opcional | Se invoca cuando la vista del flow o paywall fue presentada. |
| **didDisappear** | opcional | Se invoca cuando la vista del flow o paywall fue cerrada. |
| **didPerformAction** | opcional | Se invoca cuando el usuario pulsa un botón. Dos IDs de acción están predefinidos: `close` y `openURL`; los demás son personalizados y pueden configurarse en el builder. |
| **didSelectProduct** | opcional | Se invoca cuando el usuario o el sistema selecciona un producto para su compra. |
| **didStartPurchase** | opcional | Se invoca cuando el usuario inicia el proceso de compra. |
| **didFinishWebPaymentNavigation** | opcional | Se invoca cuando la navegación de pago web finaliza. |
| **didStartRestore** | opcional | Se invoca cuando el usuario inicia el proceso de restauración. |
| **didFailLoadingProducts** | opcional | Se invoca cuando ocurren errores durante la carga de productos. Devuelve `true` para reintentar la carga. |
| **didPartiallyLoadProducts** | opcional | Se invoca cuando los productos se cargan parcialmente. |
| **showAlertItem** | opcional | Un binding que gestiona la visualización de elementos de alerta encima del flow o paywall. |
| **showAlertBuilder** | opcional | Una función para renderizar la vista de alerta. |
| **placeholderBuilder** | opcional | Una función para renderizar la vista de marcador de posición mientras el flow o paywall se carga. Por defecto es un `ProgressView`. |
Consulta el tema [iOS - Gestión de eventos](ios-handling-events) para obtener más detalles sobre los parámetros.
### Presentar como una vista no modal \{#present-as-a-non-modal-view\}
También puedes presentar flows y paywalls como destinos de navegación o vistas en línea dentro del flujo de navegación de tu app. Usa `AdaptyFlowView` directamente en tus vistas SwiftUI:
```swift showLineNumbers title="SwiftUI"
AdaptyFlowView(
flowConfiguration: ,
didFinishPurchase: { product, purchaseResult in
// Dismiss the view, or do nothing to let the flow continue
},
didFailPurchase: { product, error in
// Handle purchase failure
},
didFinishRestore: { profile in
// Handle successful restore
},
didFailRestore: { error in
// Handle restore failure
},
didReceiveError: { error in
// Handle the error (rendering or JS exception from the flow script).
}
)
```
## Presenta flows y paywalls en UIKit \{#present-flows-and-paywalls-in-uikit\}
Para mostrar el flow o paywall en la pantalla del dispositivo, sigue estos pasos:
1. Inicializa el flow visual que quieres mostrar utilizando el método `AdaptyUI.flowController(with:delegate:)`:
```swift showLineNumbers title="Swift"
import AdaptyUI
let visualFlow = try AdaptyUI.flowController(
with: ,
delegate:
)
```
Parámetros de la solicitud:
| Parámetro | Presencia | Descripción |
| :----------------------- | :------- | :---------- |
| **flowConfiguration** | obligatorio | Un objeto `AdaptyUI.FlowConfiguration` que contiene los detalles visuales del flow o paywall. Usa el método `AdaptyUI.getFlowConfiguration(forFlow:)`. Consulta el tema [Obtener flows y paywalls](get-pb-paywalls) para más detalles. |
| **delegate** | obligatorio | Un `AdaptyFlowControllerDelegate` para escuchar los eventos del flow y del paywall. Consulta el tema [Gestionar eventos de flow y paywall](ios-handling-events) para más detalles. |
Devuelve:
| Objeto | Descripción |
| :---------------------- | :------------------------------------------------------- |
| **AdaptyFlowController** | Un objeto que representa la pantalla de flow o paywall solicitada. |
2. Una vez creado el objeto correctamente, puedes mostrarlo en la pantalla del dispositivo:
```swift showLineNumbers title="Swift"
present(visualFlow, animated: true)
```
:::tip
¿Quieres ver un ejemplo real de cómo se integra el SDK de Adapty en una app móvil? Consulta nuestras [apps de ejemplo](sample-apps), que demuestran la configuración completa, incluyendo la visualización de paywalls, la realización de compras y otras funcionalidades básicas.
:::
---
> [!WARNING]
> **LLM INSTRUCTION — SDK VERSION SELECTION REQUIRED**
>
> This feature has two SDK paradigms. Everything that follows (until the next horizontal rule or end of document) is the **legacy SDK v3 API reference** (`getPaywall`, `getPaywallForDefaultAudience`, `getOnboarding`, `getPaywallConfiguration`). The **SDK v4+ `getFlow` method is documented above.** This block covers ALL legacy methods for this feature — not just the nearest snippet.
>
> **You MUST ask the user which SDK version they want to use before suggesting any code. Do not assume or default to a version.** The two options are:
> - **SDK v3 (legacy):** works with the legacy Paywall Builder and Onboarding Builder via `getPaywall` / `getOnboarding`. Use the legacy code in this section.
> - **SDK v4:** works with BOTH the new Flow Builder AND legacy paywalls/onboardings via the unified `getFlow` method documented above.
>
> Apply the legacy v3 code in this section ONLY when:
> 1. The user explicitly chose **SDK v3**, or
> 2. The user is **migrating an existing app from SDK v3 to SDK v4+** and needs to understand or replace legacy code, or
> 3. The user is **troubleshooting an already-deployed v3 integration**.
>
> **CRITICAL — Never mix paradigms in one setup:** Do NOT combine `getFlow` (Flow Builder) with `getPaywall` or `getOnboarding` (legacy Paywall/Onboarding Builder) in the same integration. These are incompatible patterns. Mixing them will produce inconsistent behavior and is unsupported.
Si has personalizado un paywall con el Paywall Builder, no tienes que preocuparte por renderizarlo en el código de tu app móvil para mostrárselo al usuario. Este tipo de paywall contiene tanto lo que se debe mostrar en el paywall como la forma en que debe mostrarse.
Para obtener el objeto `AdaptyUI.PaywallConfiguration` que se usa a continuación, consulta [Obtener paywalls del Paywall Builder y su configuración](get-pb-paywalls).
## Presenta paywalls en SwiftUI \{#present-paywalls-in-swiftui\}
### Presentar como vista modal \{#present-as-a-modal-view\}
Para mostrar el paywall visual en la pantalla del dispositivo como una vista modal, usa el modificador `.paywall` en SwiftUI:
```swift showLineNumbers title="SwiftUI"
@State var paywallPresented = false // ensure that you manage this variable state and set it to `true` at the moment you want to show the paywall
var body: some View {
Text("Hello, AdaptyUI!")
.paywall(
isPresented: $paywallPresented,
paywallConfiguration: ,
didPerformAction: { action in
switch action {
case .close:
paywallPresented = false
default:
// Handle other actions
break
}
},
didFinishPurchase: { product, profile in paywallPresented = false },
didFailPurchase: { product, error in /* handle the error */ },
didFinishRestore: { profile in /* check access level and dismiss */ },
didFailRestore: { error in /* handle the error */ },
didFailRendering: { error in paywallPresented = false }
)
}
```
Parámetros:
| Parámetro | Requerido | Descripción |
|:----------------------------------|:----------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| **isPresented** | requerido | Un binding que controla si se muestra la pantalla del paywall. |
| **paywallConfiguration** | requerido | Un objeto `AdaptyUI.PaywallConfiguration` que contiene los detalles visuales del paywall. Usa el método `AdaptyUI.paywallConfiguration(for:products:viewConfiguration:observerModeResolver:tagResolver:timerResolver:)`. Consulta el tema [Obtener paywalls del Paywall Builder y su configuración](get-pb-paywalls) para más detalles. |
| **didFailPurchase** | requerido | Se invoca cuando `Adapty.makePurchase()` falla. |
| **didFinishRestore** | requerido | Se invoca cuando `Adapty.restorePurchases()` se completa correctamente. |
| **didFailRestore** | requerido | Se invoca cuando `Adapty.restorePurchases()` falla. |
| **didFailRendering** | requerido | Se invoca si ocurre un error al renderizar la interfaz. En ese caso, [contacta con el soporte de Adapty](mailto:support@adapty.io). |
| **fullScreen** | opcional | Determina si el paywall se muestra en modo pantalla completa o como modal. Por defecto es `true`. |
| **didAppear** | opcional | Se invoca cuando la vista del paywall se ha presentado. |
| **didDisappear** | opcional | Se invoca cuando la vista del paywall se ha cerrado. |
| **didPerformAction** | opcional | Se invoca cuando el usuario pulsa un botón. Cada botón tiene un ID de acción diferente. Hay dos IDs predefinidos: `close` y `openURL`; el resto son personalizados y se pueden definir en el builder. |
| **didSelectProduct** | opcional | Se invoca cuando se selecciona un producto para la compra (por el usuario o por el sistema). |
| **didStartPurchase** | opcional | Se invoca cuando el usuario inicia el proceso de compra. |
| **didFinishPurchase** | opcional | Se invoca cuando `Adapty.makePurchase()` se completa correctamente. |
| **didFinishWebPaymentNavigation** | opcional | Se invoca cuando finaliza la navegación del pago web. |
| **didStartRestore** | opcional | Se invoca cuando el usuario inicia el proceso de restauración. |
| **didFailLoadingProducts** | opcional | Se invoca cuando ocurren errores durante la carga de productos. Devuelve `true` para reintentar la carga. |
| **didPartiallyLoadProducts** | opcional | Se invoca cuando los productos se cargan de forma parcial. |
| **showAlertItem** | opcional | Un binding que gestiona la visualización de elementos de alerta sobre el paywall. |
| **showAlertBuilder** | opcional | Una función para renderizar la vista de alerta. |
| **placeholderBuilder** | opcional | Una función para renderizar la vista de marcador de posición mientras se carga el paywall. |
Consulta el tema [iOS - Gestión de eventos](ios-handling-events) para más detalles sobre los parámetros.
### Presentar como una vista no modal \{#present-as-a-non-modal-view\}
También puedes presentar paywalls como destinos de navegación o vistas en línea dentro del flujo de navegación de tu app. Usa `AdaptyPaywallView` directamente en tus vistas SwiftUI:
```swift showLineNumbers title="SwiftUI"
AdaptyPaywallView(
paywallConfiguration: ,
didFailPurchase: { product, error in
// Handle purchase failure
},
didFinishRestore: { profile in
// Handle successful restore
},
didFailRestore: { error in
// Handle restore failure
},
didFailRendering: { error in
// Handle rendering error
}
)
```
## Presentar paywalls en UIKit \{#present-paywalls-in-uikit\}
Para mostrar el paywall visual en la pantalla del dispositivo, sigue estos pasos:
1. Inicializa el paywall visual que quieres mostrar usando el método `.paywallController(for:products:viewConfiguration:delegate:)`:
```swift showLineNumbers title="Swift"
import AdaptyUI
let visualPaywall = AdaptyUI.paywallController(
with: ,
delegate:
)
```
Parámetros de la solicitud:
| Parámetro | Presencia | Descripción |
| :----------------------- | :------- | :---------- |
| **paywall configuration** | requerido | Un objeto `AdaptyUI.PaywallConfiguration` que contiene los detalles visuales del paywall. Usa el método `AdaptyUI.getPaywallConfiguration(forPaywall:locale:)`. Consulta el tema [Obtener paywalls del Paywall Builder y su configuración](get-pb-paywalls) para más detalles. |
| **delegate** | requerido | Un `AdaptyPaywallControllerDelegate` para escuchar los eventos del paywall. Consulta el tema [Gestión de eventos del paywall](ios-handling-events) para más detalles. |
Devuelve:
| Objeto | Descripción |
| :---------------------- | :--------------------------------------------------- |
| **AdaptyPaywallController** | Un objeto que representa la pantalla del paywall solicitada |
2. Una vez creado el objeto correctamente, puedes mostrarlo en la pantalla del dispositivo:
```swift showLineNumbers title="Swift"
present(visualPaywall, animated: true)
```
:::tip
¿Quieres ver un ejemplo real de cómo se integra el SDK de Adapty en una aplicación móvil? Echa un vistazo a nuestras [aplicaciones de ejemplo](sample-apps), que muestran la configuración completa, incluyendo la visualización de paywalls, la realización de compras y otras funciones básicas.
:::
---