인라인 체크아웃

인라인 checkout은 안전한 결제 양식을 페이지 레이아웃에 직접 삽입합니다. 모달로 열리는 overlay checkout과 달리 인라인 checkout은 페이지의 일부가 됩니다. 레이아웃을 직접 제어하고 checkout 양식 옆에 자체 주문 요약을 표시할 수 있습니다.

작동 방식

인라인 checkout은 페이지의 컨테이너에 안전한 Dodo Payments 프레임을 렌더링합니다. 이 프레임은 고객 정보와 결제 세부 정보를 수집합니다. 페이지에는 항목, 합계 및 기타 정보가 표시됩니다. SDK를 사용하면 페이지와 checkout 프레임이 서로 통신할 수 있습니다. checkout이 완료되면 Dodo Payments는 결제를 생성하거나, 구독 상품인 경우 구독을 생성하고 webhook을 전송하여 액세스 권한을 프로비저닝할 수 있도록 합니다.

인라인 checkout 프레임은 모든 민감한 결제 정보를 안전하게 처리하므로, 별도의 인증 없이도 PCI 규정을 준수할 수 있습니다.

좋은 인라인 checkout의 조건

고객은 누구에게서 무엇을 구매하는지, 그리고 얼마를 결제하는지 알아야 합니다. 구현에는 다음 항목이 포함되어야 합니다:

필수 요소가 표시된 인라인 checkout 예시 — Example inline checkout layout showing required elements

반복 결제 정보: 반복 결제인 경우 결제 주기와 갱신 시 결제할 총액을 표시합니다. 체험 기간이 있는 경우 체험 기간도 표시합니다.
상품 설명: 구매하는 상품에 대한 설명입니다.
거래 합계: 통화 단위를 포함한 소계, 총 세금 및 총액입니다.
Dodo Payments 푸터: Dodo Payments 정보, 판매 약관 및 개인정보 보호정책이 포함된 푸터를 포함하여 인라인 checkout 프레임 전체를 표시합니다.
환불 정책: Dodo Payments의 표준 환불 정책과 다른 경우 자체 환불 정책으로 연결되는 링크를 표시합니다.

푸터를 포함한 인라인 checkout 프레임 전체를 항상 표시하세요. 법적 정보를 제거하거나 숨기면 규정 준수 요건을 위반하게 됩니다.

고객 여정

checkout 흐름은 checkout session 구성에 따라 달라집니다. session을 구성하는 방식에 따라 고객은 모든 정보를 한 페이지에서 보거나 여러 단계에 걸쳐 보게 됩니다.

Customer opens checkout

checkout URL을 전달하여 인라인 checkout을 엽니다. checkout.breakdown와 같은 SDK 이벤트를 사용하여 페이지 내 정보를 표시하고 업데이트하세요.

Customer enters their details

인라인 checkout은 먼저 고객에게 이메일 주소와 국가를 입력하고, 필요한 경우 ZIP 또는 우편번호를 입력하도록 요청합니다. 이 단계에서는 세금과 사용 가능한 결제 옵션을 결정하는 데 필요한 모든 정보를 수집합니다.고객 세부 정보를 미리 입력하고 저장된 주소를 표시하여 경험을 간소화할 수 있습니다.

Customer selects payment method

세부 정보를 입력하면 고객에게 사용 가능한 결제 수단과 결제 양식이 표시됩니다. 고객의 위치에 따라 신용카드 또는 직불카드, PayPal, Apple Pay, Google Pay 및 기타 현지 결제 수단이 포함될 수 있습니다.사용 가능한 경우 저장된 결제 수단을 표시하여 checkout을 신속하게 진행할 수 있습니다.

Checkout completed

Dodo Payments는 모든 결제를 해당 거래에 가장 적합한 acquirer에게 전달하여 성공 가능성을 최대화합니다. 고객은 직접 구축할 수 있는 성공 흐름으로 이동합니다.

Dodo Payments creates the payment or subscription

Dodo Payments는 결제를 생성하거나 구독 상품인 경우 구독을 생성하고 webhook을 전송하여 액세스 권한을 프로비저닝할 수 있도록 합니다. 고객이 사용한 결제 수단은 갱신 또는 구독 변경을 위해 파일에 저장됩니다.

빠른 시작

