Habilitar compras con Flow y Paywall Builder en el SDK de React Native

Para habilitar las compras in-app, necesitas entender tres conceptos clave:

Productos – todo lo que los usuarios pueden comprar (suscripciones, consumibles, acceso de por vida)
Flows & paywalls – pantallas que presentan productos a los usuarios, creadas en el Flow & Paywall Builder sin código. El SDK los recupera mediante getFlow. Si prefieres construir la interfaz con tu propio código, consulta Implementar paywalls personalizados.
Placements – dónde y cuándo mostrar flows & paywalls en tu app (como main, onboarding, settings). Los vinculas a placements en el dashboard y los solicitas por ID de placement en tu código. Esto facilita ejecutar pruebas A/B y mostrar opciones distintas a diferentes usuarios.

Adapty te ofrece tres formas de habilitar compras en tu aplicación. Elige la que mejor se adapte a tus necesidades:

Implementación	Complejidad	Cuándo usarla
Adapty Flow & Paywall Builder	✅ Fácil	Creas un flow o paywall completo y listo para compras en el editor sin código. Adapty lo renderiza automáticamente y gestiona toda la lógica de compra, validación de recibos y administración de suscripciones.
Paywalls personalizados	🟡 Media	Implementas la UI de tu paywall en el código de tu app, pero sigues obteniendo el objeto flow de Adapty para mantener flexibilidad en la oferta de productos. Consulta la guía.
Modo observador	🔴 Difícil	Ya tienes tu propia infraestructura de gestión de compras y quieres seguir usándola. Ten en cuenta que el modo observador tiene sus limitaciones en Adapty. Consulta el artículo.

Important

Los pasos a continuación muestran cómo implementar un flow o paywall creado en el Adapty Flow & Paywall Builder.

Si prefieres construir la UI del paywall tú mismo, consulta Implementar paywalls personalizados.

Para mostrar un flow o paywall creado en el Adapty Flow & Paywall Builder, en el código de tu app solo necesitas:

Obtén el flow o el paywall: Obtenlo desde Adapty.
Muéstralo y Adapty gestionará las compras: Muestra la vista en tu app.
Gestiona las acciones de los botones: Asocia las interacciones del usuario con la respuesta de tu app. Por ejemplo, abre enlaces o cierra el paywall cuando el usuario pulse los botones.

Antes de empezar

Antes de empezar, completa estos pasos:

Conecta tu app al App Store y/o Google Play en el Adapty Dashboard.
Crea tus productos en Adapty.
Crea un flow o un paywall y añade productos a él.
Crea un placement y añade tu flow o paywall a él.
Instala y activa el SDK de Adapty en el código de tu app. Esta guía usa las APIs del SDK de Adapty para React Native v4.

1. Obtener el flow o el paywall

Tus flows y paywalls están asociados a placements configurados en el dashboard. Los placements te permiten mostrar distintos flows o paywalls a diferentes audiencias o ejecutar pruebas A/B.

Para obtener un flow o paywall creado en Adapty Flow & Paywall Builder, obtén el objeto flow mediante el ID del placement usando el método getFlow. El flow contiene los elementos de UI y los estilos necesarios para mostrarlo.


try {
  const flow = await adapty.getFlow('YOUR_PLACEMENT_ID');
  // the requested flow
} catch (error) {
  // handle the error
}

2. Mostrar el flow o el paywall

Ahora que tienes el flow, basta con añadir unas pocas líneas para mostrarlo.

Para integrar un flow dentro de tu árbol de componentes existente, usa el componente AdaptyFlowView directamente en la jerarquía de componentes de React Native:


function MyFlow({ flow }) {
  const onPurchaseCompleted = useCallback<FlowEventHandlers['onPurchaseCompleted']>(
    (result, product) => result.type !== 'user_cancelled',
    [],
  );

  return (
    <AdaptyFlowView
      flow={flow}
      style={{ flex: 1 }}
      onPurchaseCompleted={onPurchaseCompleted}
    />
  );
}

Para mostrar el flow como una pantalla independiente, crea un view con el método createFlowView, configura sus manejadores de eventos y luego llama a view.present(). Cada view solo puede usarse una vez. Si necesitas mostrar el flow de nuevo, vuelve a llamar a createFlowView para crear una nueva instancia de view.


