React Native SDK'da Flow & Paywall 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 – ürünleri kullanıcılara sunan ekran dizileri; no-code Flow & Paywall Builder ile oluşturulur. SDK bunları getFlow aracılığıyla alır. Kullanıcı arayüzünü kendi kodunuzla oluşturmayı tercih ediyorsanız bunun yerine bir paywall kullanın — bkz. Paywall’ları manuel olarak uygulama.
Placement’lar – uygulamanızda flow’ları nerede ve ne zaman göstereceğiniz (main, onboarding, settings gibi). Flow’ları kontrol panelinde placement’lara bağlar, ardından kodunuzda placement ID’si ile talep edersiniz. Bu sayede A/B testleri çalıştırmak ve farklı kullanıcılara farklı flow’lar göstermek kolaylaşır.

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

Uygulama	Karmaşıklık	Ne zaman kullanılır
Adapty Flow & Paywall Builder	✅ Kolay	No-code 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 akışını, makbuz doğrulamasını ve abonelik yönetimini arka planda halleder.
Manuel oluşturulan paywalllar	🟡 Orta	Paywall arayüzünü uygulama kodunuzda siz uygularsınız; ancak ürün tekliflerinde esnekliği korumak için flow nesnesini Adapty’den alırsınız. Kılavuza bakın.
Observer mode	🔴 Zor	Kendi satın alma altyapınız zaten var ve bunu kullanmaya devam etmek istiyorsunuz. Observer mode’un Adapty’de bazı sınırlamaları olduğunu unutmayın. Makaleye bakın.

Important

Aşağıdaki adımlar, Adapty Flow & Paywall Builder’da oluşturulmuş bir flow’u nasıl uygulayacağınızı göstermektedir.

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

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

Flow’u alın: Adapty’den alın.
Görüntüleyin; satın almaları Adapty halleder: View’u uygulamanızda gösterin.
Buton aksiyonlarını yönetin: Kullanıcı etkileşimlerini uygulamanızın yanıtlarıyla ilişkilendirin. Örneğin, kullanıcılar butonlara tıkladığında bağlantı 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’e bağlayın.
Adapty’de ürünlerinizi oluşturun.
Bir flow oluşturun ve ürünleri flow’a ekleyin.
Bir placement oluşturun ve flow’unuzu buna ekleyin.
Uygulama kodunuza Adapty SDK’yı yükleyip etkinleştirin. Bu kılavuz Adapty React Native SDK v4 API’lerini kullanmaktadır.

1. Flow’u edinin

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

Adapty Flow & Paywall Builder’da oluşturulan bir flow’u edinmek için getFlow metodunu kullanarak placement ID’sine göre flow nesnesini alın. Flow, görüntülemek için gereken UI öğelerini ve stillendirme bilgilerini 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
}

Tip

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

Tip

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

Sonraki adımlar

Tip

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