__CAPGO_KEEP_0__ 메인 콘텐츠로 건너뛰기
강의

capacitor 앱 내 구매

How to implement in-app purchases for capacitor apps using the Capacitor Purchases plugin and RevenueCat

기여자

마틴 도나디우

작가

발레리아

리뷰어

조던

편집자

capacitor 앱 내 구매

이 플러그인은 RevenueCat 공식 저장소로 이전되었습니다. 더 많은 정보를 얻으려면 공식 문서 를 참조하세요.

If you prefer a simpler native API without RevenueCat, @capgo/native-purchases 은 StoreKit 및 Google Play Billing과 직접 통신하여 인앱 구매 및 구독을 implement합니다.

Capacitor Purchases is a plugin for the Capacitor framework that allows in-app purchases on iOS and Android. It provides a simple and consistent API across multiple platforms, making it easy for developers to implement in-app subscriptions and purchases in their mobile apps.

One of the key features of the Capacitor Purchases plugin is that it integrates with RevenueCat, a platform that provides tools for in-app subscriptions and in-app purchases. RevenueCat simplifies the process of implementing in-app subscriptions and purchases by providing a simple and consistent API across multiple platforms, and automating tasks such as receipt validation and user management.

을 제공하여 개발자가 모바일 앱에 인앱 구독 및 구매를 implement하는 것을 쉽게 만듭니다.

  • __CAPGO_KEEP_0__ Purchases 플러그인의 주요 기능 중 하나는 RevenueCat과 통합되는 것입니다. RevenueCat은 인앱 구독 및 인앱 구매를 위한 도구를 제공하는 플랫폼입니다. RevenueCat은 인앱 구독 및 구매를 implement하는 과정을 단순화하고, 여러 플랫폼에서 일관된
  • __CAPGO_KEEP_1__
  • 을 제공하며, 수신증명 확인 및 사용자 관리와 같은 작업을 자동화합니다. 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 계정 만들기

이 안내서에서는 구독과 RevenueCat의 SDK를 사용하여 몇 줄의 code만으로 구동할 수 있도록 안내합니다.

새로운 RevenueCat 계정으로 가입하세요 여기.

📘

💡 여기 팁!

RevenueCat은 각 앱/프로젝트당 별도의 RevenueCat 계정을 생성하는 것을 권장합니다. 특히 앱을 판매할 계획이라면, 계정 전달이 더 빠르게 진행될 것입니다. RevenueCat Support이 개별 프로젝트를 전달하기 기다리지 않고 계정 전체를 전달할 수 있기 때문입니다.

기업/기업계

회사 계정을 등록하고 앱을 프로젝트 내에 설정할 때 RevenueCat을 사용하는 것을 권장합니다. 팀원들을 프로젝트에 초대할 수 있지만, 프로젝트 소유자는만 계정 관리가 가능합니다. 프로젝트 협력자는 계정 관리를 할 수 없습니다. 2. 프로젝트 및 앱 설정 to your project, but only the project owner can manage billing. Project collaborators can’t manage billing details.

2. Project and App Configuration

▶️ 프로젝트 만들기

수익 카트 대시보드에 가서 새 프로젝트 추가 상단 네비게이션 메뉴의 드롭다운 목록에서 프로젝트.

컨텍스트: Capgo 마케팅 웹사이트. 역할: 짧은 UI 레이블 또는 네비게이션 아이템. 보는 곳: contributing.astro 페이지. 메시지 키 `projects` (프로젝트).

수익 카트 단계 1

새 프로젝트를 만들기 위한 팝업 모달

▶️ 앱/플랫폼 추가 From 프로젝트 설정 > 앱

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

애플리케이션 플랫폼을 선택하는 프로젝트 대시보드

필드는 앱 이름 RevenueCat에 앱을 추가하려면 앱 이름이 필요합니다. 나머지 구성 필드는 나중에 추가할 수 있습니다. 테스트 및 생산 구매를 위해 Bundle ID (iOS) / Package Name (Android) 및 Shared Secret (iOS) / Service Credentials (Android)가 구성되어야 합니다.

