Flow'ları Observer modunda sunma - React Native

Builder ile bir flow veya paywall özelleştirdiyseniz, bunu kullanıcıya göstermek için mobil uygulama kodunuzda ayrıca render etmeniz gerekmez. Bu tür bir flow veya paywall, hem ne gösterilmesi gerektiğini hem de nasıl gösterilmesi gerektiğini içerir.

Bu bölüm yalnızca Observer modu için geçerlidir. Observer modunda çalışmıyorsanız, Flow’ları ve paywall’ları görüntüleme konusuna bakın.

Bu özellik, Adapty React Native SDK 4.0 veya sonrasını gerektirir — daha önce yalnızca yerel iOS ve Android SDK’larında mevcuttu. Yükseltmek için migration kılavuzuna bakın.

Flow’ları sunmaya başlamadan önce (Genişletmek için tıklayın)

Adapty’nin App Store ile ve Google Play ile ilk entegrasyonunu kurun. 2. Adapty SDK’yı kurun ve yapılandırın. observerMode parametresini true olarak ayarladığınızdan emin olun. React Native SDK kurulum kılavuzuna başvurun. 3. Adapty Kontrol Paneli’nde ürünler oluşturun. 4. Builder’larda flow’lar veya paywaller yapılandırın ve bunlara ürünler atayın. 5. Placement’lar oluşturun ve flow’larınızı veya paywalllerinizi bunlara atayın. 6. Mobil uygulama kodunuzda flow’ları ve yapılandırmalarını alın.

Observer modunda SDK, satın alma işlemlerini sizin yerinize gerçekleştirmez. Kullanıcı Adapty tarafından oluşturulan bir flow veya paywall’da satın alma ya da geri yükleme butonuna dokunduğunda, SDK sizin onObserverPurchaseInitiated veya onObserverRestoreInitiated olay işleyicinizi çağırır — satın alma veya geri yükleme işlemini orada kendi kodunuzla gerçekleştirin.

Observer modu olay işleyicilerini ayarlayın

Diğer platformlardan farklı olarak, ayrı bir çözümleyici nesnesi yoktur — işleyiciler normal olay işleyicilerinin bir parçasıdır; bu nedenle sunduğunuz her flow’da bunları ayarlayın.

React component için işleyicileri AdaptyFlowView’a prop olarak geçirin:


function MyFlow({ flow }) {
  const onObserverPurchaseInitiated = useCallback<
    FlowEventHandlers['onObserverPurchaseInitiated']
  >((product, onStartPurchase, onFinishPurchase) => {
    onStartPurchase(); // the flow shows its loading indicator
    myPurchaseApi(product.vendorProductId)
      .then((transactionId) => adapty.reportTransaction(transactionId, flow.variationId))
      .finally(() => onFinishPurchase()); // the flow hides the loading indicator
  }, [flow]);

  const onObserverRestoreInitiated = useCallback<
    FlowEventHandlers['onObserverRestoreInitiated']
  >((onStartRestore, onFinishRestore) => {
    onStartRestore();
    myRestoreApi().finally(() => onFinishRestore());
  }, []);

  return (
    <AdaptyFlowView
      flow={flow}
      onObserverPurchaseInitiated={onObserverPurchaseInitiated}
      onObserverRestoreInitiated={onObserverRestoreInitiated}
      // ... your other event handlers
    />
  );
}

Gömülü bileşende, bir işleyicinin döndürdüğü değer flow’u kapatmaz — başarılı bir satın alma veya geri yükleme işleminden sonra bileşeni kendiniz unmount edin.

Modal sunum için, oluşturduğunuz view üzerinde işleyicileri ayarlayın:


const view = await createFlowView(flow);

const unsubscribe = view.setEventHandlers({
  onObserverPurchaseInitiated(product, onStartPurchase, onFinishPurchase) {
    onStartPurchase(); // the flow shows its loading indicator
    myPurchaseApi(product.vendorProductId)
      .then((transactionId) => adapty.reportTransaction(transactionId, flow.variationId))
      .finally(() => onFinishPurchase()); // the flow hides the loading indicator
    return false; // keep the flow open; dismiss it yourself after success
  },
  onObserverRestoreInitiated(onStartRestore, onFinishRestore) {
    onStartRestore();
    myRestoreApi().finally(() => onFinishRestore());
    return false;
  },
});

onObserverPurchaseInitiated işleyicisi, kullanıcının bir satın alma başlattığını; onObserverRestoreInitiated ise kullanıcının bir geri yükleme başlattığını size bildirir. Buna yanıt olarak özel satın alma veya geri yükleme flow’unuzu tetikleyin.

Ayrıca, satın alma veya geri yükleme sürecini AdaptyUI’ya bildirmek için aşağıdaki callback’leri çağırmayı unutmayın. Bu, yükleyiciyi göstermek gibi işlemlerin düzgün çalışması için gereklidir:

Callback	Description
onStartPurchase()	Satın alma başladığında AdaptyUI’ya bildirimde bulunmak için bu callback çağrılmalıdır.
onFinishPurchase()	Satın alma tamamlandığında AdaptyUI’ya bildirimde bulunmak için bu callback çağrılmalıdır.
onStartRestore()	Geri yükleme başladığında AdaptyUI’ya bildirimde bulunmak için bu callback çağrılmalıdır.
onFinishRestore()	Geri yükleme tamamlandığında AdaptyUI’ya bildirimde bulunmak için bu callback çağrılmalıdır.

Flow’u sunun

Flow’u her zamanki gibi sunun: flow’u alın ve görünümünü oluşturun, ardından sunun. Herhangi bir ek parametre gerekmez — handler’lar yalnızca SDK observerMode: true ile etkinleştirildiğinde tetiklenir.

İşlemi raporlamayı ve paywall ile ilişkilendirmeyi unutmayın. Aksi takdirde Adapty işlemi tanımayacak ve satın almanın kaynak paywall’ını belirleyemeyecektir.