フローとペイウォールの表示 - iOS

フローとペイウォールの表示
フロー BETA Flow Builder で作成——デバイス上でネイティブにレンダリングされ、WebView は不要
Paywall Builder のペイウォール 既存のすべての Paywall Builder コンテンツ

フローまたはペイウォールを作成した場合、ユーザーに表示するためにモバイルアプリのコードでレンダリングを気にする必要はありません。フローやペイウォールには、表示する内容とその表示方法の両方が含まれています。

以下で使用する AdaptyUI.FlowConfiguration オブジェクトの取得方法については、フローとペイウォールの取得を参照してください。

SwiftUI でフローとペイウォールを表示する

モーダルビューとして表示する

フローまたはペイウォールをデバイス画面にモーダルビューとして表示するには、SwiftUI の .flow モディファイアを使用します。最小限の呼び出しには、isPresentedflowConfiguration、および5つの必須コールバックが必要です。

.flow(
    isPresented: $flowPresented,
    flowConfiguration: <AdaptyUI.FlowConfiguration>,
    didFinishPurchase: { _, _ in /* dismiss, or do nothing to let the flow continue */ },
    didFailPurchase: { _, _ in /* handle the error */ },
    didFinishRestore: { _ in /* check access level and dismiss */ },
    didFailRestore: { _ in /* handle the error */ },
    didReceiveError: { _ in flowPresented = false }
)

より細かい制御が必要な場合は、didPerformAction などのオプションコールバックを追加してボタンのタップを処理できます:

@State var flowPresented = false // ensure that you manage this variable state and set it to `true` at the moment you want to show the flow or paywall

var body: some View {
  Text("Hello, AdaptyUI!")
      .flow(
          isPresented: $flowPresented,
          flowConfiguration: <AdaptyUI.FlowConfiguration>,
          didPerformAction: { action in
              switch action {
                  case .close:
                      flowPresented = false
                  default:
                      // Handle other actions
                      break
              }
          },
          didFinishPurchase: { product, purchaseResult in /* dismiss, or do nothing to let the flow continue */ },
          didFailPurchase: { product, error in /* handle the error */ },
          didFinishRestore: { profile in /* check access level and dismiss */ },
          didFailRestore: { error in /* handle the error */ },
          didReceiveError: { error in flowPresented = false }
      )
}

パラメーター:

パラメーター必須説明
isPresented必須フローまたはペイウォール画面の表示を管理するバインディング。
flowConfiguration必須フローまたはペイウォールの視覚的な詳細を含む AdaptyUI.FlowConfiguration オブジェクト。AdaptyUI.getFlowConfiguration(forFlow:) メソッドを使用します。詳しくはフローとペイウォールの取得を参照してください。
didFinishPurchase必須Adapty.makePurchase() が正常に完了したときに呼び出されます。フローは自動的に閉じません。ここでプレゼンテーションバインディングを false に設定するか、何もしてフローを購入後も継続させてください。
didFailPurchase必須Adapty.makePurchase() が失敗したときに呼び出されます。
didFinishRestore必須Adapty.restorePurchases() が正常に完了したときに呼び出されます。
didFailRestore必須Adapty.restorePurchases() が失敗したときに呼び出されます。
didReceiveError必須レンダリングエラーまたはフロースクリプトのランタイムエラー(例:JavaScript 例外、AdaptyUIError コード 4105)が発生したときに呼び出されます。レンダリングエラーの場合は Adapty サポートにお問い合わせください。
fullScreenオプションフローまたはペイウォールをフルスクリーンモードで表示するか、シートとして表示するかを決定します。デフォルトは true です。
didAppearオプションフローまたはペイウォールビューが表示されたときに呼び出されます。
didDisappearオプションフローまたはペイウォールビューが閉じられたときに呼び出されます。
didPerformActionオプションユーザーがボタンをクリックしたときに呼び出されます。closeopenURL の2つのアクション ID が事前定義されており、それ以外はカスタムでビルダー内で設定できます。
didSelectProductオプションユーザーまたはシステムによって購入するプロダクトが選択されたときに呼び出されます。
didStartPurchaseオプションユーザーが購入プロセスを開始したときに呼び出されます。
didFinishWebPaymentNavigationオプションWeb 支払いのナビゲーションが完了したときに呼び出されます。
didStartRestoreオプションユーザーが復元プロセスを開始したときに呼び出されます。
didFailLoadingProductsオプションプロダクトの読み込み中にエラーが発生したときに呼び出されます。true を返すと再読み込みを試みます。
didPartiallyLoadProductsオプションプロダクトが部分的に読み込まれたときに呼び出されます。
showAlertItemオプションフローまたはペイウォールの上にアラートアイテムの表示を管理するバインディング。
showAlertBuilderオプションアラートビューをレンダリングするための関数。
placeholderBuilderオプションフローまたはペイウォールの読み込み中にプレースホルダービューをレンダリングするための関数。デフォルトは ProgressView です。
iOS でのパラメーターの詳細については、iOS - イベントの処理をご参照ください。