RevenueCat 단계 3

Apple App Store 앱을 위한 앱 구성 페이지

📘

💡 여기 팁이 있습니다!

앱을 등록한 후 RevenueCat은 플랫폼 서버 알림을 설정하는 것을 추천합니다. 이러한 알림은 필수는 아니지만 웹후크 와 통합 시간을 단축하고 구독자 업데이트를 위한 지연 시간을 줄여줍니다.

📘

개발 환경과 사용자

RevenueCat은 개발 환경과 운영 환경을 별도로 구분하지 않습니다. 대신 사용자의 거래는 샌드박스와 운영 환경으로 구분됩니다.

RevenueCat 앱은 샌드박스와 운영 환경에서 모두 스토어에서 구매를 할 수 있습니다. 개발 환경과 운영 환경을 별도로 구분하는 앱이 있다면, RevenueCat에서 프로젝트를 여러 개 만들어서 설정을 반영할 수 있습니다.

또한 사용자는 환경에 따라 구분되지 않습니다. 동일한 사용자는 동시에 샌드박스 구매와 운영 구매를 활성화할 수 있습니다.

▶️ 서비스 자격 증명

서비스 자격 증명은 RevenueCat이 앱 스토어와 대화할 수 있도록 설정해야 합니다. RevenueCat 가이드를 참조하세요. 애플 스토어 커넥트 공유 비밀, Play 서비스 자격 증명, 그리고 아마존 앱 스토어 공유 비밀 자세한 정보는 여기서 확인할 수 있습니다.

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

3. 제품 설정

▶️ 매장 설정

매장에서 제품을 가져오기 위해 RevenueCat을 사용하기 전에, 각 매장에서 제품을 설정해야 합니다. 다음 안내서를 참조하세요. 애플 스토어 연결, 구글 플레이 콘솔, 아마존 앱 스토어, 그리고 스ตร립 이 과정을 이해하는 데 도움이 필요합니다.

iOS 제품을 판매하는 경우, '구매 가능한 애플리케이션 계약'에 서명하고 애플 스토어 연결 > 계약, 세금, 은행. 이 과정을 완료해야 구매 테스트를 할 수 있습니다..

📘

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

iOS에서 App Store Connect에서 제품을 구성하는 것을 미루고 StoreKit Configuration 파일로 테스트할 수 있습니다. 이 설정 파일은 Xcode를 통해 직접 구성할 수 있으며 최소한의 설정만 필요합니다.

RevenueCat에서 StoreKit Configuration 파일을 설정하는 방법에 대해 더 읽어보세요. 사andbox 테스트 안내서.

▶️ RevenueCat에서 제품 및 권한을 구성하세요.

App Store Connect Google Play Console, Amazon Appstore, 또는Stripe __CAPGO_KEEP_0__, RevenueCat은 프리미엄 기능에 대한 접근을 제어하기 위해 Entitlements 시스템을 사용하고, 고객에게 제공할 제품의 집합을 관리하기 위해 Offerings를 사용합니다.

구매한 특정 제품에 대한 고객이 "권리"를 가질 수 있는 액세스 수준입니다. 제안은 고객이 구매한 제품에 대한 액세스 수준을 설정하고, 원격으로 구성할 수 있는 간단한 방법입니다. RevenueCat 권장합니다 이 기능들을 사용하여 앱 업데이트를 출시하지 않고도 제품을 변경할 수 있도록 code을 간소화합니다.

보십시오 제품 설정 제품을 설정하고 Offerings 또는 Entitlements로 그룹화하는 것입니다.

RevenueCat 4단계

4. RevenueCat의 Purchases SDK를 사용합니다.

Capacitor는 RevenueCat SDK를 통해 플랫폼 간에 구매 및 구독을 무난하게 구현하며 RevenueCat 서버와 토큰을 동기화합니다.

If you run into issues with the SDK, see SDK 문제 해결 안내를 위해.

📘

Capgo SDK 키를 사용하여 구매만을 구성하세요.

