---
title: "Webペイウォールの設定"
---

**Web paywall** ページで **Create web paywall** をクリックすると、Webペイウォールのデザインと支払い方法を設定する専用ページに移動します。

## 支払い方法の設定 \{#set-up-a-payment-method\}

まず、購入を処理する決済プロバイダーを連携する必要があります。利用可能なオプションは以下のとおりです：

- Stripe
- Paddle
- Paypal
- Solidgate

:::important
AdaptyでWebペイウォールのアナリティクストラッキングを正確に行うには、[プロダクトを追加](product)する際に、対応するStripe/Paddle/その他の決済プロバイダーのプロダクトIDも一緒に登録する必要があります。
:::

決済プロバイダーを設定するには：
1. Webペイウォールの一覧ページで **Settings** をクリックし、**Integrations** タブに切り替えます。
2. 決済プロバイダーを選択し、画面上の連携手順に従います。

   
   <img src="/assets/shared/img/web-paywall-configuration-1.png"
   style={{
   border: '1px solid #727272', /* border width and color */
   width: '700px', /* image width */
   display: 'block', /* for alignment */
   margin: '0 auto' /* center alignment */
   }}
   />
   

3. ⚠️ Stripeを選択する場合、インターフェースに **Sandbox** と表示されていても、**Test Mode** 環境のキーを使用してください。そうしないとWebペイウォールが動作しません。Stripeの **Sandboxes** はまだサポートされていません。

   
   <img src="/assets/shared/img/web-paywall-configuration-stripe.png"
   style={{
   border: '1px solid #727272', /* border width and color */
   width: '700px', /* image width */
   display: 'block', /* for alignment */
   margin: '0 auto' /* center alignment */
   }}
   />
   

### Apple Payドメイン認証の設定 \{#set-up-apple-pay-domain-verification\}

**Settings > Domains** で、ドメイン認証に使用するメインの決済プロバイダーを選択します。次に、それぞれのプロバイダーでペイウォールのドメインを認証してください：

**Stripe**:
1. [Payment method domain settings](https://dashboard.stripe.com/settings/payment_method_domains) にアクセスし、**Add a new domain** をクリックします。
2. `app.funnelfox.com` と個人用のペイウォールサブドメイン（`paywalls-....fnlfx.com` のような形式）を追加します。サブドメインを確認するには、**Settings > Domains** に移動して **Hosted subdomain** の値をコピーしてください。

**Paddle**:
1. Paddleコンソールで **Checkout > Website approval** に移動し、**Add a new domain** をクリックします。
2. `app.funnelfox.com` と個人用のペイウォールサブドメイン（`paywalls-....fnlfx.com` のような形式）を追加します。サブドメインを確認するには、**Settings > Domains** に移動して **Hosted subdomain** の値をコピーしてください。

Paddleの承認プロセスは手動なので、ドメインが `Pending` から `Approved` に変わるまで待つ必要があります。

**FunnelFox Billing**:

[FunnelFox Billingの連携手順](https://funnelfox.com/docs/billing/integration-billing-funnelfox)に従ってください。

**SolidGate**:
1. SolidgateダッシュボードでDevelopers > Apple Pay Domains** に移動します。
2. **+ Add new domain** をクリックし、プロジェクトドメイン（FunnelFoxの **Settings > Domains** から確認）を貼り付けます。カスタムドメインがある場合はそちらも追加してください。
3. プレビューモードでApple Payを使用するには、`http://app.funnelfox.com/` も追加してください。

## Webペイウォールの作成と設定 \{#create-and-configure-a-web-paywall\}
1. Webペイウォールの一覧ページで **Create a paywall** をクリックします。
2. ペイウォール名を入力し、**Create** をクリックします。

   
   <img src="/assets/shared/img/web-paywall-configuration-2.png"
   style={{
   border: '1px solid #727272', /* border width and color */
   width: '700px', /* image width */
   display: 'block', /* for alignment */
   margin: '0 auto' /* center alignment */
   }}
   />
   
3. 2つのサブスクリプションオプションとApple Pay購入ボタンを含む基本テンプレートに移動します。

   最初の画面にはサブスクリプションプランの一覧が表示されます。2番目と3番目の画面はチェックアウト画面で、それぞれが提供するプランに対応しています。プランが1つだけの場合は、余分な画面を削除してください。プランが複数ある場合は、チェックアウト画面を複製する必要があります。

   購入完了後にユーザーが最後に見る画面では、アプリに戻れることを明確に示す必要があります。

   
   <img src="/assets/shared/img/web-paywall-configuration-10.gif"
   style={{
   border: '1px solid #727272', /* border width and color */
   width: '700px', /* image width */
   display: 'block', /* for alignment */
   margin: '0 auto' /* center alignment */
   }}
   />
   
4. プラン一覧を設定します：プランと価格を追加または削除してください。画面に表示される価格やプランは動的に追加されないため、手動で設定する必要があります。
   
   <img src="/assets/shared/img/web-paywall-configuration-8.gif"
   style={{
   border: '1px solid #727272', /* border width and color */
   width: '700px', /* image width */
   display: 'block', /* for alignment */
   margin: '0 auto' /* center alignment */
   }}
   />
   
5. プランごとにチェックアウト画面を追加または設定します。ユーザーが購入ボタンをクリックする前に支払金額を確認できるよう、各チェックアウト画面に合計金額を表示することをお勧めします。
6. チェックアウト画面にはすでにApple Payボタンがあります。機能させるには、各画面で以下を設定してください：
   1. **Product type**：トライアル期間または割引を追加するかどうかを選択します。
   2. **Trial period**：トライアル期間の長さを入力します。
   3. **Product**：決済プロバイダーからプロダクトを選択します。
      :::important
      プロダクトがAdaptyに追加されていることを確認してください。そうでない場合、購入結果はデフォルト値になります。
      :::
   4. **Subscription discount**：オプションで、決済プロバイダーからクーポンを選択します。
   
   <img src="/assets/shared/img/web-paywall-configuration-6.png"
   style={{
   border: '1px solid #727272', /* border width and color */
   width: '700px', /* image width */
   display: 'block', /* for alignment */
   margin: '0 auto' /* center alignment */
   }}
   />
   
7. 次に、プランとチェックアウト画面を紐付ける必要があります。プラン選択画面で **Continue** ボタンをクリックし、各プランの遷移先画面を選択します。
   
   <img src="/assets/shared/img/web-paywall-configuration-9.png"
   style={{
   border: '1px solid #727272', /* border width and color */
   width: '700px', /* image width */
   display: 'block', /* for alignment */
   margin: '0 auto' /* center alignment */
   }}
   />
   

ペイウォールの準備が完了したら、Adaptyでこのペイウォールを有効化するためのリンクを取得する必要があります。取得方法は、テスト中か本番環境での公開かによって異なります：

1. **サンドボックステスト用**：右上の **Preview** をクリックしてリンクをコピーします。
2. **本番環境用**：右上の **Publish** をクリックします。**Home** をクリックし、**URL** 列からリンクをコピーします。

   
   <img src="/assets/shared/img/web-paywall-configuration-11.png"
   style={{
   border: '1px solid #727272', /* border width and color */
   width: '700px', /* image width */
   display: 'block', /* for alignment */
   margin: '0 auto' /* center alignment */
   }}
   />
   

以上です！このリンクを使用して[設定を続けてください](web-paywall#step-2-trigger-the-paywall)。