Atlas Demo Product

Atlas는 Dodo Payments의 실제 작동하는 데모 애플리케이션입니다. 모든 구매 플로우가 테스트 모드의 Dodo Payments checkout에서 실행되는 AI 아트 생성 플랫폼입니다. 플랜 선택부터 구매 후 대시보드까지 크레딧 기반 결제, 구독, 일회성 결제를 보여줍니다.

​

개요

Atlas는 사용자가 텍스트 프롬프트로 이미지를 생성하는 AI 아트 생성 플랫폼을 시뮬레이션합니다. Pricing 페이지에서는 각각 다른 결제 모델을 사용하는 네 가지 플랜을 제공합니다.

• Starter Credits (선불 크레딧): 만료되지 않는 크레딧 10개에 $10.
• Credit Pack (크레딧 기반 구독): 월 크레딧 25개에 월 $10, 크레딧 50% 이월 및 잔액 부족 알림 제공.
• Unlimited Pro (구독): 무제한 이미지 생성에 월 $20.
• Special Downloads (일회성 구매): 아트워크 12개가 포함된 팩에 $12.

연간 결제를 선택하면 Credit Pack은 월 $8, Unlimited Pro는 월 $16으로 저렴해집니다. Pricing 페이지의 Checkout Mode 선택기를 사용하면 redirect, overlay 또는 페이지 inline 방식으로 checkout을 열 수 있습니다. 구매 후 로그인한 사용자는 Atlas Studio dashboard로 이동하여 아트워크를 생성하고 크레딧 또는 플랜 상태를 확인할 수 있습니다.

​

구매 플로우

세 가지 플로우는 동일한 패턴을 따릅니다. 각 플로우는 서로 다른 결제 모델과 product type을 사용합니다.

​

구매 후 Dashboard 경험

Atlas Studio dashboard는 checkout 이후 결제를 인식하는 기능을 구축하는 방법을 보여줍니다. 즉, 고객이 구매한 항목을 확인하고 해당하는 access를 해제합니다.

​

Dashboard 기능

• Immediate access: 사용자는 구매 직후 아트워크 생성을 시작합니다.
• Usage tracking: dashboard에는 credit plan에서 남은 크레딧 또는 Unlimited Pro의 무제한 상태가 사용자가 생성한 이미지 옆에 표시됩니다.
• Plan status: dashboard에는 활성 플랜의 이름이 표시됩니다. 예를 들어 Unlimited Pro (Subscription) 또는 **Credit Pack (Credit-Based)**와 같이 표시됩니다.
• Return to your app: checkout 이후 고객을 애플리케이션으로 돌려보내고 결제한 access를 부여하는 방법을 플로우에서 보여줍니다.

​

기술 구현

Atlas는 Next.js 애플리케이션입니다. route handler는 Dodo Payments API를 직접 호출합니다. 예를 들어 POST /checkouts는 checkout session을 생성하고, dodopayments-checkout package는 페이지에서 checkout을 overlay 또는 inline 방식으로 엽니다. typed client를 사용하여 동일한 플로우를 구축하려면 Dodo Payments TypeScript SDK를 사용하세요.

​

오픈 소스

Atlas는 오픈 소스입니다. 실제 애플리케이션에서 각 결제 플로우가 어떻게 구현되는지 확인하려면 코드를 읽어보세요.