Flow'ları Observer modunda sunma - React Native

Observer modu kullanıyorsanız, satın alma mantığından siz sorumlusunuz. Ancak paywall arayüzünü Flow & Paywall Builder’a devredebilirsiniz.

Ekranı builder’da tasarlayın, Adapty SDK onu natively render etsin. Metni, düzeni ve fiyatlandırmayı istediğiniz zaman, uygulama güncellemesi gerektirmeden değiştirin.

Bu kılavuz, bir flow’un nasıl sunulacağını ve satın alma callback’lerinin nasıl yönetileceğini gösterir. Satın alma işlemlerini Adapty sizin için tamamlıyorsa, bunun yerine Flow ve paywallları görüntüleme bölümüne bakın.

Başlamadan önce

Şunlara ihtiyacınız var:

• Adapty React Native SDK 4.0 veya üzeri: Daha eski sürümler flow’ları render edemez. Mevcut bir uygulamayı taşımak için migration kılavuzuna bakın.
• observerMode değeri true olarak ayarlanmış: React Native SDK kurulum kılavuzuna bakın.
• İlk mağaza entegrasyonu: Adapty’yi App Store ile ve Google Play ile kurun.
• Ürünleri olan yayımlanmış bir flow: Flow & Paywall Builder’da oluşturun ve ürünler atayın.
• Bir flow placement’ı: Placement oluşturun ve flow’unuzu atayın.
• Uygulamanızda fetch edilmiş flow: Sunmadan önce flow’u ve yapılandırmasını alın.

Observer modunda SDK, satın alma işlemlerini sizin yerinize gerçekleştirmez. Kullanıcı Adapty tarafından render edilen bir flow’da satın alma veya geri yükleme düğmesine 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.

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

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:

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.