capacitor를 위한 인앱 결제

이 플러그인은 이제 RevenueCat 공식 저장소로 이전되었습니다. 다음을 공식 문서 참고하세요.

RevenueCat 없이 더 간단한 네이티브 API를 원하신다면, @capgo/native-purchases StoreKit 및 Google Play Billing을 통해 인앱 결제와 구독을 직접 구현합니다.

Capacitor Purchases는 Capacitor 프레임워크용 플러그인으로, iOS와 Android에서 인앱 결제를 지원합니다. 여러 플랫폼에서 단순하고 일관된 API를 제공하여, 개발자가 모바일 앱에 인앱 구독 및 결제를 쉽게 구현할 수 있도록 돕습니다.

Capacitor Purchases 플러그인의 핵심 기능 중 하나는 인앱 구독 및 결제 도구를 제공하는 플랫폼인 RevenueCat과의 통합입니다. RevenueCat은 여러 플랫폼에 걸쳐 단순하고 일관된 API를 제공하고 영수증 검증 및 사용자 관리와 같은 작업을 자동화하여 인앱 구독 및 결제 구현 프로세스를 간소화합니다.

RevenueCat을 사용하면 개발자는 구독 관리, 매출 추적 및 기타 관련 작업을 쉽게 수행할 수 있습니다. RevenueCat에서 제공하는 주요 기능은 다음과 같습니다:

• 자동 영수증 검증
• 사용자 관리
• 커스텀 가격 모델 지원
• 상세 분석 - 확장성

RevenueCat과 함께 Capacitor Purchases 플러그인을 사용하면, 개발자는 모바일 앱의 인앱 구독 및 결제 구현에 드는 시간과 노력을 절약할 수 있으며, 사용자 경험을 개선하고 매출을 높이는 데 도움이 되는 추가 기능을 제공할 수 있습니다.

Capacitor Purchases 플러그인과 RevenueCat을 사용하면 개발자는 인앱 구독 및 구매를 쉽게 관리하고 추적하며, 영수증 검증과 여러 플랫폼에 걸친 사용자 관리를 수행할 수 있습니다. 또한 커스텀 가격 모델을 생성하고 상세한 분석 데이터를 확보하여 성능과 수익을 개선할 수 있습니다.

설치

반드시 최신 버전의 Capacitor 및 Capacitor Purchases 플러그인을 사용하세요. Capacitor 및 Capacitor Purchases 플러그인의 최신 버전은 Capacitor 웹사이트에서 확인할 수 있습니다.

Capacitor Purchases 플러그인을 설치하려면 다음 명령어를 실행하세요: npm i @capgo/capacitor-purchases 앱의 네이티브 code에 플러그인 추가 npx cap sync

Xcode에서 인앱 결제 기능 추가:

그다음

1. RevenueCat 계정 생성

이 가이드는 단 몇 줄의 code만으로 구독 기능과 RevenueCat의 SDK를 설정하고 바로 시작하는 방법을 안내합니다.

새로운 RevenueCat 계정 가입 여기서.

📘

💡 꿀팁!

RevenueCat는 앱을 판매할 계획이 있다면 각 앱/프로젝트마다 별도의 RevenueCat 계정을 생성하는 것을 권장합니다. 이렇게 하면 개별 프로젝트를 이전하기 위해 RevenueCat Support를 기다릴 필요 없이 계정 전체를 이전할 수 있어 프로세스가 훨씬 빨라집니다.

조직 / 엔터프라이즈

RevenueCat 등록 및 프로젝트 내 앱 설정 시 회사 계정을 사용하는 것을 권장합니다. 팀원들을 다음과 같이 협업자(collaborators)로 프로젝트에 초대할 수 있지만, 결제 관리 권한은프로젝트 소유자에게만 있습니다. 프로젝트 협업자는 결제 세부 정보를 관리할 수 없습니다.

2. 프로젝트 및 앱 설정

▶️ 프로젝트 생성하기

