React Native SDK'da Flow Builder ile satın almaları etkinleştirme

Uygulama içi satın almaları etkinleştirmek için üç temel kavramı anlamanız gerekir:

Ürünler – kullanıcıların satın alabileceği her şey (abonelikler, consumable’lar, süresiz erişim)
Flow’lar – kullanıcılara ürünleri sunan, kod gerektirmeyen Flow Builder’da oluşturulan ekran dizileri. SDK bunları getFlow aracılığıyla getirir. Arayüzü kendi kodunuzda oluşturmayı tercih ederseniz, bunun yerine bir paywall kullanın — bkz. Paywall’ları manuel olarak uygulama.
Placement’lar – flow’ları uygulamanızda nerede ve ne zaman göstereceğiniz (main, onboarding, settings gibi). Flow’ları kontrol panelinde placement’lara bağlar, ardından kodunuzda placement ID’sine göre istersiniz. Bu, A/B testleri çalıştırmayı ve farklı kullanıcılara farklı flow’lar göstermeyi kolaylaştırır.

Adapty, uygulamanızda satın almaları etkinleştirmek için üç farklı yöntem sunar. Uygulama gereksinimlerinize göre birini seçin:

Uygulama yöntemi	Karmaşıklık	Ne zaman kullanılır
Adapty Flow Builder	✅ Kolay	Kod gerektirmeyen builder’da eksiksiz, satın almaya hazır bir flow oluşturursunuz. Adapty bunu otomatik olarak render eder ve tüm karmaşık satın alma sürecini, makbuz doğrulamasını ve abonelik yönetimini arka planda halleder.
Manuel olarak oluşturulan paywall’lar	🟡 Orta	Paywall arayüzünüzü uygulama kodunuzda uygularsınız, ancak ürün tekliflerinde esnekliği korumak için flow nesnesini yine de Adapty’den alırsınız. Bkz. rehber.
Gözlemci modu	🔴 Zor	Kendi satın alma yönetim altyapınız zaten var ve onu kullanmaya devam etmek istiyorsunuz. Gözlemci modunun Adapty’de bazı sınırlamaları olduğunu unutmayın. Bkz. makale.

Aşağıdaki adımlar, Adapty Flow Builder’da oluşturulan bir flow’un nasıl uygulanacağını gösterir.

Paywall arayüzünü kendiniz oluşturmayı tercih ederseniz, bkz. Paywall’ları manuel olarak uygulama.

Adapty Flow Builder’da oluşturulan bir flow’u görüntülemek için uygulama kodunuzda yalnızca şunları yapmanız gerekir:

Flow’u alın: Onu Adapty’den alın.
Görüntüleyin, satın almaları Adapty sizin için halleder: View’i uygulamanızda gösterin.
Buton eylemlerini yönetin: Kullanıcı etkileşimlerini, uygulamanızın bunlara vereceği yanıtla ilişkilendirin. Örneğin, kullanıcılar butonlara tıkladığında bağlantıları açın veya flow’u kapatın.

Başlamadan önce

Başlamadan önce şu adımları tamamlayın:

Adapty Kontrol Paneli’nde uygulamanızı App Store ve/veya Google Play ile bağlayın.
Adapty’de ürünlerinizi oluşturun.
Bir flow oluşturun ve ona ürünler ekleyin.
Bir placement oluşturun ve flow’unuzu ona ekleyin.
Uygulama kodunuzda Adapty SDK’yı yükleyin ve etkinleştirin. Bu rehber Adapty React Native SDK v4 API’lerini kullanır.

1. Flow’u alın

Flow’larınız, kontrol panelinde yapılandırılan placement’larla ilişkilendirilir. Placement’lar, farklı kitleler için farklı flow’lar çalıştırmanıza veya A/B testleri çalıştırmanıza olanak tanır.

Adapty Flow Builder’da oluşturulan bir flow’u almak için, getFlow metodunu kullanarak flow nesnesini placement ID’siyle alın. Flow, onu görüntülemek için gereken arayüz öğelerini ve stilini içerir.


try {
  const flow = await adapty.getFlow('YOUR_PLACEMENT_ID');
  // the requested flow
} catch (error) {
  // handle the error
}

2. Flow’u görüntüleyin

Artık flow’a sahip olduğunuzda, onu görüntülemek için birkaç satır eklemeniz yeterlidir.

Bir flow’u mevcut bileşen ağacınıza gömmek için, AdaptyFlowView bileşenini doğrudan React Native bileşen hiyerarşinizde kullanın:


function MyFlow({ flow }) {
  const onPurchaseCompleted = useCallback<FlowEventHandlers['onPurchaseCompleted']>(
    (result, product) => result.type !== 'user_cancelled',
    [],
  );

  return (
    <AdaptyFlowView
      flow={flow}
      style={{ flex: 1 }}
      onPurchaseCompleted={onPurchaseCompleted}
    />
  );
}

