---
title: "React Native SDK'da Flow Builder ile satın almaları etkinleştirme"
description: "Adapty Flow Builder ile uygulama içi satın almaları etkinleştirmeye yönelik hızlı başlangıç rehberi."
---

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

- [**Ürünler**](product) – kullanıcıların satın alabileceği her şey (abonelikler, consumable'lar, süresiz erişim)
- [**Flow'lar**](adapty-flow-builder) – 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](react-native-quickstart-manual).
- [**Placement'lar**](placements) – 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](quickstart-paywalls). 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](react-native-quickstart-manual). |
| 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](observer-vs-full-mode). |

:::important
**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](react-native-quickstart-manual).
:::

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

1. **Flow'u alın**: Onu Adapty'den alın.
2. **Görüntüleyin, satın almaları Adapty sizin için halleder**: View'i uygulamanızda gösterin.
3. **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 \{#before-you-start\}

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

1. Adapty Kontrol Paneli'nde uygulamanızı [App Store](initial_ios) ve/veya [Google Play](initial-android) ile bağlayın.
2. Adapty'de [ürünlerinizi oluşturun](create-product).
3. [Bir flow oluşturun ve ona ürünler ekleyin](create-paywall).
4. [Bir placement oluşturun ve flow'unuzu ona ekleyin](create-placement).
5. Uygulama kodunuzda [Adapty SDK'yı yükleyin ve etkinleştirin](sdk-installation-reactnative). Bu rehber Adapty React Native SDK v4 API'lerini kullanır.

## 1. Flow'u alın \{#1-get-the-flow\}

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](ab-tests) ç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](placements) ID'siyle alın. Flow, onu görüntülemek için gereken arayüz öğelerini ve stilini içerir.

```typescript showLineNumbers title="React Native"

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

## 2. Flow'u görüntüleyin \{#2-display-the-flow\}

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

<Tabs groupId="presentation-method" queryString>
<TabItem value="platform" label="React bileşeni" default>

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:

```typescript showLineNumbers title="React Native (TSX)"

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

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

</TabItem>
<TabItem value="standalone" label="Modal sunum">

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.

```typescript showLineNumbers title="React Native"

try {
  const view = await createFlowView(flow);

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

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

</TabItem>
</Tabs>

:::tip
Bir flow'u görüntüleme hakkında daha fazla ayrıntı için [rehberimize](react-native-present-paywalls) bakın.
:::

## 3. Buton eylemlerini yönetin \{#3-handle-button-actions\}

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.

<Tabs groupId="presentation-method" queryString>
<TabItem value="platform" label="React bileşeni" default>

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

```typescript showLineNumbers title="React Native (TSX)"

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

</TabItem>
<TabItem value="standalone" label="Modal sunum">

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

```typescript showLineNumbers title="React Native"
const unsubscribe = view.setEventHandlers({
  onCloseButtonPress() {
    return true; // allow the flow to close
  },
});
```

</TabItem>
</Tabs>

:::tip
Buton [aksiyonlarını](react-native-handle-paywall-actions) ve [olaylarını](react-native-handling-events-1) nasıl yöneteceğinizle ilgili kılavuzlarımızı okuyun.
:::

## Sonraki adımlar \{#next-steps\}

:::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](https://adapty.featurebase.app/) 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](react-native-test).

Ş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](react-native-check-subscription-status) gerekir.

## Tam örnek \{#full-example\}

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

<Tabs groupId="presentation-method" queryString>
<TabItem value="platform" label="React bileşeni" default>

```javascript showLineNumbers title="React Native (TSX)"

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

</TabItem>
<TabItem value="standalone" label="Modal sunum">

```javascript showLineNumbers title="React Native"

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

</TabItem>
</Tabs>