RevenueCat dashboard로 이동하여 새 프로젝트 추가 상단 네비게이션 메뉴의 다음 드롭다운에서 Projects.

새 프로젝트 생성을 위한 팝업 모달

▶️ 앱 / 플랫폼 추가

출처: Project Settings > Apps 프로젝트 대시보드 왼쪽 메뉴에서 추가할 앱의 플랫폼을 선택하세요.

앱 플랫폼 선택을 위한 프로젝트 대시보드

필드 앱 이름 RevenueCat에 앱을 추가하려면 필수입니다. 나머지 설정 필드는 나중에 추가할 수 있습니다. 테스트 및 프로덕션 결제를 진행하려면 Bundle ID (iOS) / Package Name (Android)와 Shared Secret (iOS) / Service Credentials (Android)를 반드시 설정해야 합니다.

Apple App Store 앱 설정 페이지

📘

💡 꿀팁!

앱 등록 후, RevenueCat은 다음 설정을 권장합니다: 플랫폼 서버 알림. 이 알림은 필수 사항은 아니지만, 다음 작업의 속도를 높여줍니다: webhooks 및 통합 처리 시간을 단축하고 구독자 업데이트 지연 시간을 줄여줍니다.

📘

Staging vs. Production 앱 및 사용자

RevenueCat 자체에는 staging과 production을 위한 별도의 환경이 없습니다. 대신, 사용자별 트랜잭션은 sandbox와 production으로 구분됩니다.

RevenueCat 앱은 스토어의 sandbox 및 production 구매를 모두 처리할 수 있습니다. 만약 staging과 production용 앱을 별도로 운영 중이라면, RevenueCat에서 여러 프로젝트를 생성하여 현재 환경을 그대로 미러링할 수 있습니다.

또한, 사용자는 환경별로 구분되지 않습니다. 동일한 사용자가 sandbox 구매와 production 구매를 동시에 활성화된 상태로 유지할 수 있습니다.

▶️ 서비스 자격 증명

RevenueCat이 사용자를 대신해 앱 스토어와 통신하려면 서비스 자격 증명 설정이 필요합니다. RevenueCat 가이드를 참조하세요. App Store Connect 공유 비밀키(Shared Secret), Play 서비스 자격 증명, 그리고 Amazon Appstore 공유 비밀키(Shared Secret) 참고하세요.

참고: Play 서비스 자격 증명이 Google 서버 전체에 적용되기까지 최대 36시간이 소요될 수 있습니다.

3. 제품 구성

▶️ 스토어 설정

RevenueCat을 사용하여 제품을 가져오기 전에, 먼저 각 스토어에서 제품을 구성해야 합니다. 다음 가이드를 참고하세요: App Store Connect, Google Play Console, Amazon Appstore, 그리고 Stripe 이 과정을 진행하는 데 도움이 됩니다.

iOS 제품을 판매하는 경우, 'Paid Applications Agreement'에 서명하고 다음 경로에서 은행 및 세금 정보를 입력해야 합니다: App Store Connect > Agreements, Tax, and Banking. 구매 테스트를 진행하기 전에 이 작업을 반드시 완료해야 합니다..

📘

테스트 중에 스토어 설정을 건너뛰고 싶으신가요?

iOS에서는 StoreKit Configuration 파일을 사용하여 App Store Connect 제품 구성을 나중에 할 수 있습니다. 이 설정 파일은 구성이 매우 간단하며 Xcode에서 직접 설정할 수 있습니다.

RevenueCat에서 StoreKit Configuration 파일을 설정하는 방법에 대해 더 자세히 알아보려면 Sandbox 테스트 가이드를 확인하세요.

▶️ RevenueCat에서 제품 및 Entitlements 설정하기

인앱 제품 설정을 App Store Connect, Google Play Console, Amazon Appstore, 또는 Stripe에서 완료했다면, 해당 설정을 RevenueCat dashboard로 복사해야 합니다. RevenueCat은 프리미엄 기능에 대한 접근 권한을 제어하는 Entitlements 시스템과, 고객에게 제공할 제품 세트를 관리하는 Offerings를 사용합니다.