Flow’u bağımsız bir ekran olarak görüntülemek için, createFlowView metoduyla bir view oluşturun, olay işleyicilerini ayarlayın, ardından view.present() çağırın. Her view yalnızca bir kez kullanılabilir. Flow’u tekrar görüntülemeniz gerekirse, yeni bir view örneği oluşturmak için createFlowView’u bir kez daha çağırın.


try {
  const view = await createFlowView(flow);

  view.setEventHandlers({
    onPurchaseCompleted(result, product) {
      return result.type !== 'user_cancelled';
    },
  });

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

Bir flow’u görüntüleme hakkında daha fazla ayrıntı için rehberimize bakın.

3. Buton eylemlerini yönetin

Kullanıcılar flow’daki butonlara tıkladığında, React Native SDK satın almaları, geri yüklemeyi, flow’u kapatmayı ve URL açmayı otomatik olarak yönetir.

Ancak diğer butonların özel veya önceden tanımlanmış ID’leri vardır ve kodunuzda eylem yönetimi gerektirir. Ya da varsayılan davranışlarını geçersiz kılmak isteyebilirsiniz.

Örneğin, kapatma butonunun varsayılan davranışı aşağıdadır. Bunu kodda eklemeniz gerekmez, ancak gerekirse nasıl yapıldığını burada görebilirsiniz.

React bileşeni için, eylemleri doğrudan AdaptyFlowView bileşeninde yönetin:


function MyFlow({ flow }) {
  const onCloseButtonPress = useCallback<FlowEventHandlers['onCloseButtonPress']>(
    () => true, // allow the flow to close
    [],
  );
  const onCustomAction = useCallback<FlowEventHandlers['onCustomAction']>(
    (actionId) => false,
    [],
  );

  return (
    <AdaptyFlowView
      flow={flow}
      style={{ flex: 1 }}
      onCloseButtonPress={onCloseButtonPress}
      onCustomAction={onCustomAction}
    />
  );
}

Modal sunum için setEventHandlers kullanarak olay işleyicilerini uygulayın:

const unsubscribe = view.setEventHandlers({
  onCloseButtonPress() {
    return true; // allow the flow to close
  },
});

Buton aksiyonlarını ve olaylarını nasıl yöneteceğinizle ilgili kılavuzlarımızı okuyun.

Sonraki adımlar

Sorularınız mı var ya da sorunlarla mı karşılaşıyorsunuz? Sık sorulan soruların yanıtlarını bulabileceğiniz veya kendi sorularınızı sorabileceğiniz destek forumumuza göz atın. Ekibimiz ve topluluğumuz yardımcı olmak için burada!

Flow’unuz uygulamada görüntülenmeye hazır. Flow’dan bir test satın alması tamamlayabildiğinizden emin olmak için satın almalarınızı test edin.

Şimdi, doğru kullanıcılara bir flow gösterdiğinizden veya ücretli özelliklere erişim verdiğinizden emin olmak için kullanıcıların access level’ını kontrol etmeniz gerekir.

Tam örnek

Bu rehberdeki tüm adımların uygulamanızda birlikte nasıl entegre edilebileceği aşağıdadır.


export default function FlowScreen() {
  const [flow, setFlow] = useState(null);

  const loadFlow = async () => {
    try {
      const flowData = await adapty.getFlow('YOUR_PLACEMENT_ID');
      setFlow(flowData);
    } catch (error) {
      console.warn('Error loading flow:', error);
    }
  };

  const onCloseButtonPress = useCallback<FlowEventHandlers['onCloseButtonPress']>(
    () => true,
    [],
  );

  const onPurchaseCompleted = useCallback<FlowEventHandlers['onPurchaseCompleted']>(
    (result, product) => result.type !== 'user_cancelled',
    [],
  );

  useEffect(() => {
    loadFlow();
  }, []);

  return (
    <View style={{ flex: 1 }}>
      {flow ? (
        <AdaptyFlowView
          flow={flow}
          style={{ flex: 1 }}
          onCloseButtonPress={onCloseButtonPress}
          onPurchaseCompleted={onPurchaseCompleted}
        />
      ) : (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Button title="Load Flow" onPress={loadFlow} />
        </View>
      )}
    </View>
  );
}


export default function FlowScreen() {
  const showFlow = async () => {
    try {
      const flow = await adapty.getFlow('YOUR_PLACEMENT_ID');

      const view = await createFlowView(flow);

      view.setEventHandlers({
        onCloseButtonPress() {
          return true;
        },
        onPurchaseCompleted(result, product) {
          return result.type !== 'user_cancelled';
        },
      });

      await view.present();
    } catch (error) {
      // handle any error that may occur during the process
      console.warn('Error showing flow:', error);
    }
  };

  // you can add a button to manually trigger the flow for testing purposes
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Show Flow" onPress={showFlow} />
    </View>
  );
}