SDK를 설치하고 인라인 모드로 초기화한 다음 컨테이너 요소에서 checkout을 엽니다:

import { DodoPayments } from "dodopayments-checkout";

DodoPayments.Initialize({
  mode: "test",
  displayType: "inline",
  onEvent: (event) => {
    console.log("Checkout event:", event);
  },
});

DodoPayments.Checkout.open({
  checkoutUrl: "https://test.checkout.dodopayments.com/session/cks_123",
  elementId: "dodo-inline-checkout"
});

페이지에 해당 id가 있는 컨테이너 요소가 있는지 확인하세요: <div id="dodo-inline-checkout"></div>.

단계별 통합

Install the SDK

npm, yarn 또는 pnpm을 통해 설치합니다:

npm install dodopayments-checkout

yarn add dodopayments-checkout

pnpm add dodopayments-checkout

Initialize the SDK for Inline Display

SDK를 초기화하고 displayType: 'inline'를 지정합니다. checkout.breakdown 이벤트를 수신하여 실시간 세금 및 총액 계산 결과로 UI를 업데이트하세요:

import { DodoPayments } from "dodopayments-checkout";

DodoPayments.Initialize({
  mode: "test",
  displayType: "inline",
  onEvent: (event) => {
    if (event.event_type === "checkout.breakdown") {
      const breakdown = event.data?.message;
      // Update your UI with breakdown.subTotal, breakdown.tax, breakdown.total, etc.
    }
  },
});

Create a Container Element

checkout 프레임이 삽입될 HTML 요소를 추가합니다:

<div id="dodo-inline-checkout"></div>

Open the Checkout

DodoPayments.Checkout.open()를 컨테이너의 checkoutUrl 및 elementId와 함께 호출합니다:

DodoPayments.Checkout.open({
  checkoutUrl: "https://test.checkout.dodopayments.com/session/cks_123",
  elementId: "dodo-inline-checkout"
});

Test Your Integration

개발 서버를 시작합니다:

npm run dev

checkout 흐름을 테스트합니다:
- 인라인 프레임에 이메일과 주소 세부 정보를 입력합니다
- 사용자 지정 주문 요약이 실시간으로 업데이트되는지 확인합니다
- 테스트 자격 증명을 사용하여 결제 흐름을 테스트합니다
- 리디렉션이 올바르게 작동하는지 확인합니다

onEvent callback에 console log를 추가했다면 브라우저 콘솔에 checkout.breakdown 이벤트가 기록되는 것을 확인할 수 있습니다.

Go Live

프로덕션 준비가 완료되면:

모드를 'live'로 변경합니다:

DodoPayments.Initialize({
  mode: "live",
  displayType: "inline",
  onEvent: (event) => {
    // Handle events
  }
});

checkout URL을 백엔드의 live checkout session을 사용하도록 업데이트합니다
프로덕션에서 전체 흐름을 테스트합니다

완전한 React 예시

이 예시는 checkout.breakdown 이벤트를 사용하여 사용자 지정 주문 요약과 인라인 checkout을 함께 구현하고 서로 동기화하는 방법을 보여줍니다:

"use client";

import { useEffect, useState } from 'react';
import { DodoPayments, CheckoutBreakdownData } from 'dodopayments-checkout';

