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)
• Paywalllar, hangi ürünlerin sunulacağını tanımlayan yapılandırmalardır. Adapty’de ürünleri almak için tek yol paywalllar olsa da bu tasarım, uygulama kodunuza dokunmadan teklifleri, fiyatlandırmayı ve ürün kombinasyonlarını değiştirmenize olanak tanır.
• Placement’lar – uygulamanızda paywallları nerede ve ne zaman gösterdiğiniz (örneğin main, onboarding, settings). Paywallları kontrol panelinde placement’larla ilişkilendirirsiniz, ardından kodunuzda placement ID’si ile bunları talep edersiniz. Bu yapı A/B testleri çalıştırmayı ve farklı kullanıcılara farklı paywalllar 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	Karmaşıklık	Ne zaman kullanılır
Adapty Paywall Builder	✅ Kolay	No-code builder’da eksiksiz, satın almaya hazır bir paywall 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.
makePurchase	🟡 Orta	Paywall arayüzünü uygulama kodunuzda kendiniz uygularsınız, ancak ürün tekliflerinde esnekliği korumak için paywall nesnesini yine Adapty’den alırsınız. Kılavuza bakın.
Observer mode	🔴 Zor	Satın alma akışını tamamen kendiniz uygularsınız. Kılavuza bakın.

Adapty paywall builder’da oluşturulan bir paywallı göstermek için uygulama kodunuzda yalnızca şunları yapmanız gerekir:

1. Paywallı alın: Paywallı Adapty’den alın.
2. Paywallı gösterin; satın almaları Adapty sizin için yönetir: Aldığınız paywall container’ını uygulamanızda gösterin.
3. Düğme aksiyonlarını yönetin: Kullanıcıların paywalldaki etkileşimlerini uygulamanızın bu etkileşimlere verdiği yanıtlarla ilişkilendirin. Örneğin, kullanıcılar düğmelere tıkladığında bağlantı açın ya da paywallı kapatın.

Başlamadan önce

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

1. Adapty Kontrol Paneli’nde uygulamanızı App Store ve/veya Google Play’e bağlayın.
2. Adapty’de ürünlerinizi oluşturun.
3. Bir paywall oluşturun ve ürünleri ona ekleyin.
4. Bir placement oluşturun ve paywallınızı ona ekleyin.
5. Uygulama kodunuza Adapty SDK’yı yükleyin ve etkinleştirin.

1. Paywallı alın

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

Adapty paywall builder’da oluşturulan bir paywallı almak için şunları yapmanız gerekir:

1. getPaywall metodunu kullanarak placement ID’sine göre paywall nesnesini alın ve hasViewConfiguration özelliğini kullanarak bunun builder’da oluşturulmuş bir paywall olup olmadığını kontrol edin.

2. createPaywallView metodunu kullanarak paywall view’ını oluşturun. View, paywallı göstermek için gereken arayüz öğelerini ve stilini içerir.

try {
  const paywall = await adapty.getPaywall({
    placementId: 'YOUR_PLACEMENT_ID',
  });
  // the requested paywall
} catch (error) {
  // handle the error
}

if (paywall.hasViewConfiguration) {
  try {
    const view = await createPaywallView(paywall);
  } catch (error) {
    // handle the error
  }
} else {
  // use your custom logic
}

2. Paywallı gösterin

Artık paywall yapılandırmasına sahip olduğunuza göre, paywallınızı göstermek için birkaç satır kod eklemeniz yeterlidir.

Paywallı göstermek için createPaywallView metoduyla oluşturulan view üzerinde view.present() metodunu kullanın. Her view yalnızca bir kez kullanılabilir. Paywallı tekrar göstermeniz gerekiyorsa yeni bir view örneği oluşturmak için createPaywallView’ı bir kez daha çağırın.

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

3. Düğme aksiyonlarını yönetin

Kullanıcılar paywalldaki düğmelere tıkladığında Capacitor SDK, satın almaları, geri yüklemeleri ve paywallın kapatılmasını otomatik olarak yönetir.

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

Örneğin, uygulama kullanıcılarınız bir web bağlantısı açtıktan sonra paywallı açık tutmak isteyebilirsiniz. Bunu uygulamanızda nasıl yönetebileceğinize bakalım.

const unsubscribe = view.setEventHandlers({
  onUrlPress(url) {
    window.open(url, '_blank');
    return false;
  },
});

Sonraki adımlar

Paywallınız uygulamada gösterilmeye hazır. Paywalldan test satın alması tamamlayabildiğinizden emin olmak için satın almalarınızı App Store sandbox ortamında veya Google Play Store’da test edin.

Şimdi, doğru kullanıcılara paywall 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

Tüm bu adımların uygulamanızda bir arada nasıl entegre edilebileceği aşağıda gösterilmiştir.

export default function PaywallScreen() {
  const showPaywall = async () => {
    try {
      const paywall = await adapty.getPaywall({
        placementId: 'YOUR_PLACEMENT_ID',
      });

      if (!paywall.hasViewConfiguration) {
        // use your custom logic
        return;
      }

      const view = await createPaywallView(paywall);

      view.setEventHandlers({
        onUrlPress(url) {
          window.open(url, '_blank');
          return false;
        },
      });

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

  return (
    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
      <button onClick={showPaywall}>Show Paywall</button>
    </div>
  );
}