Si has personalizado un paywall con el Paywall Builder, no necesitas preocuparte por renderizarlo en el código de tu aplicación móvil para mostrárselo al usuario. Ese paywall contiene tanto lo que debe mostrarse como la forma en que debe mostrarse.

Para mostrar un paywall, usa el método view.present() sobre 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 otra vez para crear una nueva instancia de view.

const view = await createPaywallView(paywall);

view.setEventHandlers({
  onUrlPress(url) {
    window.open(url, '_blank');
    return false; 
  },
});

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

Usar un temporizador definido por el desarrollador

Para usar temporizadores definidos por el desarrollador en tu aplicación móvil, utiliza el timerId; en este ejemplo, CUSTOM_TIMER_NY, que es el Timer ID del temporizador definido por el desarrollador que estableciste en el Adapty dashboard. Esto garantiza que tu aplicación actualice dinámicamente el temporizador con el valor correcto, como 13d 09h 03m 34s (calculado como la hora de fin del temporizador, por ejemplo el Año Nuevo, menos la hora actual).

const customTimers = { 'CUSTOM_TIMER_NY': new Date(2025, 0, 1) };

const view = await createPaywallView(paywall, { customTimers });

En este ejemplo, CUSTOM_TIMER_NY es el Timer ID del temporizador definido por el desarrollador que estableciste en el Adapty dashboard. El temporizador garantiza que tu aplicación actualice dinámicamente el valor con el resultado correcto, como 13d 09h 03m 34s (calculado como la hora de fin del temporizador, por ejemplo el Año Nuevo, menos la hora actual).

Mostrar un diálogo

Usa este método en lugar de los diálogos de alerta nativos cuando se presenta una vista de paywall en Android. En Android, las alertas normales aparecen detrás de la vista del paywall, lo que las hace invisibles para los usuarios. Este método garantiza que el diálogo se muestre correctamente por encima del paywall en todas las plataformas.

try {
  const action = await view.showDialog({
    title: 'Close paywall?',
    content: 'You will lose access to exclusive offers.',
    primaryActionTitle: 'Stay',
    secondaryActionTitle: 'Close',
  });
  
  if (action === 'secondary') {
    // User confirmed - close the paywall
    await view.dismiss();
  }
  // If primary - do nothing, user stays
} catch (error) {
  // handle error
}

Configurar el estilo de presentación en iOS

Configura cómo se presenta el paywall en iOS pasando el parámetro iosPresentationStyle al método present(). El parámetro acepta los valores 'full_screen' (predeterminado) o 'page_sheet'.

await view.present({ iosPresentationStyle: 'page_sheet' });