Flow ve paywallları görüntüle - Capacitor

Flow Builder’da bir flow veya paywall oluşturduysanız, bunu kullanıcıya göstermek için mobil uygulama kodunuzda ayrıca render etmeniz gerekmez. Bu tür bir flow, içinde ne gösterileceğini ve nasıl gösterileceğini zaten barındırır.

Başlamadan önce şunlardan emin olun:

1. Bir flow veya paywall oluşturduğunuzdan.
2. Bunu bir placement’a eklediğinizden.
3. Flow’u fetch edip view’ı hazırladığınızdan.

Bir flow veya paywall’ı bağımsız bir ekran olarak görüntülemek için, createFlowView metoduyla oluşturulan view üzerinde view.present() metodunu kullanın. Her view yalnızca bir kez kullanılabilir. Flow’u tekrar görüntülemeniz gerekiyorsa, yeni bir view örneği oluşturmak için createFlowView’ı bir kez daha çağırın.

const view = await createFlowView(flow);

// İsteğe bağlı: flow olaylarını yönetin (kapat, satın alma, geri yükleme, vb.)
// await view.setEventHandlers({ ... });

try {
  await view.present();
} catch (error) {
  // hatayı yönetin
}

iOS sunum stilini yapılandırma

present() metoduna iosPresentationStyle parametresini geçirerek flow’un iOS’ta nasıl sunulacağını yapılandırın. Parametre 'full_screen' (varsayılan) veya 'page_sheet' değerlerini kabul eder. Android’de flow’lar her zaman tam ekran activity olarak görüntülenir.

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

Geliştirici tanımlı zamanlayıcı kullanma

Mobil uygulamanızda geliştirici tanımlı zamanlayıcıları kullanmak için timerId değerini, bu örnekte CUSTOM_TIMER_NY’yi kullanın; bu, Adapty kontrol panelinde ayarladığınız geliştirici tanımlı zamanlayıcının Timer ID’sidir. Bu sayede uygulamanız zamanlayıcıyı doğru değerle (örneğin, zamanlayıcının bitiş zamanı olan Yılbaşı gününden mevcut zamanın çıkarılmasıyla hesaplanan 13d 09h 03m 34s gibi) dinamik olarak günceller.

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

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

Bu örnekte CUSTOM_TIMER_NY, Adapty kontrol panelinde ayarladığınız geliştirici tanımlı zamanlayıcının Timer ID’sidir. Zamanlayıcı, uygulamanızın zamanlayıcıyı doğru değerle (örneğin, zamanlayıcının bitiş zamanı olan Yılbaşı gününden mevcut zamanın çıkarılmasıyla hesaplanan 13d 09h 03m 34s gibi) dinamik olarak güncellemesini sağlar.

İletişim kutusunu göster

Android’de bir flow görünümü sunulduğunda, native uyarı iletişim kutuları yerine bu yöntemi kullanın. Android’de normal uyarılar, flow görünümünün arkasında görünür ve bu da kullanıcılar tarafından görülememelerine neden olur. Bu yöntem, tüm platformlarda flow’un üzerinde iletişim kutusunun doğru şekilde gösterilmesini sağlar.

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
}

Bir aboneliği diğeriyle değiştirme

Android’de bir kullanıcı aktif bir aboneliği varken yeni bir abonelik satın almaya çalıştığında, flow view oluşturulurken abonelik güncelleme parametreleri geçirerek yeni satın alma işleminin nasıl ele alınacağını kontrol edebilirsiniz. Mevcut aboneliği yenisiyle değiştirmek için createFlowView içinde productPurchaseParams kullanırken oldSubVendorProductId ve prorationMode parametrelerini belirtin.

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 });

Paywall Builder kullanarak bir paywall özelleştirdiyseniz, bunu kullanıcıya göstermek için mobil uygulama kodunuzda ayrıca render etmeniz gerekmez. Bu tür bir paywall, hem içeriği hem de görüntülenme biçimini barındırır.

Bir paywall’ı görüntülemek için, createPaywallView metodu ile oluşturulan view üzerinde view.present() metodunu kullanın. Her view yalnızca bir kez kullanılabilir. Paywall’ı tekrar görüntülemeniz gerekiyorsa, yeni bir view örneği oluşturmak için createPaywallView’ı bir kez daha çağırın.

const view = await createPaywallView(paywall);

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

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

Geliştirici tanımlı zamanlayıcıyı kullanma

Mobil uygulamanızda geliştirici tanımlı zamanlayıcıları kullanmak için timerId’yi, bu örnekte CUSTOM_TIMER_NY’yi, yani Adapty kontrol panelinde ayarladığınız geliştirici tanımlı zamanlayıcının Timer ID’sini kullanın. Bu sayede uygulamanız zamanlayıcıyı doğru değerle dinamik olarak günceller; örneğin 13d 09h 03m 34s (zamanlayıcının bitiş zamanı olan Yılbaşı gibi bir tarihin, o anki zamandan çıkarılmasıyla hesaplanır).

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

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

Bu örnekte, CUSTOM_TIMER_NY Adapty kontrol panelinde belirlediğiniz geliştirici tanımlı zamanlayıcının Timer ID’sidir. Zamanlayıcı, uygulamanızın zamanlayıcıyı doğru değerle dinamik olarak güncellemesini sağlar—örneğin 13d 09h 03m 34s (zamanlayıcının bitiş saatinden, Yılbaşı gibi, mevcut zaman çıkarılarak hesaplanır).

İletişim kutusu gösterme

Android’de bir paywall görünümü sunulduğunda, yerel uyarı iletişim kutuları yerine bu metodu kullanın. Android’de normal uyarılar paywall görünümünün arkasında göründüğünden kullanıcılar tarafından görülemez. Bu metod, tüm platformlarda iletişim kutusunun paywall’ın üzerinde doğru şekilde gösterilmesini sağlar.

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
}

iOS sunum stilini yapılandırın

iosPresentationStyle parametresini present() metoduna geçirerek paywallın iOS’ta nasıl sunulacağını yapılandırın. Parametre 'full_screen' (varsayılan) veya 'page_sheet' değerlerini kabul eder.

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