React Native uygulama içi satın alma ve Ödeme Duvarları Genel Bakış

0:02:00

RevenueCat React Native SDK Codelab'ına hoş geldiniz!

Hedef: Bu Codelab'de RevenueCat React Native SDK'yı yeni bir React Native uygulamasına entegre ederek ürün Offering'lerini almayı ve önceden oluşturulmuş native ödeme duvarı UI'ını göstermeyi öğreneceksiniz.

Oluşturulacak içerik:

Yükleme göstergesini gösteren ve RevenueCat'te yapılandırılmış "Offering"'i aldıktan sonra RevenueCatUI ödeme duvarını gösteren basit bir tek ekran uygulama.

Ön Koşullar

Başlamadan önce aşağıdakiler kurulmuş olmalıdır:

  1. React Native ortamı: Node.js, React Native CLI ve gerekli platforma özgü araçlarla hazırlanmış React Native geliştirme ortamı olmalıdır.
  2. Platform gereksinimleri:
  • iOS: Minimum dağıtım hedefi 13.4
  • Android: Minimum API seviyesi 23 (sürüm 6.0)
  • React Native sürüm 0.64 ve üzeri
  1. RevenueCat hesabı: revenuecat.com'da ücretsiz hesap gerekir.
  2. App Store / Play Store yapılandırması:
  • App Store Connect veya Google Play Console'da oluşturulmuş uygulama içi ürünler (abonelik veya tek seferlik satın alma). Google Play yapılandırması hakkında daha fazla bilgi için Codelab1: RevenueCat Google Play Entegrasyonu'na bakın.
  • Ürünler RevenueCat panelindeki Entitlement ve Offering'e bağlı olmalıdır. Bu en önemli adımdır. "Current" Offering yoksa ödeme duvarı görüntülenmez.
  1. Gerçek cihaz veya yapılandırılmış emülatör: Uygulama içi satın alma testi içindir.

Bu Codelab'ı tamamladığınızda, RevenueCat'in React Native SDK'sını kullanarak React Native uygulamasında uygulama içi satın almayı başarıyla uygulayabilecek ve dinamik ödeme duvarını gösterebileceksiniz.

overview

RevenueCat SDK İçe Aktarma

0:05:00

Uygulama içi satın almayı uygulamadan önce, önce mevcut veya yeni projenize RevenueCat SDK'yı eklemeniz gerekir. Başlamak için aşağıdaki bağımlılığı projenize ekleyin:

GitHub'da en son sürümü kontrol edebilirsiniz.

yükle

npm kullanarak:

bash
npm install --save react-native-purchases

veya yarn kullanarak:

bash
yarn add react-native-purchases

Platforma Özgü Yapılandırma

iOS kurulum

iOS için "In-App Purchase" capability'yi etkinleştirmeniz gerekir:

  1. Xcode'da projeyi açın
  2. Proje hedefini seçin
  3. "Signing & Capabilities" bölümüne gidin
  4. "+ Capability" tıklayın ve "In-App Purchase" ekleyin

Android kurulum

Android için AndroidManifest.xml'e faturalandırma iznini ekleyin:

xml
<uses-permission android:name="com.android.vending.BILLING" />

Ayrıca AndroidManifest.xml'de Activity'nin launchMode değerinin standard veya singleTop olarak ayarlandığından emin olun:

xml
<activity
  android:name=".MainActivity"
  android:launchMode="standard"
  ...
/>

RevenueCat SDK Başlatma

Şimdi RevenueCat SDK'yı başlatalım. Bu işlem ana App.js veya App.tsx dosyasında gerçekleştirilir.

  1. App.js'yi (veya TypeScript projesi için App.tsx) açın
  2. Dosyanın üstüne SDK'yı import edin
  3. API anahtarınızı yapıştırın

Bununla uygulamanın %50'sini tamamladınız!

Yetkileri Doğrulama

0:03:00

Şimdi kullanıcı yetkilerini nasıl doğrulayacağınızı öğrenelim.

Daha önce bahsedildiği gibi, yetkiler kullanıcının satın alma işleminden sonra kilidini açtığı erişim seviyelerini veya özellikleri temsil eder. Bu, reklam bannerı gösterip göstermeyeceğinizi veya premium erişim sağlayıp sağlamayacağınızı belirlemenize olanak tanır.

Aşağıdaki kod parçasını kullanarak kullanıcının aktif Entitlement'a sahip olup olmadığını kolayca kontrol edebilirsiniz.

Uygulama İçi Satın Alma Uygulama

0:04:00

Şimdi reklamsız deneyim sunmak için uygulama içi satın almayı uygulayalım. Başlamak için önce RevenueCat panelindeki ilgili ürün bilgilerini almanız gerekir.

Bununla yalnızca birkaç satır kodla tam işlevli uygulama içi satın alma akışını entegre ettiniz.

Ödeme Duvarı Uygulama

0:07:00

Şimdi React Native'de Paywall'ı uygulama zamanı.

Kurulum tamamlandı! Artık kullanıcı gerekli yetkiye sahip olmadığında, Ödeme Duvarı Düzenleyicisi'nde yapılandırdığınız tasarımla aynı şekilde ödeme duvarını gösterebilirsiniz.

Son

Bu Codelab'de RevenueCat React Native SDK'yı entegre etmeyi, uygulama içi satın almayı uygulamayı ve React Native'de ödeme duvarı oluşturmayı öğrendiniz. Şimdi uygulamanızı yayınlama ve daha fazla gelir elde etme zamanı!

Aşağıdaki kaynakları kullanarak RevenueCat SDK kullanımı hakkında daha fazla bilgi edinebilirsiniz: