フローとペイウォールの表示 - iOS
フローまたはペイウォールを作成した場合、ユーザーに表示するためにモバイルアプリのコードでレンダリングを気にする必要はありません。フローやペイウォールには、表示する内容とその表示方法の両方が含まれています。
以下で使用する AdaptyUI.FlowConfiguration オブジェクトの取得方法については、フローとペイウォールの取得を参照してください。
SwiftUI でフローとペイウォールを表示する
モーダルビューとして表示する
フローまたはペイウォールをデバイス画面にモーダルビューとして表示するには、SwiftUI の .flow モディファイアを使用します。最小限の呼び出しには、isPresented、flowConfiguration、および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 | オプション | ユーザーがボタンをクリックしたときに呼び出されます。close と openURL の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でフローとペイウォールを表示する
デバイスの画面にフローまたはペイウォールを表示するには、次の手順を行います。
-
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 リクエストされたフローまたはペイウォール画面を表すオブジェクト。 -
オブジェクトが正常に作成されたら、デバイスの画面に表示できます。
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 が異なります。close と openURL の 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 でペイウォールを表示する
デバイス画面にビジュアルペイウォールを表示するには、次の手順を行います。
-
.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 | リクエストされたペイウォール画面を表すオブジェクト |
-
オブジェクトの作成に成功したら、デバイスの画面に表示できます。
present(visualPaywall, animated: true)
実際の統合例を確認したい場合は、サンプルアプリをご覧ください。ペイウォールの表示、購入処理などの基本的な機能を含む、完全なセットアップが確認できます。