> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dodopayments.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Framer プラグイン

> 強力なプラグインを使用して、Framer プロジェクトに Dodo Payments のチェックアウト機能を統合します。カスタマイズ可能なチェックアウト体験で支払いを受け付けます。

## 概要

Dodo Payments Framer プラグインは、Framer ウェブサイトに支払い処理をシームレスに統合します。テスト環境と本番環境の両方をサポートしたカスタマイズ可能なチェックアウト体験を作成します。

<Card title="Official Plugin" icon="link" href="https://www.framer.com/marketplace/plugins/dodo-payments">
  Framer マーケットプレイスで公式の Dodo Payments プラグインにアクセスします。
</Card>

## 機能

<CardGroup cols={2}>
  <Card title="Hosted or Overlay Checkout" icon="credit-card">
    フルページのフローかサイトにネイティブに馴染むインラインオーバーレイを選択してください。
  </Card>

  <Card title="Drag-and-Drop Setup" icon="hand-pointer">
    コンポーネントを追加し、キーを貼り付けて、公開します。
  </Card>

  <Card title="Instant Digital Delivery" icon="envelope">
    支払いが完了した瞬間に安全なダウンロードリンクやライセンスキーがメール送信されます。
  </Card>

  <Card title="Worldwide Coverage" icon="globe">
    銀行レベルの取得機能が6大陸で利用可能、ローカル決済方法を標準搭載。
  </Card>

  <Card title="Automatic Tax & Invoicing" icon="receipt">
    すべての注文に対するVAT、GST、売上税、領収書が処理されます。
  </Card>

  <Card title="No-Code Subscriptions" icon="toggle-on">
    スイッチを切り替えるだけで、製品のサブスクリプションプランを販売できます。
  </Card>
</CardGroup>

## セットアップガイド

<Steps>
  <Step title="Generate API Key">
    [Dodo Payments Dashboard](https://app.dodopayments.com/developer/api-keys) にアクセスして新しい API キーを作成します。

    <Tabs>
      <Tab title="Live Mode">
        実際の決済処理を伴う本番利用向けです。
      </Tab>

      <Tab title="Test Mode">
        実際の請求なしで開発・テストするのに最適です。
      </Tab>
    </Tabs>

    <Check>
      API キーを安全にコピーしてください — 次のステップで必要になります。
    </Check>
  </Step>

  <Step title="Authenticate Plugin">
    1. Framer で Dodo Payments プラグインを開きます
    2. 認証ページに移動します
    3. API キーを貼り付けます
    4. 適切なモード（テストまたはライブ）を選択します
    5. **Continue** をクリックして認証します

    <Warning>
      API キーは安全に保管し、公開しないでください。
    </Warning>
  </Step>

  <Step title="Manage Products">
    認証後、製品リストが表示されます：

    * **既存の製品**：自動的に表示されます
    * **製品がない**：'製品' の隣にある **プラス (+)** ボタンをクリックします。

    <Info>
      価格、説明、設定を含む製品を作成するために Dodo Payments ダッシュボードにリダイレクトされます。
    </Info>
  </Step>

  <Step title="Add Buy Buttons">
    1. 利用可能なリストから製品を選択します
    2. `Add Buy Button` ボタンをクリックします
    3. テキスト `Buy {product_name}` を持つ購入ボタンがキャンバスに追加されます

    <Warning>
      正しいプロジェクト権限がない場合、Add Buy Button は無効になります。
    </Warning>
  </Step>
</Steps>

## カスタマイズ

<Steps>
  <Step title="Select Checkout Experience">
    好みのチェックアウト体験を選択してください：

    * **Overlay (Embedded)**: チェックアウトが Framer プロジェクト内のオーバーレイとして表示され、ユーザーはサイトから離れません。
    * **Hosted**: ユーザーは Dodo Payments がホストするチェックアウトページにリダイレクトされ、よりスムーズな体験になります。
  </Step>

  <Step title="Customize Appearance Options">
    次の外観設定でチェックアウト体験をカスタマイズします：

    * **Checkout Theme**: ブランドの美観に合わせてライトまたはダークテーマを選択します。
    * **Button Label**: テキスト（例：'Buy Now', 'Purchase', 'Get Started'）をカスタマイズします。
    * **Button Styles**: 色、フォント、サイズ、その他のスタイル設定を調整します。
    * **Return URL**: チェックアウト後にユーザーが戻る Framer ページを設定します。
  </Step>
</Steps>

## トラブルシューティング

<AccordionGroup>
  <Accordion title="Authentication Issues">
    **問題**: プラグインが認証されません

    **解決策**:

    * API キーが正しいことを確認してください
    * 正しいモード（テスト/ライブ）を使用していることを確認してください
    * インターネット接続を確認してください
  </Accordion>

  <Accordion title="Button Creation Issues">
    **問題**: Add Buy Button が無効です

    **解決策**:

    * Framer プロジェクトで正しい権限を持っていることを確認してください
    * 正しく認証されていることを確認してください
    * プラグインをリフレッシュしてみてください
  </Accordion>

  <Accordion title="Product Display Issues">
    **問題**: 製品が表示されません

    **解決策**:

    * Dodo Payments ダッシュボードに製品が作成されていることを確認してください
    * API キーに正しい権限があることを確認してください
    * 再認証を試みてください
  </Accordion>
</AccordionGroup>