---
title: "Webペイウォール"
description: "App Storeの手数料や審査なしに支払いを受け取るためのWebペイウォールを設定します。"
---

:::important
始める前に、必要なAdapty SDKのバージョンがインストールされていることを確認してください：
- **ペイウォールビルダーまたはカスタムペイウォール**：3.6.1以降（iOS）、3.15以降（AndroidおよびクロスプラットフォームAndroid and cross-platform）
- **フロービルダー**：4.0以降（すべてのプラットフォーム）
:::

Adaptyを使うと、アプリユーザーをブラウザにリダイレクトして決済させるボタンを含むペイウォールや[フロー](adapty-paywall-builder)を作成できます。購入が完了してアプリに戻ると、サブスクリプションが有効になります。
これにより、ユーザーの支払いを追跡しながらストアの手数料を回避できます。

:::tip
App Storeが外部決済オプションを許可しているのは、米国と日本のみです。

これらの市場専用のペイウォールを使用するには、現在のペイウォールを複製してWebペイウォールを設定してください。こうすることで、ほぼ同一のペイウォールが2つ使用できます：1つは米国と日本向け、もう1つはその他すべての国向けです。
:::

## 仕組み \{#how-it-works\}

Webペイウォールは、アプリ内ペイウォールごとに生成される固有のURLです。決済のためにブラウザで開き、Stripe、Paddleなどさまざまな決済プロバイダーに対応しています。Apple Payボタンのみのシンプルなページから、追加オファーを含む複雑なフローまでサポートします。

Webペイウォールは以下の流れで動作します：
1. Webペイウォールエディターで**ウェブペイウォールページの見た目と動作を設定**します。
2. ペイウォール設定で**Webペイウォールをリンク**します。
3. アプリのペイウォールに、ユーザーをブラウザへリダイレクトする**ボタンを追加**します。
4. ユーザーがボタンをタップすると、Adapty SDKが**固有のURLを生成**します。
5. ユーザーが**Webペイウォールページにアクセス**し、外部決済手段を使って**サブスクリプションの支払い**を行います。
6. アプリに戻ると、Adapty SDKが**プロファイルの更新をポーリング**してサブスクリプションの有効化を確認します。
7. Adaptyが購入を記録し、更新やキャンセルなどのステータス変更についてサブスクリプションを監視します。

## ステップ1：Webペイウォールを作成する \{#step-1-create-a-web-paywall\}

1. 作業対象のペイウォールを用意します：
   - 既存のペイウォールに外部決済を追加する場合は、[複製](duplicate-paywalls)してください。これにより、ターゲットセグメントにはWebペイウォールを、それ以外のユーザーには元のペイウォールを表示できます。
   - ゼロから始める場合は、新しいペイウォールを[作成](create-paywall)してください。
2. ペイウォールページで **Web paywall** タブに切り替え、**Create web paywall** をクリックします。新しいページに移動します。

3. Webペイウォールを設定し、決済方法を接続します。
:::tip
外部エディターの設定や決済プロバイダーの接続については、[クイックスタートガイド](web-paywall-configuration)を参照してください。
:::
4. **Web paywall** ページに戻り、ペイウォールリンクを貼り付けます。
:::important
ペイウォールを本番環境にリリースする際は、Webペイウォールを公開した後に生成される正しいリンクを使用してください。リンクの形式は `paywalls-....fnlfx.com` です。
:::
5. **Save** をクリックします。

## ステップ2：ペイウォールをトリガーする \{#step-2-trigger-the-paywall\}

Webペイウォールを使用するにはトリガーの設定が必要で、方法はセットアップ内容によって異なります：

- フロービルダーを使用している場合は、提供したリンクを使って購入を追跡しAdaptyにデータを送信する[新しいボタンを追加](#step-2a-add-a-web-purchase-button)するだけです。
- SDKを使用している場合は、Webペイウォールを処理するために[`openWebPaywall`](#step-2b-set-up-the-sdk-method)メソッドを設定する必要があります。

### ステップ2a：Web購入ボタンを追加する \{#step-2a-add-a-web-purchase-button\}

**フロービルダー**を使用している場合は、Webペイウォールボタンを追加する必要があります。このボタンは、提供したリンクを使って購入を追跡し、データをAdaptyに送信します。

1. フローを開き、ボタンを追加します。
   
   テンプレートや既存のペイウォールを使用している場合は、既存の購入ボタンと並べてWebペイウォールボタンを追加してください。同じ方法で設定できます。

2. 右側の **Interactions** パネルで **Add trigger** をクリックし、このトリガーに **Purchase** アクションを割り当てます。
   
3. アクション設定で **Web payment** タブに切り替えます。そこで、Web購入ボタンに関連付けるプロダクトと（任意で）オファーを選択します。

4. **Web paywall URL** フィールドにWebペイウォールリンクを貼り付けます。

5. デフォルトでは、Webペイウォールはアプリ内ブラウザで開くため、ユーザーがアプリを離れる必要がありません。外部ブラウザで開きたい場合は、**Open in external browser** を選択してください。

### ステップ2b：SDKメソッドを呼び出す \{#step-2b-set-up-the-sdk-method\}

自分で開発したペイウォールを使用している場合は、SDKメソッドを使ってWebペイウォールを処理する必要があります。各フレームワークのガイドを参照してください：

- [iOS](ios-web-paywall)
- [Android](android-web-paywall)
- [React Native](react-native-web-paywall)
- [Flutter](flutter-web-paywall)
- [Unity](unity-web-paywalls)
- [Kotlin Multiplatform](kmp-web-paywalls)
- [Capacitor](capacitor-web-paywall)

## ステップ3：プレースメントを設定する \{#step-3-set-up-a-placement\}

App Storeは米国と日本のみで外部決済オプションを許可しているため、これらの市場のiOSユーザー向けに別のユーザーセグメントを作成し、異なるセグメントに異なるペイウォールをターゲットするプレースメントを設定します。Androidユーザーには地理的制限がないため、国フィルターなしで別のAndroidセグメントを作成してください。

1. 以下の属性を持つ[新しいセグメントを作成](segments)します：
   - **Country from store account**：United States、Japan
   - **Platform**：iOS and iPadOS
   - **App version**：Adapty SDKを使用している最新バージョン

2. プレースメントを[作成](create-placement)するか、既存のものを[編集](edit-placement)します。Webペイウォールと作成したセグメントで[新しいオーディエンスを追加](add-audience-paywall-ab-test)します。