Capacitor 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 çeker. UI’ı kendiniz kodlamayı tercih ediyorsanız bunun yerine paywall kullanın — bkz. Paywalleri 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’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:

Adapty Flow & Paywall 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: Adapty’den alın.
2. Görüntüleyin ve satın almaları Adapty yönetsin: Görünümü uygulamanızda gösterin.
3. Buton eylemlerini yönetin: Kullanıcı etkileşimlerini uygulamanızın bunlara verdiği yanıtlarla ilişkilendirin. Örneğin, kullanıcılar butona tıkladığında bağlantıları açın veya flow’u kapatın.

Başlamadan önce

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

1. Uygulamanızı Adapty Kontrol Paneli’nde App Store ve/veya Google Play ile bağlayın.
2. Adapty’de ürünlerinizi oluşturun.
3. Bir flow oluşturun ve ona ürün ekleyin.
4. Bir placement oluşturun ve flow’unuzu ona ekleyin.
5. Uygulama kodunuza Adapty SDK’yı yükleyin ve etkinleştirin. Bu kılavuz Adapty Capacitor SDK v4 API’lerini kullanır.

1. Flow’u alın

Flow’larınız, kontrol panelinde yapılandırılmış placement’larla ilişkilidir. 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 almak için getFlow metodunu kullanarak placement ID’sine göre flow nesnesini edinin. Flow, görüntülenmesi için gereken UI öğelerini ve stil bilgilerini içerir.

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

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

Flow’a sahip olduğunuzda, onu görüntülemek için yalnızca birkaç satır eklemeniz yeterli.

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

try {
  const view = await createFlowView(flow);

  await view.setEventHandlers({
    onPurchaseCompleted(purchaseResult, product) {
      return purchaseResult.type === 'success'; // close the flow on a successful purchase, keep it open for cancelled or pending purchases
    },
  });

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

3. Buton eylemlerini yönetin

Kullanıcılar flow’daki butonlara tıkladığında, Capacitor SDK satın alma, geri yükleme, flow’u kapatma ve URL açma işlemlerini otomatik olarak gerçekleştirir.

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

Örneğin, kapatma butonu için varsayılan davranış aşağıdaki gibidir. Bunu koda eklemeniz gerekmez, ancak gerektiğinde nasıl yapıldığını buradan görebilirsiniz.

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

Sonraki adımlar

Flow’unuz uygulamada görüntülenmeye hazır. Flow üzerinden test satın alma işlemini tamamlayabildiğinizden emin olmak için satın almalarınızı test edin.

Şimdi, flow’u veya ücretli özelliklere erişimi doğru kullanıcılara sunduğunuzdan emin olmak için kullanıcıların access level durumunu kontrol etmeniz gerekiyor.

Tam örnek

Bu kılavuzdaki tüm adımlar uygulamanıza şu şekilde entegre edilebilir.

export async function showFlow() {
  try {
    const flow = await adapty.getFlow({
      placementId: 'YOUR_PLACEMENT_ID',
    });

    const view = await createFlowView(flow);

    await view.setEventHandlers({
      onCloseButtonPress() {
        return true;
      },
      onPurchaseCompleted(purchaseResult, product) {
        return purchaseResult.type === 'success'; // close the flow on a successful purchase, keep it open for cancelled or pending purchases
      },
    });

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