메인 콘텐츠로 건너뛰기
Checkout page
Dodo Payments 체크아웃은 디지털 제품 및 SaaS 비즈니스를 위해 전환율에 최적화된, 전 세계 규정 준수 체크아웃입니다. 여러 통화, 언어, 세금, 할인, 애드온 및 비즈니스 친화적인 규정 준수 워크플로를 지원합니다.

적응형 통화

적응형 통화는 고객이 선호하는 지역 통화로 결제할 수 있도록 하여 신뢰와 전환율을 향상시킵니다.

작동 방식

  1. 활성화: 비즈니스 설정에서 적응형 통화를 활성화합니다.
  2. 선택: 고객은 체크아웃에서 직접 통화를 전환할 수 있습니다.
  3. 변환: 가격은 실시간 FX 환율을 사용하여 동적으로 변환됩니다.
  4. 표시: 최종 지불 금액이 결제 전에 투명하게 표시됩니다.
Currency selector on checkout

Adaptive Currency

지원되는 통화, 환전 수수료, 환불 처리에 대해 자세히 알아보세요.

다국어 체크아웃

Dodo Payments는 체크아웃 페이지에서 여러 언어를 지원하여 고객이 편안한 언어로 결제를 완료할 수 있도록 합니다.
Language selector on checkout

주요 하이라이트

  • 체크아웃에서 직접 사용할 수 있는 언어 선택기
  • UI 텍스트, 레이블 및 시스템 메시지가 현지화됨
  • 접근성과 국제 전환율 향상

지원되는 언어

체크아웃 페이지는 21개 언어를 지원합니다:
언어코드
아랍어ar
카탈루냐어ca
중국어zh
네덜란드어nl
영어en
프랑스어fr
독일어de
히브리어he
인도네시아어id
이탈리아어it
일본어ja
한국어ko
말레이어ms
폴란드어pl
포르투갈어pt
루마니아어ro
러시아어ru
스페인어es
스웨덴어sv
태국어th
터키어tr
특정 언어를 강제로 설정하려면 체크아웃 세션 생성 시 force_language 매개변수를 설정하세요. 자세한 내용은 Checkout Sessions API를 참고하세요.

자동 세금 계산

세금은 고객의 청구 위치를 기반으로 자동 계산되어 GST, VAT 및 판매세 요건을 수동 설정 없이 준수할 수 있도록 합니다.

세금 계산 작동 방식

1

Location Detection

고객의 국가(및 적용되는 경우 지역)를 기준으로 세금 규칙이 적용됩니다.
2

Dynamic Updates

세금 금액은 다음과 같은 경우 자동으로 업데이트됩니다:
  • 국가 변경
  • 주소가 업데이트될 때
3

Transparent Display

결제 전에 최종 세금 내역이 명확히 표시됩니다.
세금 계산은 완전히 자동화되어 있으며 표준 디지털 상품 및 SaaS 제품에는 수동 구성이 필요 없습니다.

사업자 세금 ID 지원

등록된 사업체의 경우 체크아웃에서 고객이 VAT/GST 번호와 같은 사업자 세금 ID를 입력할 수 있습니다.

세금 ID를 입력할 경우

  • 세금 적용 대상 여부가 실시간으로 검증됩니다
  • 해당되는 세금 면제 또는 역급징수 규칙이 적용됩니다
  • 세금 금액이 체크아웃에서 즉시 업데이트됩니다
Business Tax ID entry on checkout
이는 사업 고객이 세금 면제를 받을 수 있는 B2B SaaS 및 디지털 서비스에서 특히 유용합니다.

할인 코드

고객은 대시보드에서 생성한 할인 또는 프로모션 코드를 체크아웃 페이지에서 바로 적용할 수 있습니다.

체크아웃 경험

  1. 고객이 할인 코드를 입력합니다
  2. 할인이 즉시 검증됩니다
  3. 업데이트된 가격 및 절감액이 명확히 표시됩니다
Discount code entry on checkout

API 통합

할인 코드를 사전 적용하거나 할인 입력 필드를 활성화하세요:
const session = await client.checkoutSessions.create({
  product_cart: [
    { product_id: 'prod_abc', quantity: 1 }
  ],
  discount_code: 'WELCOME20', // Pre-apply a code
  feature_flags: {
    allow_discount_code: true // Show discount input field
  },
  return_url: 'https://yoursite.com/return'
});