非モーダルビューとして表示する

フローやペイウォールを、アプリのナビゲーションフロー内のナビゲーション先またはインラインビューとして表示することもできます。SwiftUI のビュー内で AdaptyFlowView を直接使用してください:

AdaptyFlowView(
    flowConfiguration: <AdaptyUI.FlowConfiguration>,
    didFinishPurchase: { product, purchaseResult in
        // Dismiss the view, or do nothing to let the flow continue
    },
    didFailPurchase: { product, error in
        // Handle purchase failure
    },
    didFinishRestore: { profile in
        // Handle successful restore
    },
    didFailRestore: { error in
        // Handle restore failure
    },
    didReceiveError: { error in
        // Handle the error (rendering or JS exception from the flow script).
    }
)

UIKitでフローとペイウォールを表示する

デバイスの画面にフローまたはペイウォールを表示するには、次の手順を行います。

  1. AdaptyUI.flowController(with:delegate:) メソッドを使用して、表示したいビジュアルフローを初期化します。

    import AdaptyUI
    
    let visualFlow = try AdaptyUI.flowController(
        with: <AdaptyUI.FlowConfiguration>,
        delegate: <AdaptyFlowControllerDelegate>
    )

    リクエストパラメーター:

    パラメータ必須/任意説明
    flowConfiguration必須フローまたはペイウォールのビジュアル詳細を含む AdaptyUI.FlowConfiguration オブジェクト。AdaptyUI.getFlowConfiguration(forFlow:) メソッドを使用します。詳細は フローとペイウォールの取得 を参照してください。
    delegate必須フローおよびペイウォールのイベントを受け取る AdaptyFlowControllerDelegate。詳細は フロー&ペイウォールイベントの処理 を参照してください。

    戻り値:

    オブジェクト説明
    AdaptyFlowControllerリクエストされたフローまたはペイウォール画面を表すオブジェクト。
  2. オブジェクトが正常に作成されたら、デバイスの画面に表示できます。

    present(visualFlow, animated: true)

リアルワールドの例でAdapty SDKをモバイルアプリに統合する方法を確認したい場合は、サンプルアプリをご覧ください。ペイウォールの表示、購入、その他の基本機能など、完全なセットアップを実演しています。

ペイウォールビルダーでペイウォールをカスタマイズした場合、モバイルアプリのコードでレンダリングしてユーザーに表示することを心配する必要はありません。このようなペイウォールには、ペイウォール内に何を表示するか、またどのように表示するかの両方が含まれています。 AdaptyUI.PaywallConfiguration オブジェクトの取得方法については、ペイウォールビルダーのペイウォールとその設定を取得するを参照してください。

SwiftUI でペイウォールを表示する

モーダルビューとして表示する

ビジュアルペイウォールをデバイス画面にモーダルビューとして表示するには、SwiftUI の .paywall モディファイアを使用します:

@State var paywallPresented = false // ensure that you manage this variable state and set it to `true` at the moment you want to show the paywall

var body: some View {
  Text("Hello, AdaptyUI!")
      .paywall(
          isPresented: $paywallPresented,
          paywallConfiguration: <AdaptyUI.PaywallConfiguration>,
          didPerformAction: { action in
              switch action {
                  case .close:
                      paywallPresented = false
                  default:
                      // Handle other actions
                      break
              }
          },
          didFinishPurchase: { product, profile in paywallPresented = false },
          didFailPurchase: { product, error in /* handle the error */ },
          didFinishRestore: { profile in /* check access level and dismiss */  },
          didFailRestore: { error in /* handle the error */ },
          didFailRendering: { error in paywallPresented = false }
      )
}

Parameters:

