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에서 인앱 결제 기능 추가:

Xcode 1단계 그다음 Xcode 2단계

1. RevenueCat 계정 생성

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

새로운 RevenueCat 계정 가입 여기.

📘

💡 꿀팁!

RevenueCat에서는 각 앱/프로젝트에 대해 별도의 RevenueCat 계정을 생성하는 것을 권장합니다. 특히 앱을 판매할 계획이 있다면 더욱 그렇습니다. 개별 프로젝트 이관을 기다릴 필요 없이 전체 계정을 이관할 수 있어 이관 과정이 빨라집니다.

조직 / 엔터프라이즈

RevenueCat 가입 시 회사 계정을 사용하고, 앱은 프로젝트 내에서 설정하는 것을 권장합니다. 팀의 나머지 구성원을 협업자 로 초대할 수 있지만 프로젝트 오너만 결제 관리를 할 수 있습니다. 프로젝트 협업자는 결제 세부 정보를 관리할 수 없습니다.

2. 프로젝트 및 앱 설정

▶️ 프로젝트 생성

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

RevenueCat 1단계

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

▶️ App / Platform 추가

다음 경로에서 프로젝트 설정 > 앱 프로젝트 dashboard의 왼쪽 메뉴에서 추가할 앱의 플랫폼을 선택하세요.

RevenueCat 2단계

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

필드 앱 이름 는 RevenueCat에 앱을 추가하는 데 필요합니다. 나머지 설정 필드는 나중에 추가할 수 있습니다. 테스트 및 프로덕션 구매를 위해 Bundle ID(iOS) / Package Name(Android)과 Shared Secret(iOS) / Service Credentials(Android)을 설정해야 합니다.

RevenueCat 3단계

Apple App Store 앱의 앱 설정 페이지

📘

💡 꿀팁!

앱을 등록한 후, RevenueCat은 다음을 설정하는 것을 권장합니다. 플랫폼 서버 알림. 이 알림은 필수 사항은 아니지만 webhook 통합 배포 시간을 단축하고 구독자 업데이트 지연을 줄입니다.

📘

스테이징 vs. 프로덕션 앱 및 사용자

RevenueCat 자체에는 스테이징과 프로덕션을 위한 별도 환경이 없습니다. 대신 사용자의 기본 트랜잭션이 샌드박스와 프로덕션으로 구분됩니다.

모든 RevenueCat 앱은 스토어에서 샌드박스 및 프로덕션 구매를 모두 수행할 수 있습니다. 스테이징과 프로덕션을 위한 별도 앱이 있는 경우, RevenueCat에서 여러 프로젝트를 만들어 해당 구성을 반영할 수 있습니다.

또한 사용자도 환경별로 분리되지 않습니다. 동일한 사용자가 동시에 활성 샌드박스 구매와 활성 프로덕션 구매를 가질 수 있습니다.

▶️ 서비스 자격 증명

RevenueCat이 사용자를 대신해 앱 스토어와 통신하려면 서비스 자격 증명을 설정해야 합니다. RevenueCat 가이드를 참고하세요. App Store Connect 공유 시크릿, Play 서비스 자격 증명, 그리고 Amazon Appstore 공유 시크릿 자세한 내용은 여기를 참고하세요.

Google 서버 전체에 Play 서비스 자격 증명이 전파되는 데 최대 36시간이 걸릴 수 있습니다.

3. 제품 구성

▶️ 스토어 설정

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

iOS 제품을 판매하는 경우, '유료 애플리케이션 계약'에 서명하고 App Store Connect > Agreements, Tax, and Banking에서 은행 및 세금 정보를 입력하세요.. 구매 테스트를 시작하려면 이 단계를 먼저 완료해야 합니다.

📘

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

iOS에서는 StoreKit Configuration 파일을 사용해 App Store Connect에서 제품 구성을 지연시킬 수 있습니다. 이 설정 파일은 최소한의 설정만 필요하며 Xcode에서 직접 구성할 수 있습니다.

RevenueCat에서 StoreKit Configuration 파일 설정에 대해 자세히 보기 샌드박스 테스트 가이드를 참조하세요.

▶️ RevenueCat에서 제품 및 권한 구성하기

인앱 제품이 다음에 구성되면 App Store Connect, Google Play Console, Amazon Appstore, 또는 Stripe, 해당 구성을 RevenueCat 대시보드에 복사해야 합니다. RevenueCat은 Entitlements 시스템으로 프리미엄 기능 접근을 제어하고, Offerings로 고객에게 제공할 제품 세트를 관리합니다.

Entitlements는 고객이 특정 제품을 구매한 후 '권리'를 갖게 되는 접근 수준입니다. Offerings는 paywall에서 '제공'하려는 인앱 제품을 정리하고 원격으로 구성하는 간단한 방법입니다. RevenueCat 은/는 이러한 기능을 활용하여 code를 단순화하고 앱 업데이트 없이 제품을 변경할 수 있도록 권장합니다.

자세한 내용은 제품 구성 제품을 설정한 다음 Offerings 또는 Entitlements로 정리하세요.

RevenueCat 4단계

4. RevenueCat의 Purchases SDK 사용

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

SDK에서 문제가 발생하면 다음을 참조하세요 SDK 문제 해결 에 대한 안내를 참고하세요.

📘

Purchases 설정에는 공개 SDK 키만 사용하세요

공개 SDK 키는 다음에서 가져올 수 있습니다. API 키 의 프로젝트 설정 탭에서.

의 공유 인스턴스는 구매 를 한 번만 설정해야 하며, 보통 앱 시작 시점에 수행합니다. 이후에는 .shared SDK의 인스턴스

RevenueCat 가이드 보기: SDK 설정 가이드를 참조하세요.

설정 시 반드시 구매 공개 SDK 키만 사용하세요. 사용 가능한 다양한 API 키에 대한 자세한 내용은 RevenueCat 인증 가이드에서 확인할 수 있습니다..

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를 활용해 페이월 화면을 구성할 수 있습니다. 자세한 정보와 권장 사항은 RevenueCat 제품 표시 가이드를 참조하세요.

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

📘

User ID를 사용한 구매 설정

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

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

만약 가져오는 Offerings, products, 또는 사용 가능한 패키지 가 비어 있다면, 해당 스토어의 설정 문제 때문입니다.

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)
  })

서로 다른 두 개의 App User 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에서 제품이 올바르게 구성되었는지 확인하세요 엔티틀먼트 가이드.
자체 사용자 식별자를 사용하려면 앱 사용자 ID 설정 .
다른 시스템에서 RevenueCat으로 이전하는 경우, RevenueCat의 기존 구독 이전 가이드.
통합 테스트를 준비했다면, RevenueCat의 테스트와 디버깅.
App Store Small Business Program 자격이 있다면, RevenueCat의 신청 및 RevenueCat 통보 방법 가이드

앱에 Live update이 필요한 경우

여기서 참여하세요 👇

계정을 만들려면 여기에서 등록하세요

Capgo

capacitor의 인앱 구매로 계속 진행하세요

사용 중이라면 capacitor용 인앱 결제 결제와 구매를 계획하려면 다음을 연결하세요 Capgo 가격 Capgo 가격 페이지의 제품 워크플로우, 결제 시스템 결제 시스템의 구현 상세 내용, @capgo/native-purchases @capgo/native-purchases의 구현 세부 사항은 시작하기 구현 세부 사항은 Getting Started에서 확인하고, 수익화 플레이북 구현 세부 사항은 Revenue Playbook을 참고하세요.