Entitlements는 고객이 특정 제품을 구매한 후 얻게 되는 접근 권한 수준을 의미합니다. Offerings는 페이월(paywall)에서 제공할 인앱 제품을 정리하고 원격으로 구성할 수 있는 간편한 방법입니다. RevenueCat 권장합니다 이러한 기능을 활용하면 code 과정을 간소화하고, 앱 업데이트 없이도 제품을 변경할 수 있습니다.

참고 제품 구성 제품을 설정한 다음 Offerings 또는 Entitlements로 분류합니다.

4. RevenueCat Purchases SDK 사용하기

RevenueCat SDK는 토큰을 RevenueCat 서버와 동기화하면서 플랫폼 간 결제 및 구독을 원활하게 구현합니다.

SDK 관련 문제가 발생하면 다음을 확인하세요. SDK 문제 해결 가이드를 참조하세요.

📘

Purchases 구성에는 공개 SDK 키만 사용하세요.

공개 SDK 키는 다음에서 확인할 수 있습니다: API 키 탭의 프로젝트 설정 대시보드 내에서.

공유 인스턴스는 보통 앱 실행 시 구매 보통 앱 실행 시 한 번 호출됩니다. 이후에는 해당 인스턴스를 통해 앱 전체에서 공유하여 사용할 수 있습니다. .shared SDK의 인스턴스.

자세한 정보와 권장 사항은 RevenueCat의 SDK 설정 가이드를 참조하세요.

반드시 다음 설정을 확인하세요: 구매 공개 SDK 키만 사용해야 합니다. RevenueCat에서 제공하는 다양한 API 키에 대한 자세한 내용은 인증 가이드.

import { CapacitorPurchases } from '@capgo/capacitor-purchases'
import { isPlatform } from '@ionic/vue' // use the right one for your framework

CapacitorPurchases.setDebugLogsEnabled({ enabled: import.meta.env.DEV }) // Enable to get debug logs in dev mode
if (isPlatform('ios')) {
    CapacitorPurchases.setup({ apiKey:'appl_******'})
} else if (isPlatform('android')) {
    CapacitorPurchases.setup({ apiKey:'goog_******'})
}

개발 단계에서는 RevenueCat에서 더 상세한 디버그 로그를 활성화하는 것을 권장합니다. 로그에 대한 자세한 정보는 다음 디버깅 가이드를 참조하세요.

기존의 code 결제 시스템과 RevenueCat을 함께 사용하려는 경우, 다음 가이드를 참고하세요: Observer Mode.

📘

User ID를 이용한 결제 설정

앱에 사용자 인증 시스템이 있는 경우, 설정 시점 또는 이후에 다음 메서드를 호출하여 사용자 식별자를 제공할 수 있습니다: .logIn(). 자세한 내용은 RevenueCat의 다음 가이드를 확인하세요: 사용자 식별.

SDK가 자동으로 설정된 Offerings를 가져와 Apple, Google 또는 Amazon에서 제품 정보를 불러옵니다. 따라서 고객이 결제 화면을 열 때 이미 사용 가능한 제품이 로드되어 있습니다.

다음은 Offerings를 가져오는 예시입니다. Offerings를 활용해 페이월(paywall) 화면을 구성할 수 있습니다. 자세한 정보와 권장 사항은 RevenueCat의 제품 표시하기 가이드를 참조하세요.

▶️ 사용 가능한 제품 가져오기 및 표시하기

📘

사용자 ID로 결제 설정하기

앱에 사용자 인증 시스템이 있다면, 설정 시점이나 이후에 다음 메서드를 호출하여 사용자 식별자를 제공할 수 있습니다. .logIn(). 더 자세한 내용은 RevenueCat의 다음 가이드를 확인하세요. 사용자 식별.