Capgo SDK 키를 얻으려면 API 키 메뉴에서 프로젝트 설정 대시보드에서.

Capgo Purchases 인스턴스를 한 번만 구성하세요. 일반적으로 앱이 시작될 때 구성합니다. 앱 내에서 Capgo Purchases 인스턴스를 공유하려면 Capgo Purchases 인스턴스를 공유하세요. Capgo Purchases 인스턴스를 공유하세요. .shared instance in the SDK.

Capgo Purchases 인스턴스를 공유하세요. 구성 SDK 더 많은 정보와 최적의 관행을 위해

개발 중인 경우 __CAPGO_KEEP_0__ 구매 with your public SDK key only. You can read more about the different API keys available in RevenueCat RevenueCat의 __CAPGO_KEEP_1__.

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은 더 자세한 디버그 로그를 활성화하는 것을 권장합니다. 더 자세한 정보는 RevenueCat의 디버깅

If you’re planning to use RevenueCat alongside your existing purchase code, refer to their guide on RevenueCat과 함께 기존 구매 __CAPGO_KEEP_0__를 사용하려면 RevenueCat의 .

📘

Observer 모드

앱에 사용자 인증 시스템이 있다면, 구성 시 또는 나중에 호출하는 동안 사용자 식별자를 제공할 수 있습니다. .logIn(). 사용자 식별하기.

SDK 구성된 Offerings Apple, Google 또는 Amazon에서 제품 정보를 가져올 것입니다.

고객이 구매 화면을 열 때 이미 제품이 로드되어 있을 것입니다. 아래는 Offerings를 가져오는 예입니다. 사용자 식별자와 결제 화면을 구성하는 방법에 대한 자세한 내용은 RevenueCat의 Displaying Products

를 참조하세요.

📘

▶️ 사용 가능한 제품을 가져와 표시하세요.

사용자 식별자와 결제를 구성하는 방법 .logIn(). 구매에 대한 더 많은 정보를 얻으려면 RevenueCat의 사용자 식별.

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

아래는 Offerings를 가져오는 예시입니다. Paywall 화면을 조직하기 위해 Offerings를 사용할 수 있습니다. RevenueCat의 제품 표시 에 대한 더 많은 정보와最佳 관행을 참조하세요.

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

Fetching your Offerings, 제품또는 사용 가능한 패키지 상점 설정 문제로 인해 비어 있습니다.

앱 스토어 연결에서 가장 일반적인 이유는 '결제 애플리케이션 계약'이 최신 버전이 아니거나 제품이 '제출 준비' 상태가 아닐 때입니다. Google Play에서는 일반적으로 앱이 폐쇄된 트랙에 게시되지 않았거나 유효한 테스트 사용자가 추가되지 않았을 때 발생합니다.

RevenueCat에서 이 문제를 해결하는 방법에 대한 자세한 정보를 찾을 수 있습니다. 도움말 센터.

구매하기

SDK은 간단한 방법을 제공하여 구매를 facilite합니다. SDK은 앱 스토어에서 거래를 처리하기 위해 Offering에서 패키지를 가져와 처리합니다. purchase:package __CAPGO_KEEP_0__ 샘플은 'your_entitlement_id' 콘텐츠가 잠금 해제되는지 확인하기 위해 패키지를 구매하고 확인하는 과정을 보여줍니다. __CAPGO_KEEP_0__에 대한 자세한 정보는 RevenueCat의 '구매하기'에 대한 설명서에서 찾을 수 있습니다.

The code sample below shows the process of purchasing a package and confirming it unlocks the “your_entitlement_id” content. More details about the purchase:package __CAPGO_KEEP_0__ __CAPGO_KEEP_0__.

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
}

__CAPGO_KEEP_0__

이 메소드를 사용하여 최신 상태를 가져올 때마다 호출할 수 있으며 앱의 라이프 사이클 동안 반복적으로 호출하는 것이 안전합니다. 구매 자동으로 최신 데이터를 캐시하고 업데이트할 때마다 캐시에서 데이터를 가져와서 매우 빠르게 실행됩니다. CustomerInfo 일반적으로 이 메소드를 사용하여 사용자에게 표시할 UI를 결정할 때 또는 사용자가 특정 권한 수준이 필요한 액션을 수행할 때 호출합니다.