try {
  const view = await createFlowView(flow);

  view.setEventHandlers({
    onPurchaseCompleted(result, product) {
      return result.type !== 'user_cancelled';
    },
  });

  await view.present();
} catch (error) {
  // handle the error
}

Tip

Para más detalles sobre cómo mostrar un flow o un paywall, consulta nuestra guía.

3. Gestionar las acciones de los botones

Cuando los usuarios hacen clic en botones del flow o el paywall, el SDK de React Native gestiona automáticamente las compras, la restauración, el cierre de pantalla y la apertura de URLs.

Sin embargo, otros botones tienen IDs personalizados o predefinidos y requieren gestionar las acciones en tu código. También puedes querer anular su comportamiento predeterminado.

Por ejemplo, aquí está el comportamiento predeterminado del botón de cierre. No es necesario añadirlo en el código, pero aquí puedes ver cómo se haría si fuera necesario.

Para el componente React, gestiona las acciones directamente en el componente AdaptyFlowView:


function MyFlow({ flow }) {
  const onCloseButtonPress = useCallback<FlowEventHandlers['onCloseButtonPress']>(
    () => true, // allow the flow to close
    [],
  );
  const onCustomAction = useCallback<FlowEventHandlers['onCustomAction']>(
    (actionId) => false,
    [],
  );

  return (
    <AdaptyFlowView
      flow={flow}
      style={{ flex: 1 }}
      onCloseButtonPress={onCloseButtonPress}
      onCustomAction={onCustomAction}
    />
  );
}

Para la presentación modal, implementa los manejadores de eventos usando setEventHandlers:

const unsubscribe = view.setEventHandlers({
  onCloseButtonPress() {
    return true; // allow the flow to close
  },
});

Tip

Lee nuestras guías sobre cómo gestionar acciones y eventos de botones.

Próximos pasos

Tip

¿Tienes preguntas o estás teniendo algún problema? Consulta nuestro foro de soporte donde encontrarás respuestas a preguntas frecuentes o podrás plantear las tuyas. ¡Nuestro equipo y la comunidad están aquí para ayudarte!

Tu flow o paywall está listo para mostrarse en la aplicación. Prueba tus compras para asegurarte de que puedes completar una compra de prueba desde el flow.

Ahora necesitas verificar el nivel de acceso de los usuarios para asegurarte de mostrar un paywall o dar acceso a las funciones de pago a los usuarios correctos.

Ejemplo completo

Aquí se muestra cómo integrar todos los pasos de esta guía en tu aplicación.


export default function FlowScreen() {
  const [flow, setFlow] = useState(null);

  const loadFlow = async () => {
    try {
      const flowData = await adapty.getFlow('YOUR_PLACEMENT_ID');
      setFlow(flowData);
    } catch (error) {
      console.warn('Error loading flow:', error);
    }
  };

  const onCloseButtonPress = useCallback<FlowEventHandlers['onCloseButtonPress']>(
    () => true,
    [],
  );

  const onPurchaseCompleted = useCallback<FlowEventHandlers['onPurchaseCompleted']>(
    (result, product) => result.type !== 'user_cancelled',
    [],
  );

  useEffect(() => {
    loadFlow();
  }, []);

  return (
    <View style={{ flex: 1 }}>
      {flow ? (
        <AdaptyFlowView
          flow={flow}
          style={{ flex: 1 }}
          onCloseButtonPress={onCloseButtonPress}
          onPurchaseCompleted={onPurchaseCompleted}
        />
      ) : (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Button title="Load Flow" onPress={loadFlow} />
        </View>
      )}
    </View>
  );
}


export default function FlowScreen() {
  const showFlow = async () => {
    try {
      const flow = await adapty.getFlow('YOUR_PLACEMENT_ID');

      const view = await createFlowView(flow);

      view.setEventHandlers({
        onCloseButtonPress() {
          return true;
        },
        onPurchaseCompleted(result, product) {
          return result.type !== 'user_cancelled';
        },
      });

      await view.present();
    } catch (error) {
      // handle any error that may occur during the process
      console.warn('Error showing flow:', error);
    }
  };

  // you can add a button to manually trigger the flow for testing purposes
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Show Flow" onPress={showFlow} />
    </View>
  );
}