export default function CheckoutPage() {
  const [breakdown, setBreakdown] = useState<Partial<CheckoutBreakdownData>>({});

  useEffect(() => {
    // 1. Initialize the SDK
    DodoPayments.Initialize({
      mode: 'test',
      displayType: 'inline',
      onEvent: (event) => {
        // 2. Listen for the 'checkout.breakdown' event
        if (event.event_type === "checkout.breakdown") {
          const message = event.data?.message as CheckoutBreakdownData;
          if (message) setBreakdown(message);
        }
      }
    });

    // 3. Open the checkout in the specified container
    DodoPayments.Checkout.open({
      checkoutUrl: 'https://test.checkout.dodopayments.com/session/cks_123',
      elementId: 'dodo-inline-checkout'
    });

    return () => DodoPayments.Checkout.close();
  }, []);

  const format = (amt: number | null | undefined, curr: string | null | undefined) => 
    amt != null && curr ? `${curr} ${(amt/100).toFixed(2)}` : '0.00';

  const currency = breakdown.currency ?? breakdown.finalTotalCurrency ?? '';

  return (
    <div className="flex flex-col md:flex-row min-h-screen">
      {/* Left Side - Checkout Form */}
      <div className="w-full md:w-1/2 flex items-center">
        <div id="dodo-inline-checkout" className='w-full' />
      </div>

      {/* Right Side - Custom Order Summary */}
      <div className="w-full md:w-1/2 p-8 bg-gray-50">
        <h2 className="text-2xl font-bold mb-4">Order Summary</h2>
        <div className="space-y-2">
          {breakdown.subTotal != null && (
            <div className="flex justify-between">
              <span>Subtotal</span>
              <span>{format(breakdown.subTotal, currency)}</span>
            </div>
          )}
          {breakdown.discount != null && breakdown.discount > 0 && (
            <div className="flex justify-between">
              <span>Discount</span>
              <span>{format(breakdown.discount, currency)}</span>
            </div>
          )}
          {breakdown.tax != null && (
            <div className="flex justify-between">
              <span>Tax</span>
              <span>{format(breakdown.tax, currency)}</span>
            </div>
          )}
          <hr />
          {(breakdown.finalTotal ?? breakdown.total) != null && (
            <div className="flex justify-between font-bold text-xl">
              <span>Total</span>
              <span>{format(breakdown.finalTotal ?? breakdown.total, breakdown.finalTotalCurrency ?? currency)}</span>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

API Reference

초기화

SDK를 설정하려면 Initialize를 한 번 호출합니다:

interface InitializeOptions {
  mode: "test" | "live";
  displayType?: "overlay" | "inline";
  onEvent: (event: CheckoutEvent) => void;
}

DodoPayments.Initialize(options);

옵션	Type	필수	설명
`mode`	`"test" \| "live"`	예	환경 모드입니다.
`displayType`	`"inline" \| "overlay"`	예	checkout을 삽입하려면 `"inline"`로 설정해야 합니다.
`onEvent`	`function`	예	checkout 이벤트를 처리하는 callback 함수입니다.

Checkout 열기

컨테이너에서 checkout 프레임을 엽니다:

export type FontSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
export type FontWeight = "normal" | "medium" | "bold" | "extraBold";

interface CheckoutOptions {
  checkoutUrl: string;
  elementId: string;
  options?: {
    showTimer?: boolean;
    showSecurityBadge?: boolean;
    manualRedirect?: boolean;
    payButtonText?: string;
    fontSize?: FontSize;
    fontWeight?: FontWeight;
  };
}

DodoPayments.Checkout.open(options);

옵션	Type	필수	설명
`checkoutUrl`	`string`	예	create checkout session API의 checkout session URL입니다.
`elementId`	`string`	예	checkout을 렌더링할 DOM 요소의 `id`입니다.
`options.showTimer`	`boolean`	아니요	session timer를 표시하거나 숨깁니다. 기본값은 `true`입니다. `false`로 설정하면 session이 만료될 때 `checkout.link_expired` 이벤트를 수신합니다.
`options.showSecurityBadge`	`boolean`	아니요	security badge를 표시하거나 숨깁니다. 기본값은 `true`입니다.
`options.manualRedirect`	`boolean`	아니요	`true`인 경우 자동 리디렉션을 방지합니다. checkout은 결제 결과가 포함된 `checkout.status`와 열 URL이 포함된 `checkout.redirect_requested`를 내보내며, 탐색은 직접 처리합니다.
`options.payButtonText`	`string`	아니요	결제 버튼에 표시할 사용자 지정 텍스트입니다.
`options.fontSize`	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"`	아니요	checkout의 전역 글꼴 크기입니다.
`options.fontWeight`	`"normal" \| "medium" \| "bold" \| "extraBold"`	아니요	checkout의 전역 글꼴 두께입니다.

Checkout 닫기

checkout 프레임을 프로그래밍 방식으로 제거하고 이벤트 리스너를 정리합니다:

DodoPayments.Checkout.close();

상태 확인

현재 checkout 프레임이 삽입되어 있는지 확인합니다:

const isOpen = DodoPayments.Checkout.isOpen();
// Returns: boolean

이벤트

SDK는 onEvent callback을 통해 실시간 이벤트를 제공합니다. 인라인 checkout에서는 checkout.breakdown가 UI 동기화에 특히 유용합니다:

DodoPayments.Initialize({
  mode: "test",
  displayType: "inline",
  onEvent: (event: CheckoutEvent) => {
    switch (event.event_type) {
      case "checkout.opened":
        // Frame has loaded
        break;
      case "checkout.form_ready":
        // Form is ready for user input
        break;
      case "checkout.breakdown":
        // Prices, taxes, or discounts updated
        break;
      case "checkout.customer_details_submitted":
        // Customer details submitted
        break;
      case "checkout.pay_button_clicked":
        // Customer clicked pay button
        break;
      case "checkout.redirect":
        // Checkout will redirect
        break;
      case "checkout.error":
        console.error("Error:", event.data?.message);
        break;
      case "checkout.link_expired":
        // Session expired (only when showTimer is false)
        break;
    }
  }
});

이벤트	설명
`checkout.opened`	checkout 프레임이 로드되었습니다.
`checkout.form_ready`	양식이 사용자 입력을 받을 준비가 되었습니다. 로딩 상태를 숨길 때 사용합니다.
`checkout.breakdown`	가격, 세금 또는 할인이 업데이트되었습니다.
`checkout.customer_details_submitted`	고객 세부 정보가 제출되었습니다.
`checkout.pay_button_clicked`	고객이 결제 버튼을 클릭했습니다. 분석 및 전환 퍼널 추적에 유용합니다.
`checkout.redirect`	checkout이 리디렉션됩니다(예: 은행 페이지로).
`checkout.error`	checkout 중 오류가 발생했습니다.
`checkout.link_expired`	checkout session이 만료되었습니다. `showTimer`가 `false`로 설정된 경우에만 수신됩니다.

Checkout 내역 데이터

checkout.breakdown 이벤트는 가격 및 세금 정보를 제공합니다:

interface CheckoutBreakdownData {
  subTotal?: number;          // Amount in cents
  discount?: number;          // Amount in cents
  tax?: number;               // Amount in cents
  total?: number;             // Amount in cents
  currency?: string;          // e.g., "USD"
  finalTotal?: number;        // Final amount including adjustments
  finalTotalCurrency?: string; // Currency for the final total
}

이벤트는 checkout 프레임이 로드될 때 발생하며, 고객이 국가를 선택하거나 세금이 변경되는 우편번호를 입력하는 등 가격이 재계산될 때마다 다시 발생합니다. 필드 세부 정보:

필드	설명
`subTotal`	할인 또는 세금을 적용하기 전 모든 line item의 합계입니다.
`discount`	적용된 모든 할인의 총액입니다.
`tax`	계산된 세금 금액입니다. 사용자가 주소 필드와 상호작용할 때 동적으로 업데이트됩니다.
`total`	session의 기본 통화로 표시한 `subTotal - discount + tax`의 결과입니다.
`currency`	표준 소계, 할인 및 세금 값에 사용되는 ISO 통화 코드입니다(예: `"USD"`).
`finalTotal`	고객에게 실제로 청구되는 금액입니다. 기본 가격 내역에 포함되지 않은 추가 환전 조정 또는 현지 결제 수단 수수료가 포함될 수 있습니다.
`finalTotalCurrency`	고객이 실제로 결제하는 통화입니다. purchasing power parity 또는 현지 통화 변환이 활성화되어 있으면 `currency`와 다를 수 있습니다.

통합 팁:

통화 형식 지정: 가격은 통화의 가장 작은 단위로 표시되는 정수입니다(예: USD의 센트). 소수점 두 자리를 사용하는 통화는 Intl.NumberFormat로 형식을 지정하기 전에 100으로 나눕니다. JPY와 같은 소수점 없는 통화에는 더 작은 단위가 없으므로 나누지 않습니다.
초기 상태 처리: checkout이 처음 로드될 때 사용자가 청구 정보를 입력하거나 코드를 적용하기 전까지 tax 및 discount가 0 또는 null일 수 있습니다. 이러한 상태를 적절하게 처리하세요(예: 대시 —를 표시하거나 행을 숨김).
“Final Total”과 “Total”: total는 표준 가격 계산을 제공하지만, finalTotal는 거래의 기준값입니다. finalTotal가 있으면 고객 카드에 실제로 청구될 금액을 정확히 나타냅니다.
실시간 피드백: tax 필드를 사용하여 세금이 실시간으로 계산되고 있음을 사용자에게 표시하세요. checkout 페이지가 실시간으로 반응하는 느낌을 주고 주소 입력 단계의 마찰을 줄일 수 있습니다.

CDN 구현

빌드 단계 없이 빠르게 통합하려면 CDN에서 SDK를 로드합니다:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dodo Payments Inline Checkout</title>
  
  <script src="https://cdn.jsdelivr.net/npm/dodopayments-checkout@latest/dist/index.js"></script>
  <script>
    DodoPaymentsCheckout.DodoPayments.Initialize({
      mode: "test",
      displayType: "inline",
      onEvent: (event) => {
        console.log('Checkout event:', event);
      }
    });
  </script>
</head>
<body>
  <div id="dodo-inline-checkout"></div>

  <script>
    DodoPaymentsCheckout.DodoPayments.Checkout.open({
      checkoutUrl: "https://test.checkout.dodopayments.com/session/cks_123",
      elementId: "dodo-inline-checkout"
    });
  </script>
</body>
</html>

결제 수단 업데이트

인라인 checkout은 구독의 결제 수단 업데이트를 지원합니다. 고객이 활성 구독의 결제 수단을 업데이트하거나 보류 중인 구독을 재활성화해야 하는 경우, 페이지 레이아웃 내에서 바로 업데이트 흐름을 렌더링할 수 있습니다.

작동 방식

Update Payment Method API를 호출하여 payment_link를 가져옵니다:

// On your server. `client` is the Dodo Payments server SDK (`new DodoPayments()` from the `dodopayments` package).
const response = await client.subscriptions.updatePaymentMethod('sub_123', {
  payment_method: { type: 'new', return_url: 'https://example.com/return' }
});

반환된 payment_link를 checkoutUrl로 전달하여 인라인 checkout을 엽니다:

DodoPayments.Checkout.open({
  checkoutUrl: response.payment_link,
  elementId: "dodo-inline-checkout"
});

인라인 프레임은 결제 수단 수집 양식만 렌더링합니다. 고객은 페이지를 떠나지 않고 새 카드 세부 정보를 입력하거나 저장된 결제 수단을 선택할 수 있습니다.

보류 중인 구독의 경우

on_hold 상태의 구독에 대한 결제 수단을 업데이트하면 Dodo Payments는 남은 미납액에 대해 자동으로 charge를 생성합니다. 재활성화를 확인하려면 payment.succeeded 및 subscription.active webhook을 모니터링하세요.

const response = await client.subscriptions.updatePaymentMethod('sub_123', {
  payment_method: { type: 'new', return_url: 'https://example.com/return' }
});

if (response.payment_id) {
  // Charge created for remaining dues
  DodoPayments.Checkout.open({
    checkoutUrl: response.payment_link,
    elementId: "dodo-inline-checkout"
  });
}

새로운 세부 정보를 수집하는 대신 Update Payment Method API에 type: 'existing'와 payment_method_id를 전달하여 기존 저장 결제 수단을 사용할 수도 있습니다.

오류 처리

onEvent callback에는 항상 오류 처리를 구현하세요:

DodoPayments.Initialize({
  mode: "test",
  displayType: "inline",
  onEvent: (event: CheckoutEvent) => {
    if (event.event_type === "checkout.error") {
      console.error("Checkout error:", event.data?.message);
      // Show user-friendly error message
    }
  }
});

오류가 발생했을 때 원활한 사용자 경험을 제공하려면 checkout.error 이벤트를 항상 처리하세요.

모범 사례

반응형 디자인: 컨테이너 요소에 충분한 너비와 높이가 있는지 확인합니다. iframe은 일반적으로 컨테이너를 채우도록 확장됩니다.
동기화: checkout.breakdown 이벤트를 사용하여 사용자 지정 주문 요약 또는 가격표를 checkout 프레임에 표시되는 내용과 동기화합니다.
Skeleton 상태: checkout.opened 이벤트가 발생할 때까지 컨테이너에 로딩 표시기를 표시합니다.
정리: 컴포넌트가 unmount될 때 DodoPayments.Checkout.close()를 호출하여 iframe과 이벤트 리스너를 정리합니다.

다크 모드 구현에서는 인라인 checkout 프레임과 시각적으로 가장 잘 통합되도록 #0d0d0d를 배경색으로 사용하세요.

결제 상태 검증

결제 성공 또는 실패를 판단할 때 인라인 checkout 이벤트에만 의존하지 마세요. 항상 webhook 및/또는 polling을 사용한 서버 측 검증을 구현하세요.

서버 측 검증이 필수적인 이유

인라인 checkout 이벤트는 실시간 피드백을 제공하지만, 결제 상태를 확인하는 유일한 기준으로 사용해서는 안 됩니다. 네트워크 문제, 브라우저 충돌 또는 사용자가 페이지를 닫는 상황으로 인해 이벤트가 누락될 수 있습니다. 신뢰할 수 있는 결제 검증을 위해 다음을 수행하세요:

webhook 이벤트 수신 - Dodo Payments는 결제 상태 변경에 대한 webhook을 전송합니다.
polling 메커니즘 구현 - 프런트엔드는 상태 업데이트를 위해 서버를 polling해야 합니다.
두 방식 결합 - webhook을 기본 소스로 사용하고 polling을 대체 수단으로 사용합니다.

권장 아키텍처

구현 단계

1. checkout 이벤트 수신 - 사용자가 결제 버튼을 클릭하면 상태 확인 준비를 시작합니다:

onEvent: (event) => {
  if (event.event_type === 'checkout.pay_button_clicked') {
    // Start polling your server for confirmed status
    startPolling();
  }
}

2. 서버 polling - 데이터베이스에서 결제 상태를 확인하는 endpoint를 생성합니다(webhook으로 업데이트됨):

// Poll every 2 seconds until status is confirmed
const interval = setInterval(async () => {
  const { status } = await fetch(`/api/payments/${paymentId}/status`).then(r => r.json());
  if (status === 'succeeded' || status === 'failed') {
    clearInterval(interval);
    handlePaymentResult(status);
  }
}, 2000);

3. 서버 측 webhook 처리 - Dodo가 payment.succeeded 또는 payment.failed webhook을 전송하면 데이터베이스를 업데이트합니다. 자세한 내용은 Webhooks documentation을 참조하세요.

문제 해결

Checkout frame is not appearing

elementId가 실제로 DOM에 존재하는 div의 id와 일치하는지 확인합니다
displayType: 'inline'가 Initialize에 전달되었는지 확인합니다
checkoutUrl가 유효한지 확인합니다

Taxes are not updating in my UI

checkout.breakdown 이벤트를 수신하고 있는지 확인합니다
checkout 프레임에서 사용자가 유효한 국가와 우편번호를 입력한 후에만 세금이 계산됩니다

디지털 지갑

Apple Pay, Google Pay 및 기타 디지털 지갑 설정에 대한 자세한 내용은 Digital Wallets 페이지를 참조하세요.

Apple Pay 빠른 설정

도메인 verification은 인라인(임베디드) checkout에만 필요합니다. hosted checkout에는 필요하지 않습니다.

Apple Pay는 overlay checkout에서 사용할 수 없습니다.

Apple Pay는 대시보드에서 도메인별로 verification됩니다.

Open Wallet domains

Settings → Payment Methods로 이동한 다음 Apple Pay 행에서 Manage domains를 클릭합니다.

Payment Methods 설정의 Apple Pay 행에 있는 Manage domains 버튼 — Open Wallet domains from the Apple Pay row

Download the domain association file

Wallet domains 패널에서 association 파일을 다운로드합니다.

Download file 버튼이 있는 Wallet domains 패널 — Download the Apple Pay domain association file

Register domain을 클릭하고 인라인 checkout을 삽입할 도메인(예: shop.example.com)을 입력한 다음 Continue를 클릭합니다.

도메인이 입력된 도메인 등록 양식 — Register the domain where you embed inline checkout

Host the file on your domain

다음 위치에서 호스팅합니다:

https://shop.example.com/.well-known/apple-developer-merchantid-domain-association

HTTPS를 통해 제공되어야 하며 리디렉션 없이 접근할 수 있어야 하고 Content-Type: application/octet-stream 또는 text/plain와 함께 제공되어야 합니다.

Verify the domain

Verify domain을 클릭합니다. Dodo Payments가 파일이 활성 상태인지 확인하고 도메인을 Apple에 제출합니다.

association 파일 호스팅 경로와 Verify domain 버튼이 표시된 도메인 verification 화면 — Verify the hosted association file

Confirm it's active

상태가 Active로 표시되면 해당 도메인에서 Apple Pay가 활성화된 것입니다. Enabled 토글을 사용하여 도메인별로 활성화하거나 비활성화할 수 있습니다.

Active Apple Pay 상태와 Enabled 토글이 표시된 Wallet domains 목록 — Verified domains show an Active status

Test the integration

Apple 기기에서 checkout을 엽니다
Apple Pay 버튼이 표시되는지 확인합니다
테스트 거래를 완료합니다

브라우저 지원

Dodo Payments Checkout SDK는 다음을 지원합니다:

Chrome (최신 버전)
Firefox (최신 버전)
Safari (최신 버전)
Edge (최신 버전)
IE11 이상

인라인 checkout과 Overlay Checkout 비교

사용 사례에 맞는 checkout 유형을 선택하세요:

기능	인라인	Overlay
통합 수준	페이지에 완전히 삽입됨	페이지 위에 표시되는 모달
레이아웃 제어	전체 제어	제한적
브랜딩	페이지와 일치	페이지와 분리됨
구현 작업량	많음	적음
적합한 경우	사용자 지정 checkout 페이지, 높은 전환율의 흐름	빠른 통합, 기존 페이지

checkout 경험을 최대한 제어하고 일관된 브랜딩을 유지하려면 인라인 checkout을 사용하세요. 기존 페이지를 최소한으로 변경하면서 빠르게 통합하려면 overlay checkout을 사용하세요.

Overlay Checkout

빠른 모달 기반 통합에는 overlay checkout을 사용하세요.

Checkout Sessions API

checkout 경험을 구현할 checkout session을 생성하세요.

Webhooks

webhook을 사용하여 서버 측에서 결제 이벤트를 처리하세요.

Integration Guide

Dodo Payments 통합에 대한 전체 가이드입니다.

더 많은 도움이 필요하면 Discord community를 방문하거나 개발자 지원팀에 문의하세요.

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

작동 방식

좋은 인라인 checkout의 조건

고객 여정

빠른 시작

단계별 통합

완전한 React 예시

API Reference

초기화

Checkout 열기

Checkout 닫기

상태 확인

이벤트

Checkout 내역 데이터

CDN 구현

결제 수단 업데이트

작동 방식

보류 중인 구독의 경우

오류 처리

모범 사례

결제 상태 검증

서버 측 검증이 필수적인 이유

권장 아키텍처

구현 단계

문제 해결

디지털 지갑

Apple Pay 빠른 설정

브라우저 지원

인라인 checkout과 Overlay Checkout 비교

관련 리소스

Overlay Checkout

Checkout Sessions API

Webhooks

Integration Guide

​작동 방식

​좋은 인라인 checkout의 조건

​고객 여정

​빠른 시작

​단계별 통합

​완전한 React 예시

​API Reference

​초기화

​Checkout 열기

​Checkout 닫기

​상태 확인

​이벤트

​Checkout 내역 데이터

​CDN 구현

​결제 수단 업데이트

​작동 방식

​보류 중인 구독의 경우

​오류 처리

​모범 사례

​결제 상태 검증

​서버 측 검증이 필수적인 이유

​권장 아키텍처

​구현 단계

​문제 해결

​디지털 지갑

​Apple Pay 빠른 설정

​브라우저 지원

​인라인 checkout과 Overlay Checkout 비교

​관련 리소스

Overlay Checkout

Checkout Sessions API

Webhooks

Integration Guide

작동 방식

좋은 인라인 checkout의 조건

고객 여정

빠른 시작

단계별 통합

완전한 React 예시

API Reference

초기화

Checkout 열기

Checkout 닫기

상태 확인

이벤트

Checkout 내역 데이터

CDN 구현

결제 수단 업데이트

작동 방식

보류 중인 구독의 경우

오류 처리

모범 사례

결제 상태 검증

서버 측 검증이 필수적인 이유

권장 아키텍처

구현 단계

문제 해결

디지털 지갑

Apple Pay 빠른 설정

브라우저 지원

인라인 checkout과 Overlay Checkout 비교

관련 리소스