💡 팁!

📘

구독 여부만 확인하는 것 이상의 정보에 접근할 수 있습니다. RevenueCat의

구독 상태 을 참조하여 구독이 갱신되도록 설정되었는지, 사용자의 신용카드에 문제가 있는지 등 더 많은 정보를 확인할 수 있습니다. RevenueCat는 사용자가 이전에 구매한 콘텐츠를 다시 활성화할 수 있도록 사용자의

같은 스토어 계정 (애플, 구글, 아마존 계정)에서 구매한 콘텐츠를 다시 활성화할 수 있도록 합니다. 모든 앱은 사용자가 구매를 복원할 수 있도록 하는 방법을 제공하는 것이 좋습니다. 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 구매를 복원하는 구글, 애플, 또는 아마존 계정. RevenueCat은 두 가지 앱 사용자 ID 사이에 별칭을 만들려고 할 수 있으며, 이후에 그 사용자를 하나의 사용자로 간주할 수 있습니다. RevenueCat의

Since the SDK works seamlessly on any platform, changes to a user’s purchase info may come from a variety of sources. You can respond to any changes in a customer’s CustomerInfo 구매 복원 동작에 대한 다양한 구성 가능한 복원 동작에 대한 자세한 내용은 purchases:receivedUpdated:.

This method will fire whenever the SDK receives an updated CustomerInfo 이 __CAPGO_KEEP_0__는 모든 플랫폼에서 작동하기 때문에 사용자의 구매 정보가 변경될 수 있는 다양한 출처에서 변경될 수 있습니다. 고객의 구매 정보가 변경될 때마다 고객의 getCustomerInfo(), purchase(package:), purchase(product:)구매 정보가 변경될 때마다 고객의 restorePurchases().

이 메서드는 __CAPGO_KEEP_0__가 구매 정보를 업데이트하는 RevenueCat 백엔드에서 앱으로 푸시된 업데이트는 RevenueCat로의 아웃바운드 네트워크 요청만으로만 가능합니다.

앱의 경우, 위에서 설명한 대로 RevenueCat의 변경을 무시하고 다음으로 앱이 실행되거나 SDK 메서드의 완료 블록에서 고객 정보의 변경을 처리하는 것으로 충분할 수 있습니다.

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

👍

축하합니다!

1개월 동안 서버 code를 작성하지 않고도 완전한 구독 구매 시스템을 구현했습니다. 축하합니다!

샘플 앱

SDK를 통합하는 더 완전한 예제를 다운로드하려면 RevenueCat 샘플 앱 리소스 페이지를 방문하세요.

샘플 보기

Capacitor를 사용하는 Vue.js 샘플 앱을 곧 공개할 예정입니다.

Capacitor의 깊은 사용을 위해 SDK을 확인하세요. 여기.

다음 단계

\

__CAPGO_KEEP_0__

__CAPGO_KEEP_1__

__CAPGO_KEEP_2__

Capgo

capacitor

만약 __CAPGO_KEEP_0__ 만약 capacitor __CAPGO_KEEP_0__와 연결하세요. Capgo Capgo 결제 시스템 결제 시스템 @capgo/native-purchases @capgo/native-purchases Getting Started Capacitor를 사용한 인앱 구매 구현 수익 전략 가이드 수익 전략 가이드 구현 세부 사항

Live updates for Capacitor apps

웹-layer 버그가 생긴 경우, 앱 스토어 승인 대기 없이 Capgo를 통해 픽스를 배포합니다. 사용자는 배경에서 업데이트를 받으며 네이티브 변경 사항은 일반적인 검토 경로에 남아 있습니다.

마틴의 인간 지원

시작하기

최신 뉴스

Capgo은 전문적인 모바일 앱을 만들기 위해 필요한 최고의洞察력을 제공합니다.