Discount Codes

할인 코드를 생성하고 관리하는 방법을 알아보세요.

Validate Discount by Code

코드 이름을 사용하여 할인 정보를 조회하고 검증하세요.

스마트 주소 수집

체크아웃은 더 빠른 완료를 위해 유연한 주소 입력을 지원합니다.

제공되는 옵션

옵션설명
Google 주소 자동완성자동완성과 함께 빠르게 선택
수동 입력전체 주소에 대한 완전한 제어
국가 선택세금 및 규정 준수 로직을 구동
주소 수집은 속도, 정확성, 글로벌 범위를 균형 있게 유지하여 전환율을 극대화하면서 규정 준수를 보장합니다.

사용자 정의 필드

체크아웃 중에 회사 이름, 팀 규모, 추천 출처 또는 기타 비즈니스별 정보를 수집하기 위해 고객으로부터 추가 정보를 수집하세요.

사용 가능한 필드 유형

유형설명
text한 줄 텍스트 입력
number숫자 입력
email검증이 포함된 이메일 주소
url검증이 포함된 URL
date날짜 선택기
dropdown미리 정의된 옵션 중 선택
boolean예/아니오 토글

예시

const session = await client.checkoutSessions.create({
  product_cart: [
    { product_id: 'prod_abc', quantity: 1 }
  ],
  custom_fields: [
    {
      key: 'company_name',
      label: 'Company Name',
      field_type: 'text',
      required: true
    },
    {
      key: 'team_size',
      label: 'Team Size',
      field_type: 'dropdown',
      required: true,
      options: ['1-10', '11-50', '51-200', '200+']
    }
  ],
  return_url: 'https://yoursite.com/return'
});
고객 응답은 웹훅 페이로드(payment.succeeded, subscription.active)와 custom_field_responses 배열을 통해 API 응답에 자동으로 포함됩니다. 체크아웃 세션당 최대 5개의 사용자 정의 필드를 정의할 수 있습니다.

Custom Fields Guide

사용자 정의 필드 구성 및 응답 접근에 대해 자세히 알아보세요.

개인정보 처리방침 및 이용약관 수락

법률 및 규정 준수 투명성을 위해:
이는 GDPR 준수를 포함한 전 세계 소비자 보호 및 데이터 프라이버시 요구 사항을 충족하는 데 도움이 됩니다.

컬렉션 체크아웃

제품 컬렉션은 고객이 스타터, 프로, 엔터프라이즈 요금제 등 여러 관련 제품을 하나의 체크아웃에서 보고 선택할 수 있는 통합 체크아웃 경험을 제공합니다.

작동 방식

  1. 모든 제품 표시: 고객은 컬렉션의 모든 활성 제품을 확인합니다
  2. 첫 번째 제품이 기본 선택됨: 컬렉션에서 첫 번째 제품이 자동으로 선택됩니다
  3. 옵션 비교: 고객은 선택 전에 가격과 기능을 비교할 수 있습니다
  4. 단일 선택: 제품을 선택한 후, 체크아웃은 표준 결제 흐름으로 진행됩니다

컬렉션 체크아웃 생성

const session = await client.checkoutSessions.create({
  product_collection_id: 'pdc_abc123',
  product_cart: [], // Required: pass an empty array for collection checkout
  return_url: 'https://yoursite.com/return'
});
product_collection_id를 사용할 때는 빈 product_cart 배열을 전달하세요. 세션 생성 시 할인 코드를 사전 적용할 수 없습니다.

Product Collections

통합 체크아웃 경험을 위한 제품 컬렉션 생성 및 관리 방법을 알아보세요.

체크아웃 세션 구성

Checkout Sessions API를 사용하여 체크아웃 동작을 제어하세요:
const session = await client.checkoutSessions.create({
  product_cart: [
    { product_id: 'prod_abc', quantity: 1 }
  ],
  customer: {
    email: 'customer@example.com',
    name: 'Jane Doe'
  },
  billing_currency: 'EUR', // Set specific currency
  discount_code: 'PROMO10',
  feature_flags: {
    allow_discount_code: true
  },
  return_url: 'https://yoursite.com/return',
  metadata: {
    order_ref: 'ORD-12345'
  }
});
결제 후 고객은 return_url로 자동으로 쿼리 매개변수가 추가된 상태로 리디렉션됩니다 — payment_id 또는 subscription_id, status, email, license_key(적용 가능한 경우)를 포함합니다. 전체 목록은 Checkout Sessions guide를 참조하세요.