パラメータ必須説明
isPresented必須ペイウォール画面を表示するかどうかを管理するバインディング。
paywallConfiguration必須ペイウォールの視覚的な詳細を含む AdaptyUI.PaywallConfiguration オブジェクト。AdaptyUI.paywallConfiguration(for:products:viewConfiguration:observerModeResolver:tagResolver:timerResolver:) メソッドを使用してください。詳細はペイウォールビルダーのペイウォールと設定の取得を参照してください。
didFailPurchase必須Adapty.makePurchase() が失敗したときに呼び出されます。
didFinishRestore必須Adapty.restorePurchases() が正常に完了したときに呼び出されます。
didFailRestore必須Adapty.restorePurchases() が失敗したときに呼び出されます。
didFailRendering必須インターフェースのレンダリング中にエラーが発生した場合に呼び出されます。この場合はAdapty サポートにお問い合わせください。
fullScreen任意ペイウォールをフルスクリーンモードで表示するか、モーダルとして表示するかを決定します。デフォルトは true です。
didAppear任意ペイウォールビューが表示されたときに呼び出されます。
didDisappear任意ペイウォールビューが閉じられたときに呼び出されます。
didPerformAction任意ユーザーがボタンをクリックしたときに呼び出されます。ボタンによってアクション ID が異なります。closeopenURL の 2 つのアクション ID があらかじめ定義されており、それ以外はカスタムでビルダーで設定できます。
didSelectProduct任意プロダクトが(ユーザーまたはシステムによって)購入対象として選択された場合に呼び出されます。
didStartPurchase任意ユーザーが購入プロセスを開始したときに呼び出されます。
didFinishPurchase任意Adapty.makePurchase() が正常に完了したときに呼び出されます。
didFinishWebPaymentNavigation任意Web 決済のナビゲーションが終了したときに呼び出されます。
didStartRestore任意ユーザーが復元プロセスを開始したときに呼び出されます。
didFailLoadingProducts任意プロダクトの読み込み中にエラーが発生したときに呼び出されます。true を返すと再読み込みを試みます。
didPartiallyLoadProducts任意プロダクトが部分的に読み込まれたときに呼び出されます。
showAlertItem任意ペイウォールの上にアラートアイテムの表示を管理するバインディング。
showAlertBuilder任意アラートビューをレンダリングするための関数。
placeholderBuilder任意ペイウォールの読み込み中にプレースホルダービューをレンダリングするための関数。
イベントのパラメータについては、iOS - イベントの処理 を参照してください。

ノンモーダルビューとして表示する

ペイウォールをナビゲーションの遷移先やインラインビューとして、アプリのナビゲーションフロー内に表示することもできます。SwiftUI のビューで AdaptyPaywallView を直接使用してください。

AdaptyPaywallView(
    paywallConfiguration: <AdaptyUI.PaywallConfiguration>,
    didFailPurchase: { product, error in
        // Handle purchase failure
    },
    didFinishRestore: { profile in
        // Handle successful restore
    },
    didFailRestore: { error in
        // Handle restore failure
    },
    didFailRendering: { error in
        // Handle rendering error
    }
)

UIKit でペイウォールを表示する

デバイス画面にビジュアルペイウォールを表示するには、次の手順を行います。

  1. .paywallController(for:products:viewConfiguration:delegate:) メソッドを使用して、表示したいビジュアルペイウォールを初期化します。

    import AdaptyUI
    
    let visualPaywall = AdaptyUI.paywallController(
        with: <paywall configuration object>,
        delegate: <AdaptyPaywallControllerDelegate>
    )

    リクエストパラメーター:

    パラメータ必須/任意説明
    paywall configuration必須ペイウォールのビジュアル情報を含む AdaptyUI.PaywallConfiguration オブジェクトです。AdaptyUI.getPaywallConfiguration(forPaywall:locale:) メソッドを使用してください。詳細はペイウォールビルダーのペイウォールと設定の取得を参照してください。
    delegate必須ペイウォールイベントを受け取るための AdaptyPaywallControllerDelegate です。詳細はペイウォールイベントの処理を参照してください。

戻り値:

オブジェクト説明
AdaptyPaywallControllerリクエストされたペイウォール画面を表すオブジェクト
  1. オブジェクトの作成に成功したら、デバイスの画面に表示できます。

    present(visualPaywall, animated: true)

実際の統合例を確認したい場合は、サンプルアプリをご覧ください。ペイウォールの表示、購入処理などの基本的な機能を含む、完全なセットアップが確認できます。