Skip to main content

​
개요

Dodo Payments Framer 플러그인은 Framer 사이트에 Dodo Payments 상품용 구매 버튼을 추가합니다. 각 버튼은 테스트 모드 또는 라이브 모드에서 페이지에 오버레이로 체크아웃을 열거나 고객을 호스팅 체크아웃 페이지로 이동시킵니다.

Official Plugin

Framer Marketplace에서 Dodo Payments 플러그인을 설치하세요.

​
기능

Hosted or Overlay Checkout

페이지에 오버레이로 체크아웃을 열거나 고객을 호스팅 체크아웃 페이지로 이동시키세요.

Drag-and-Drop Setup

플러그인에 API 키를 붙여넣고, 캔버스에 구매 버튼을 추가한 다음 게시하세요.

Digital Delivery

결제 후 이메일을 통해 고객에게 다운로드 링크 또는 라이선스 키를 전달하세요.

Worldwide Coverage

카드, 지갑 및 현지 결제 수단을 사용하여 220개 이상의 국가에 있는 고객에게 판매하세요.

Automatic Tax & Invoicing

Merchant of Record인 Dodo Payments는 VAT, GST 및 판매세를 계산하고 납부하며 각 결제에 대한 인보이스를 발행합니다.

No-Code Subscriptions

구독 상품은 코드 없이 일회성 상품과 동일한 구매 버튼을 사용합니다.

​
설정 가이드

1

Generate API Key

Dodo Payments 대시보드에서 Developer → API Keys로 이동한 다음 Add API Key를 클릭하세요. API Keys 페이지를 직접 열 수도 있습니다.API 키는 한 가지 모드에서만 작동합니다. 키를 만들기 전에 사이드바의 Live Mode 전환 버튼을 사용하여 모드를 선택하세요:
프로덕션용입니다. 고객은 실제 결제 수단으로 결제합니다.
API 키를 복사하여 안전하게 보관하세요. 대시보드에는 키가 한 번만 표시되며, 다음 단계에서 플러그인에 붙여넣습니다.
2

Authenticate Plugin

API 키를 비밀로 유지하세요. 절대 공유하거나 게시하지 마세요.
  1. Framer에서 Dodo Payments 플러그인을 엽니다. Authenticate 페이지가 열립니다.
  2. API Mode에서 API 키에 맞는 Test Mode 또는 Live Mode를 선택합니다.
  3. API Key에 API 키를 붙여넣습니다.
  4. Continue를 클릭합니다.
3

Manage Products

인증이 완료되면 플러그인이 Products 아래에 선택한 모드의 상품을 표시합니다:
  • Existing products는 자동으로 표시되며, 각 상품에 One-time 또는 Subscription이 표시됩니다.
  • No products yet: Products 옆의 Plus (+) 버튼을 클릭합니다.
Plus (+) 버튼을 누르면 Dodo Payments 대시보드가 열립니다. 여기에서 상품을 만들고 가격, 설명 및 기타 설정을 지정할 수 있습니다.
4

Add Buy Buttons

  1. 목록에서 상품을 선택합니다.
  2. Add Buy Button을 클릭합니다.
플러그인이 Buy {product_name} 레이블의 구매 버튼을 캔버스에 추가합니다. 같은 상품 화면에서 Edit를 클릭하면 Dodo Payments 대시보드에서 상품이 열리고, Show Preview를 클릭하면 해당 상품의 체크아웃 미리보기가 열립니다.
Framer 프로젝트에서 컴포넌트를 추가하고 속성을 변경할 권한이 없으면 Add Buy Button이 비활성화됩니다.

​
사용자 지정

구매 버튼의 작동 방식을 변경하려면 캔버스에서 버튼을 선택하고 Framer에서 속성을 편집하세요.
1

Select Checkout Experience

체크아웃이 열리는 방식을 선택하려면 Type을 설정합니다:
  • Overlay: 체크아웃이 Framer 페이지에 오버레이로 열리므로 고객은 사이트에 계속 머무를 수 있습니다. 플러그인은 새 버튼에 이 유형을 사용합니다.
  • Hosted: 버튼이 Dodo Payments 호스팅 체크아웃 페이지로 연결됩니다. Link Target에서 페이지를 새 탭 또는 같은 탭에서 열지 설정합니다.
2

Customize Appearance Options

다음 속성을 사용하여 버튼과 체크아웃을 사이트에 맞게 설정하세요:
  • Checkout Theme: 밝은 체크아웃 또는 어두운 체크아웃입니다.
  • Label: “Buy Now”, “Purchase” 또는 “Get Started”와 같은 버튼 텍스트입니다.
  • 버튼 스타일: 배경색, 텍스트 색상, 글꼴, 글꼴 크기, 테두리 반경 및 패딩입니다.
  • Return URL: 체크아웃 후 고객이 돌아갈 Framer 페이지 또는 URL입니다.
  • Environment: Live 또는 Test입니다. 플러그인은 인증한 모드로 설정합니다.

​
문제 해결

문제: 플러그인이 인증되지 않습니다.해결 방법:
  • 전체 API 키를 붙여넣었는지 확인하세요.
  • API Mode가 키를 만든 모드와 일치하는지 확인하세요. 테스트 모드 키는 라이브 모드에서 작동하지 않으며, 라이브 모드 키는 테스트 모드에서 작동하지 않습니다.
  • 인터넷 연결을 확인하세요.
문제: Add Buy Button이 비활성화되어 있습니다.해결 방법:
  • Framer 프로젝트에서 사용자의 역할에 컴포넌트를 추가하고 속성을 변경할 권한이 있는지 확인하세요.
  • 플러그인이 인증되었는지 확인하세요.
  • 플러그인을 닫았다가 다시 여세요.
문제: 플러그인에 상품이 표시되지 않습니다.해결 방법:
  • Dodo Payments 대시보드에서 상품을 만들었는지 확인하세요.
  • 상품이 API 키와 동일한 모드에 존재하는지 확인하세요. 플러그인은 인증한 모드의 상품만 표시합니다.
  • 플러그인을 다시 인증하세요.
마지막 수정일 2026년 9월 26일