Live Demo: atlas.dodopayments.com에서 플랫폼을 살펴보고 모든 결제 흐름을 테스트해 보세요.
개요
Atlas는 사용자가 텍스트 프롬프트로 이미지를 생성하는 실제 AI 아트 생성 플랫폼을 시뮬레이션합니다. 이 데모는 서로 다른 결제 모델과 checkout 경험을 보여주는 세 가지 구매 흐름을 선보입니다:- 사용량 기반 결제: 생성된 이미지당 결제(이미지당 $0.75)
- 구독: 무제한 Pro 플랜($20/월)
- 일회성 구매: 크레딧 팩(크레딧 10개당 $7)
구매 흐름
Atlas는 세 가지 별도 결제 흐름을 보여줍니다. 각 흐름은 유사한 패턴을 따르지만 서로 다른 checkout 경험과 결제 모델을 선보입니다.- Usage-Based Billing
- Subscription
- One-Time Purchase
1
Select pay-per-image pricing
AI 아트 생성을 위해 이미지당 결제 옵션(이미지당 $0.75)을 선택합니다. 이는 고객이 실제로 소비한 항목에 대해서만 결제하는 사용량 기반 결제를 보여줍니다.
2
Generate artwork
텍스트 프롬프트를 입력하고 이미지를 생성합니다. 시스템은 결제를 위해 사용량을 자동으로 추적합니다.
3
Complete checkout
checkout 프로세스에는 다음이 포함됩니다:
- 브랜딩된 checkout 페이지: Dodo Payments checkout 페이지에 판매자의 브랜드 이름과 로고가 표시됩니다
- 고객 정보: 사용자 세부 정보와 청구 주소를 입력합니다
- 세금 계산: 주소 확인 후 세금이 자동으로 계산됩니다
- 결제: 테스트 카드 정보를 입력하여 거래를 완료합니다
4
View confirmation
결제 후 Atlas는 사용량 세부 정보와 남은 크레딧이 표시된 확인 화면을 보여줍니다.
5
Access dashboard
사용자는 Atlas Studio 대시보드로 다시 리디렉션되며, 이곳에서 아트워크 생성을 계속하고 사용량 추적을 모니터링할 수 있습니다.
구매 후 대시보드 경험
Atlas Studio 대시보드는 checkout 완료 후 결제 인식 기능과 권한 추적을 구현하는 방법을 보여줍니다.대시보드 기능
- 즉시 액세스: 사용자는 구매 직후 아트워크 생성을 시작할 수 있습니다
- 사용량 추적: 남은 크레딧, 활성 구독 및 생성 기록을 실시간으로 표시합니다
- 결제 관리: 구매 기록, 구독 상태 및 예정된 갱신을 확인할 수 있습니다
- 원활한 통합: 적절한 권한 추적과 함께 사용자를 애플리케이션으로 다시 리디렉션하는 방법을 보여줍니다
대시보드 경험은 권한 확인과 사용량 모니터링을 비롯한 구매 후 사용자 흐름의 모범 사례를 보여줍니다.
기술 구현
Atlas는 Dodo Payments TypeScript SDK를 사용하여 구축되었으며, 단 몇 줄의 코드로 결제 흐름을 통합하는 방법을 보여줍니다.Integration Guide
Dodo Payments checkout 흐름을 애플리케이션에 통합하는 방법을 알아보세요.
TypeScript SDK
TypeScript SDK 문서와 API reference를 살펴보세요.
오픈 소스
Atlas는 오픈 소스 프로젝트입니다. 코드베이스를 살펴보고 실제 애플리케이션에서 결제 흐름이 구현되는 방식을 확인해 보세요.View on GitHub
Atlas 소스 코드를 살펴보고 구현 방식에서 배워 보세요.