SDK가 자동으로 다음 항목을 가져옵니다: 설정된 Offerings를 가져와 Apple, Google 또는 Amazon에서 제품 정보를 조회합니다. 따라서 고객이 결제 화면을 열 때 사용 가능한 제품이 이미 로드되어 있습니다.

다음은 Offerings를 가져오는 예시입니다. Offerings를 활용해 페이월(paywall) 화면을 구성할 수 있습니다. 자세한 정보와 권장 사항은 RevenueCat의 상품 목록 표시 가이드를 참조하세요.

const { offerings } = await CapacitorPurchases.getOfferings()
if (offerings.current !== null) {  
    // Display current offering with offerings.current
}

만약 Offerings, 제품이나 사용 가능한 packages 가 비어 있다면, 해당 스토어의 설정 문제일 가능성이 높습니다.

App Store Connect에서 가장 흔한 원인은 '유료 앱 계약'이 최신 상태가 아니거나, 제품이 최소 '제출 준비 완료' 상태가 아닌 경우입니다. Google Play에서는 보통 앱이 비공개 트랙에 게시되지 않았고 유효한 테스트 사용자가 추가되지 않았을 때 발생합니다.

이 문제 해결에 대한 자세한 내용은 RevenueCat 고객 센터.

▶️ 구매하기

SDK에는 구매를 쉽게 진행할 수 있는 간단한 메서드가 포함되어 있습니다. 이 purchase:package 메서드는 가져온 Offering에서 패키지를 받아 해당 앱 스토어에서 트랜잭션을 처리합니다.

아래 code 샘플은 패키지를 구매하고 “your_entitlement_id” 콘텐츠의 잠금이 해제되는지 확인하는 과정을 보여줍니다. 메서드에 대한 더 자세한 purchase:package 내용은 RevenueCat의 다음 가이드에서 확인할 수 있습니다: 구매하기.

const purchase = async (p: Package): Promise<PurchaserInfo | null> => {
  try {
    // console.log('purchase', p)
    const data = await CapacitorPurchases.purchasePackage({
      identifier: p.identifier,
      offeringIdentifier: p.offeringIdentifier,
    })
    const purchaserInfo = data.purchaserInfo
    // console.log('listenBuy', purchaserInfo)
    if (purchaserInfo.activeSubscriptions.includes(p.identifier)) {
      // set the user as paid
    }
    return purchaserInfo
  }
  catch (e) {
    console.error('listenBuy error', e)
  }
  return null
}

▶️ 구독 상태 확인

최신 상태를 가져와야 할 때마다 이 메서드를 사용할 수 있으며, 앱 라이프사이클 전반에 걸쳐 반복 호출해도 안전합니다. 구매 최신 데이터를 자동으로 캐싱합니다. CustomerInfo 업데이트될 때마다 캐싱되므로, 대부분의 경우 캐시에서 데이터를 가져와 매우 빠르게 실행됩니다.

사용자에게 어떤 UI를 보여줄지 결정하거나, 특정 권한 수준이 필요한 동작을 수행할 때 이 메서드를 호출하는 것이 일반적입니다.

📘

💡 꿀팁!

구독이 활성화되었는지 여부 외에도 훨씬 더 많은 정보를 확인할 수 있습니다. RevenueCat의 다음 가이드를 참고하세요. 구독 상태 구독 갱신 설정 여부, 사용자 결제 카드 문제 감지 등 상세 내용을 확인할 수 있습니다.

RevenueCat을 사용하면 사용자가 인앱 결제 내역을 복구할 수 있으며, 이전에 구매했던 콘텐츠를 다시 활성화할 수 있습니다. 동일한 스토어 계정 (Apple, Google 또는 Amazon 계정). 모든 앱에 사용자가 복구 메서드를 실행할 수 있는 수단을 마련해 두는 것을 권장합니다. Apple은 사용자가 구매 내역에 접근할 수 없는 경우(예: 앱 삭제 후 재설치, 계정 정보 분실 등)를 대비해 반드시 복구 메커니즘을 갖추도록 요구하고 있습니다.

  const res = await CapacitorPurchases.restoreTransactions()
  const purchaserInfo = res.purchaserInfo
  const ids: string[] = [] // extract active subscriptions ids
  purchaserInfo.activeSubscriptions.forEach((id) => {
    ids.push(id)
  })

