Habilitar compras usando paywalls en React Native SDK

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)
Paywalls: configuraciones que definen qué productos ofrecer. En Adapty, los paywalls son la única forma de recuperar productos, pero este diseño te permite modificar ofertas, precios y combinaciones de productos sin tocar el código de tu app.
Placements – dónde y cuándo muestras los paywalls en tu app (como main, onboarding, settings). Configuras los paywalls para los placements en el dashboard y luego los solicitas por ID de placement en tu código. Esto facilita ejecutar pruebas A/B y mostrar diferentes paywalls a distintos usuarios.

Adapty te ofrece tres formas de habilitar compras en tu app. Elige una según los requisitos de tu app:

Implementación	Complejidad	Cuándo usarla
Adapty Paywall Builder	✅ Fácil	Creas un paywall completo y listo para compras en el constructor sin código. Adapty lo renderiza automáticamente y gestiona todo el flujo de compra, validación de recibos y administración de suscripciones en segundo plano.
Paywalls creados manualmente	🟡 Medio	Implementas la UI del paywall en el código de tu app, pero aún obtienes el objeto paywall de Adapty para mantener flexibilidad en las ofertas de productos. Consulta la guía.
Modo observer	🔴 Difícil	Ya tienes tu propia infraestructura de gestión de compras y quieres seguir usándola. Ten en cuenta que el modo observer tiene sus limitaciones en Adapty. Consulta el artículo.

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

Si no quieres usar el Paywall Builder, consulta la guía para gestionar compras en paywalls creados manualmente.

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

Obtener el paywall: Obtén el paywall desde Adapty.
Mostrar el paywall y Adapty gestionará las compras por ti: Muestra el contenedor del paywall que obtuviste en tu app.
Gestionar las acciones de los botones: Asocia las interacciones del usuario con el paywall a las respuestas de tu app. Por ejemplo, abrir enlaces o cerrar el paywall cuando los usuarios pulsan 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 paywall y añade productos.
Crea un placement y añade tu paywall.
Instala y activa el SDK de Adapty en el código de tu app.

La forma más rápida de completar estos pasos es seguir la guía de inicio rápido o crear paywalls y placements usando el CLI para desarrolladores.

1. Obtener el paywall

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

Para obtener un paywall creado en el Adapty Paywall Builder, necesitas:

Obtener el objeto paywall por el ID del placement usando el método getPaywall y comprobar si es un paywall creado en el builder mediante la propiedad hasViewConfiguration.
Crear la vista del paywall usando el método createPaywallView. La vista contiene los elementos de UI y el estilo necesario para mostrar el paywall.

Para obtener la configuración de la vista, debes activar el toggle Show on device en el Paywall Builder. De lo contrario, obtendrás una configuración de vista vacía y el paywall no se mostrará.


try {
    const placementId = 'YOUR_PLACEMENT_ID';

    const paywall = await adapty.getPaywall(placementId);
  // the requested paywall
} catch (error) {
    // handle the error
}

if (paywall.hasViewConfiguration) {
    try {
        const view = await createPaywallView(paywall);
    } catch (error) {
        // handle the error
    }
} else {
    //use your custom logic
}

2. Mostrar el paywall

Ahora que tienes la configuración del paywall, basta con añadir unas pocas líneas para mostrarlo.

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


function MyPaywall({ paywall }) {
  const onCloseButtonPress = useCallback<EventHandlers['onCloseButtonPress']>(() => {}, []);
  const onUrlPress = useCallback<EventHandlers['onUrlPress']>((url) => {
    Linking.openURL(url);
  }, []);

  return (
    <AdaptyPaywallView
      paywall={paywall}
      style={styles.container}
      onCloseButtonPress={onCloseButtonPress}
      onUrlPress={onUrlPress}
    />
  );
}

Para mostrar el paywall como una pantalla independiente, usa el método view.present() en el view creado por el método createPaywallView. Cada view solo puede usarse una vez. Si necesitas mostrar el paywall de nuevo, llama a createPaywallView una vez más para crear una nueva instancia de view.

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

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

3. Gestionar las acciones de los botones

Cuando los usuarios pulsan botones en el paywall, el SDK de React Native gestiona automáticamente las compras, la restauración, el cierre del paywall 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 sobreescribir su comportamiento predeterminado.

Por ejemplo, aquí está el comportamiento predeterminado para el botón de cierre. No necesitas añadirlo al código, pero aquí puedes ver cómo se hace si fuera necesario.

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


function MyPaywall({ paywall }) {
  const onUrlPress = useCallback<EventHandlers['onUrlPress']>((url) => {
    Linking.openURL(url);
  }, []);
  const onCloseButtonPress = useCallback<EventHandlers['onCloseButtonPress']>(() => {}, []);
  const onCustomAction = useCallback<EventHandlers['onCustomAction']>((actionId) => {}, []);

  return (
    <AdaptyPaywallView
      paywall={paywall}
      style={styles.container}
      onUrlPress={onUrlPress}
      onCloseButtonPress={onCloseButtonPress}
      onCustomAction={onCustomAction}
    />
  );
}

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

const unsubscribe = view.setEventHandlers({
    onCloseButtonPress() {
        return true; // allow paywall closing
    }
});

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

Próximos pasos

¿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 paywall está listo para mostrarse en la app. Prueba tus compras en el sandbox del App Store o en Google Play Store para asegurarte de que puedes completar una compra de prueba desde el paywall.

Ahora necesitas comprobar 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 esos pasos juntos en tu app.


export default function PaywallScreen() {
  const [paywall, setPaywall] = useState(null);

  const loadPaywall = async () => {
    try {
      const paywallData = await adapty.getPaywall('YOUR_PLACEMENT_ID');

      if (paywallData.hasViewConfiguration) {
        setPaywall(paywallData);
      }
    } catch (error) {
      console.warn('Error loading paywall:', error);
    }
  };

  const onUrlPress = useCallback<EventHandlers['onUrlPress']>((url) => {
    Linking.openURL(url);
  }, []);

  const onCloseButtonPress = useCallback<EventHandlers['onCloseButtonPress']>(() => {
    // Handle close button press
  }, []);

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

  return (
    <View style={{ flex: 1 }}>
      {paywall ? (
        <AdaptyPaywallView
          paywall={paywall}
          style={{ flex: 1 }}
          onUrlPress={onUrlPress}
          onCloseButtonPress={onCloseButtonPress}
        />
      ) : (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Button title="Load Paywall" onPress={loadPaywall} />
        </View>
      )}
    </View>
  );
}


export default function PaywallScreen() {
  const showPaywall = async () => {
    try {
      const paywall = await adapty.getPaywall('YOUR_PLACEMENT_ID');

      if (!paywall.hasViewConfiguration) {
        // use your custom logic
        return;
      }

      const view = await createPaywallView(paywall);

      view.setEventHandlers({
          onCloseButtonPress() {
              return true;
        },
      });

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

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