Mostrar flows y paywalls - Capacitor

Si has creado un flow o paywall en el Flow Builder, no necesitas preocuparte por renderizarlo en el código de tu app móvil para mostrárselo al usuario. Un flow de este tipo contiene tanto lo que debe mostrarse como la forma en que debe hacerlo.

Antes de empezar, asegúrate de que:

1. Has creado un flow o paywall.
2. Lo has añadido a un placement.
3. Has obtenido el flow y preparado la vista.

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

const view = await createFlowView(flow);

// Optional: handle flow events (close, purchase, restore, etc)
// await view.setEventHandlers({ ... });

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

Configura el estilo de presentación en iOS

Configura cómo se muestra el flow en iOS pasando el parámetro iosPresentationStyle al método present(). El parámetro acepta los valores 'full_screen' (por defecto) o 'page_sheet'. En Android, los flows siempre se muestran como una actividad a pantalla completa.

try {
  await view.present({ iosPresentationStyle: 'page_sheet' });
} catch (error) {
  // handle the error
}

Usar temporizadores definidos por el desarrollador

Para usar temporizadores definidos por el desarrollador en tu app, utiliza el timerId, en este ejemplo CUSTOM_TIMER_NY, el Timer ID del temporizador definido por el desarrollador que configuraste en el Adapty dashboard. Esto garantiza que tu app actualice dinámicamente el temporizador con el valor correcto, como 13d 09h 03m 34s (calculado como la hora de finalización 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 createFlowView(flow, { customTimers });

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

Mostrar diálogo

Usa este método en lugar de los diálogos de alerta nativos cuando se muestre una vista de flow en Android. En Android, las alertas normales aparecen detrás de la vista del flow, lo que las hace invisibles para los usuarios. Este método garantiza que el diálogo se muestre correctamente por encima del flow 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 flow
    await view.dismiss();
  }
  // If primary - do nothing, user stays
} catch (error) {
  // handle error
}

Reemplazar una suscripción por otra

Cuando un usuario intenta comprar una nueva suscripción mientras ya tiene otra activa en Android, puedes controlar cómo debe gestionarse la nueva compra pasando parámetros de actualización de suscripción al crear la vista del flow. Para reemplazar la suscripción actual por la nueva, usa productPurchaseParams en createFlowView con los parámetros oldSubVendorProductId y prorationMode.

const productPurchaseParams = flow.paywalls
  .flatMap((paywall) => paywall.productIdentifiers)
  .map((productId) => {
    const params: MakePurchaseParamsInput = {};
    if (Capacitor.getPlatform() === 'android') {
      params.android = {
        subscriptionUpdateParams: {
          oldSubVendorProductId: 'PRODUCT_ID_OF_THE_CURRENT_ACTIVE_SUBSCRIPTION',
          prorationMode: 'with_time_proration',
        },
      };
    }
    return { productId, params };
  });

const view = await createFlowView(flow, { productPurchaseParams });

Si has personalizado un paywall con el Paywall Builder, no necesitas preocuparte por renderizarlo en el código de tu app para mostrárselo al usuario. Ese paywall contiene tanto qué mostrar como de qué forma mostrarlo.

Para mostrar un paywall, 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 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 temporizadores definidos por el desarrollador

Para usar temporizadores definidos por el desarrollador en tu app, utiliza el timerId; en este ejemplo, CUSTOM_TIMER_NY, el Timer ID del temporizador definido por el desarrollador que configuraste en el Adapty dashboard. Esto garantiza que tu app actualice dinámicamente el temporizador con el valor correcto, como 13d 09h 03m 34s (calculado como la hora de finalización 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 configuraste en el Adapty dashboard. El temporizador garantiza que tu app actualice dinámicamente el temporizador con el valor correcto, como 13d 09h 03m 34s (calculado como la hora de finalización 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 haya una vista de paywall en pantalla 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' (por defecto) o 'page_sheet'.

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