체크아웃 테마 사용자 정의

API를 통해 체크아웃 세션을 생성할 때 customization.theme_config 매개변수를 사용하여 체크아웃 페이지 외관을 브랜드에 맞게 맞춤 설정하세요. 밝은 모드와 어두운 모드 모두에 대해 색상, 글꼴, 테두리 반경 및 버튼 텍스트를 구성할 수 있습니다.
Custom themed checkout page

Design & Theme Customization

사전 제작된 테마, 타이포그래피, 색상 및 실시간 미리보기를 통해 대시보드에서 테마를 시각적으로 구성하세요.
이 섹션에서는 customization.theme_config를 사용한 서버 측 API 테마 구성을 다룹니다. Checkout SDK(오버레이 또는 인라인 체크아웃)를 사용하는 경우 camelCase 속성을 사용하는 Overlay Checkout 또는 Inline Checkout의 테마 사용자 지정 섹션을 참고하세요 (예: bgPrimary 대신 bg_primary).

테마 구성 옵션

속성설명
light라이트 모드에 대한 색상 구성
dark다크 모드에 대한 색상 구성
font_primary_url기본 글꼴의 URL
font_secondary_url보조 글꼴의 URL
font_size글꼴 크기: xs, sm, md, lg, xl, 2xl
font_weight글꼴 두께: normal, medium, bold, extraBold
radiusUI 요소(예: 4px, 0.5rem, 8px)의 테두리 반경
pay_button_text결제 버튼에 대한 사용자 지정 텍스트(예: “Complete Purchase”, “Subscribe Now”)

색상 구성(라이트/다크 모드)

각 모드(lightdark)는 다음 색상 속성을 지원합니다:
속성설명
bg_primary배경 기본 색상
bg_secondary배경 보조 색상
text_primary텍스트 기본 색상
text_secondary텍스트 보조 색상
text_placeholder텍스트 플레이스홀더 색상
text_error텍스트 오류 색상
text_success텍스트 성공 색상
border_primary테두리 기본 색상
border_secondary테두리 보조 색상
button_primary주요 버튼 배경 색상
button_primary_hover주요 버튼 호버 색상
button_secondary보조 버튼 배경 색상
button_secondary_hover보조 버튼 호버 색상
button_text_primary주요 버튼 텍스트 색상
button_text_secondary보조 버튼 텍스트 색상
input_focus_border입력 포커스 테두리 색상
모든 색상 필드는 표준 CSS 색상 형식을 허용합니다:
  • Hex: #fff, #ffffff, #ffffffff
  • RGB/RGBA: rgb(255, 255, 255), rgba(255, 255, 255, 0.5)
  • HSL/HSLA: hsl(120, 100%, 50%), hsla(120, 100%, 50%, 0.5)
  • Named colors: red, blue, transparent

예시

const session = await client.checkoutSessions.create({
  product_cart: [
    { product_id: 'prod_abc', quantity: 1 }
  ],
  customization: {
    theme_config: {
      // Custom fonts
      font_primary_url: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap',
      font_size: 'md',
      font_weight: 'medium',
      radius: '8px',
      pay_button_text: 'Complete Purchase',
      
      // Light mode colors
      light: {
        bg_primary: '#ffffff',
        bg_secondary: '#f5f5f5',
        text_primary: '#1a1a1a',
        text_secondary: '#666666',
        button_primary: '#0066ff',
        button_primary_hover: '#0052cc',
        button_text_primary: '#ffffff',
        border_primary: '#e0e0e0'
      },
      
      // Dark mode colors
      dark: {
        bg_primary: '#1a1a1a',
        bg_secondary: '#2d2d2d',
        text_primary: '#ffffff',
        text_secondary: '#a0a0a0',
        button_primary: '#3385ff',
        button_primary_hover: '#4d99ff',
        button_text_primary: '#ffffff',
        border_primary: '#404040'
      }
    }
  },
  return_url: 'https://yoursite.com/return'
});
모든 색상 속성을 지정할 필요는 없습니다. 지정되지 않은 속성은 기본 테마 값을 사용합니다.