> ## 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 플러그인

> 강력한 플러그인을 사용하여 Dodo Payments 체크아웃 기능을 Framer 프로젝트에 통합하세요. 사용자 정의 가능한 체크아웃 경험으로 결제를 수락하세요.

## 개요

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. 적절한 모드(Test 또는 Live)를 선택합니다
    5. **Continue**를 클릭하여 인증하세요

    <Warning>
      API 키를 안전하게 보관하고 절대 공개적으로 공유하지 마세요.
    </Warning>
  </Step>

  <Step title="Manage Products">
    인증 후에 제품 목록이 표시됩니다:

    * **기존 제품**: 자동으로 표시됩니다.
    * **제품 없음**: '제품' 옆의 **플러스 (+)** 버튼을 클릭하세요.

    <Info>
      가격, 설명 및 설정이 포함된 제품을 생성하기 위해 Dodo Payments Dashboard로 리디렉션됩니다.
    </Info>
  </Step>

  <Step title="Add Buy Buttons">
    1. 사용 가능한 목록에서 제품을 선택하세요
    2. `Add Buy Button` 버튼을 클릭하세요
    3. 텍스트 `Buy {product_name}`가 포함된 구매 버튼이 캔버스에 추가됩니다

    <Warning>
      올바른 프로젝트 권한이 없으면 구매 버튼 추가 기능이 비활성화됩니다.
    </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 키가 올바른지 확인하세요
    * 올바른 모드(Test/Live)를 사용하고 있는지 확인하세요
    * 인터넷 연결을 확인하세요
  </Accordion>

  <Accordion title="Button Creation Issues">
    **문제**: '구매 버튼 추가'가 비활성화됨

    **해결 방법**:

    * Framer 프로젝트에서 올바른 권한이 있는지 확인하세요
    * 제대로 인증되었는지 확인하세요
    * 플러그인을 새로고침해 보세요
  </Accordion>

  <Accordion title="Product Display Issues">
    **문제**: 제품이 표시되지 않음

    **해결 방법**:

    * Dodo Payments 대시보드에서 제품이 생성되어 있는지 확인하세요
    * API 키에 올바른 권한이 있는지 확인하세요
    * 다시 인증해 보세요
  </Accordion>
</AccordionGroup>