만약 서로 다른 앱 사용자 ID 동일한 기반 스토어 계정(Apple, Google 또는 Amazon 계정)에서 트랜잭션을 복원합니다. RevenueCat은 두 App User ID 간에 alias를 생성하고 이후 동일한 사용자로 집계하려고 시도할 수 있습니다. 자세한 내용은 RevenueCat 가이드에서 확인하세요: 구매 복원 설정 가능한 다양한 복원 동작에 대해 자세히 알아보세요.

SDK는 모든 플랫폼에서 원활하게 작동하므로, 사용자의 구매 정보 변경은 다양한 소스에서 발생할 수 있습니다. 고객의 모든 변경 사항에 대응하려면 CustomerInfo 선택적 delegate 메서드를 구현하면 됩니다. purchases:receivedUpdated:.

이 메서드는 SDK가 업데이트된 CustomerInfo 객체를 메서드 호출에서 받을 때마다 호출됩니다. getCustomerInfo(), purchase(package:), purchase(product:), 또는 restorePurchases().

CustomerInfo 업데이트는 이 오버라이드는 RevenueCat 백엔드에서 앱으로 푸시됩니다. 위에서 언급했듯이, 업데이트는 RevenueCat으로 보내는 아웃바운드 네트워크 요청을 통해서만 발생할 수 있습니다.

앱에 따라 delegate를 무시하고, 앱이 다음에 실행될 때나 SDK 메서드의 completion block에서 고객 정보 변경을 처리하는 것만으로도 충분할 수 있습니다.

CapacitorPurchases.addListener('purchasesUpdate', (data) => {
  console.log('purchasesUpdate', data)
})

👍

해내셨군요!

서버 code 코드를 작성하느라 한 달을 허비하지 않고도 완벽한 구독 결제 시스템을 구현하셨습니다. 축하드립니다!

샘플 앱

SDK 통합에 관한 더 자세한 예제가 필요하다면 RevenueCat 샘플 앱 리소스를 확인해 보세요.

샘플 보기

Capacitor와 Vue.js를 사용한 샘플 앱도 곧 공개할 예정입니다.

Capacitor를 더 깊이 있게 활용하려면 SDK 문서를 확인하세요. 여기서.

다음 단계

\

• 아직 설정 전이라면, RevenueCat의 entitlements 가이드를 통해 제품이 올바르게 구성되었는지 확인해 보세요..
• 자체 사용자 식별자를 사용하려면 다음 내용을 읽어보세요. 앱 사용자 ID 설정하기 .
• 다른 시스템에서 RevenueCat으로 전환하는 경우, 다음 RevenueCat 가이드를 참조하세요: 기존 구독 정보 마이그레이션.
• 연동 테스트 준비가 완료되면, 다음 RevenueCat 가이드를 따라 진행할 수 있습니다: 테스트 및 디버깅.
• App Store 소규모 비즈니스 프로그램 대상자라면, 다음 RevenueCat 가이드를 확인해 보세요: 신청 방법 및 RevenueCat 알림 방법

앱에 Live update 기능이 필요한 경우

여기서 함께 시작하세요 👇

계정 생성을 위해 여기에서 등록하세요

Capgo

capacitor를 위한 인앱 결제 다음 단계

사용 중인 경우 capacitor를 위한 인앱 결제 결제 및 구매 계획을 세우려면 다음을 연결하세요: Capgo 가격 정책 Capgo 가격 정책의 제품 워크플로우 결제 시스템 결제 시스템의 구현 상세 정보 @capgo/native-purchases @capgo/native-purchases의 구현 상세 정보 시작하기 시작하기의 구현 상세 정보 및 수익화 플레이북 구현 세부 사항은 Revenue Playbook을 참고하세요.