capacitor 앱에서 __CAPGO_KEEP_1__ 구매 플러그인과 RevenueCat을 사용하여 인앱 구매 구현하는 방법

이 플러그인은 공식 레포지토리로 이전되었습니다. 더 많은 정보를 얻으려면 공식 문서 를 참조하세요.

If you prefer a simpler native API without RevenueCat, capgo/native-purchases 를 사용하세요. 이 플러그인은 StoreKit과 Google Play Billing을 사용하여 앱 내 구매와 구독을 직접 구현합니다.

Capacitor 앱 내 구매는 Capacitor 프레임워크의 플러그인으로 iOS와 Android에서 앱 내 구매를 지원합니다. 이 플러그인은 여러 플랫폼에서 일관된 API를 제공하여 개발자들이 앱 내 구독과 구매를 구현하는 것을 쉽게 만듭니다.

Capacitor 앱 내 구매 플러그인의 주요 기능 중 하나는 RevenueCat과 통합하는 것입니다. RevenueCat은 앱 내 구독과 앱 내 구매를 구현하는 것을 간단하게 해주는 플랫폼입니다. RevenueCat은 여러 플랫폼에서 일관된 API를 제공하고, 수신증명 검증과 사용자 관리와 같은 작업을 자동화합니다.

RevenueCat을 사용하면 개발자들이 구독을 관리하고 수입을 추적하고 다른 관련 작업을 수행할 수 있습니다. RevenueCat이 제공하는 기능 중 일부는 다음과 같습니다:

• 자동 결제 확인
• 사용자 관리
• 사용자 지정 가격 모델 지원
• 세부적인 분석 - 확장성

By using the Capacitor Purchases plugin with RevenueCat, developers can save time and effort when implementing in-app subscriptions and purchases in their mobile apps, and provide additional features that can help to improve the user experience and increase revenue.

Using Capacitor Purchases plugin and RevenueCat, developers can easily manage and track in-app subscriptions and purchases, validate receipts, and manage users across multiple platforms. It also allows creating custom pricing models and get detailed analytics to improve the performance and revenue.

설치

Be sure to use the latest version of Capacitor and the Capacitor Purchases plugin. You can check the latest version of Capacitor and the Capacitor Purchases plugin on the Capacitor website.

To install the Capacitor Purchases plugin, run the following command: npm i @capgo/capacitor-purchases Capgo를 앱의 원시 code에 추가하십시오. npx cap sync

Xcode에서 구입 기능을 추가하십시오:

그런 다음

1. RevenueCat 계정 만들기

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

새로운 RevenueCat 계정 가입 여기.

📘

💡 여기 팁!

RevenueCat은 각 앱/프로젝트당 별도의 RevenueCat 계정을 만들 것을 권장합니다. 특히 앱을 판매할 계획이라면, 계정 전달이 더 빠르게 진행될 것입니다.

기업 계정

기업 계정을 사용하여 RevenueCat에 등록하고 앱을 프로젝트 내에 설정하는 것을 권장합니다. 팀원들을 프로젝트에 초대하여 협력자 프로젝트에 초대할 수 있습니다. 프로젝트 소유자는만 빌링을 관리할 수 있습니다.프로젝트 협력자는 빌링 세부 사항을 관리할 수 없습니다.

2. 프로젝트 및 앱 구성

▶️ 프로젝트 만들기

RevenueCat 대시보드에 접속하여 새로운 프로젝트를 추가합니다. 상위 네비게이션 메뉴의 드롭다운 메뉴에서 프로젝트.

RevenueCat 단계 1

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

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

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

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

Apple App Store 앱의 앱 구성 페이지

📘

💡 여기 팁!

앱을 등록한 후 RevenueCat은 플랫폼 서버 알림. 이 알림들은 필수적이지 않지만, 웹후크 웹후크와 통합 배포 시간을 가속하고,

📘

구독자들의 업데이트를 가속하고 지연 시간을 줄 것입니다.

스테이징 앱과 프로덕션 앱, 사용자

RevenueCat은 스테이징과 프로덕션에 대한 별도의 환경을 가지고 있지 않습니다.

사용자의 underlying 거래는 sandbox와 production으로 구분됩니다.

RevenueCat 앱은 모두 sandbox와 production 구매를 스토어에서 할 수 있습니다.

스테이징과 프로덕션에 대한 별도의 앱이 있으시다면, RevenueCat에서 여러 프로젝트를 만들어서 설정을 반영할 수 있습니다., 또한, 사용자는 환경에 따라 구분되지 않습니다. , and Amazon Appstore 공유 비밀번호 자세한 정보를 위해 클릭하세요.

Google 서버 내에서 인증서가 전파되는데 36시간이 걸릴 수 있음을 참고하세요.

3. 제품 설정

▶️ 매장 설정

RevenueCat을 사용하여 제품을 가져오기 전에, 각 매장에서 제품을 설정해야 합니다. 다음 안내서를 참조하세요. 애플 스토어 연결, 구글 플레이 콘솔, 아마존 앱 스토어, 그리고 스 트립 도움을 받으려면 클릭하세요.

iOS 제품을 판매하고 있다면, '결제 애플리케이션 계약'에 서명하고 은행 및 세금 정보를 App Store Connect > 계약, 세금 및 은행에서 입력하십시오. App Store Connect > 계약, 세금 및 은행. 이 작업을 완료해야만 구매 테스트를 시작할 수 있습니다..

📘

테스트 중에 스토어 설정을 건너뛰고 싶다면?

iOS에서 App Store Connect에서 제품을 구성하는 것을 미루고 싶다면 StoreKit Configuration 파일을 사용할 수 있습니다. 이 파일은 Xcode에서 직접 구성할 수 있습니다.

RevenueCat에서 StoreKit Configuration 파일을 설정하는 방법에 대해 더 읽으십시오. 테스트 환경 설명서.

▶️ RevenueCat에서 제품 및 권한을 구성하십시오.

App Store Connect에서 Google Play Console에서, 인앱 제품을 App Store Connect 및 Google Play Console에서 구성한 후에., 아마존 앱 스토어, 또는 스 트립, 구매한 특정 제품에 대한 액세스 권한을 제어하는 Entitlements 시스템을 사용하고, 고객에게 제공할 제품의 세트를 관리하는 Offerings를 사용합니다.

Entitlements는 고객이 구매한 특정 제품에 대한 액세스 권한의 수준입니다. Offerings는 고객에게 제공할 제품의 세트를 관리하는 간단한 방법입니다. RevenueCat recommends 이 기능을 사용하여 앱 업데이트 없이 제품을 변경할 수 있도록 code을 간소화합니다.

See 4. RevenueCat의 Purchases __CAPGO_KEEP_0__ Amazon Appstore

4. RevenueCat의 Purchases SDK

수익 카트 SDK는 SDK 플랫폼에서 구입 및 구독을 무난하게 구현하고 수익 카트 서버와 토큰을 동기화합니다.

이 문제가 발생하면 SDK에 대해 문제 해결을 참조하세요. SDK의 문제 해결 안내를 참조하세요.

📘

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

공개 SDK 키는 SDK 키 탭에서 프로젝트 설정에서 SDK에서 찾을 수 있습니다. API 키 __CAPGO_KEEP_0__ __CAPGO_KEEP_0__ __CAPGO_KEEP_0__

__CAPGO_KEEP_0__ __CAPGO_KEEP_0__ 앱이 실행될 때마다, 일반적으로 앱 런칭 시 한번. 이후 앱 내에서 동일한 인스턴스를 공유하기 위해 인스턴스를 참조하는 것입니다. .shared SDK에서 인스턴스를 참조합니다.

RevenueCat의 Configuring SDK 구성을 완료하십시오.

Make sure you configure Purchases Capacitor에서 사용하는 공공 SDK 키만 사용하세요. RevenueCat에서 다양한 API 키에 대해 더 알아보실 수 있습니다. Authentication guide.

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_******'})
}

When in development, RevenueCat recommends enabling more verbose debug logs. For more information about these logs, see their Debugging guide.

If you’re planning to use RevenueCat alongside your existing purchase code, refer to their guide on Observer 모드.

📘

구매 설정을 사용자 ID와 함께 구성합니다.

If you have a user authentication system in your app, you can provide a user identifier at the time of configuration or at a later date with a call to .logIn()Identifying Users The __CAPGO_KEEP_0__ will automatically fetch the.

SDK은 자동으로 다운로드합니다. and retrieve the product information from Apple, Google, or Amazon. Thus, available products will already be loaded when customers launch your purchase screen. Below is an example of fetching Offerings. You can utilize Offerings to organize your paywall screen. See RevenueCat guide on

Displaying Products for more information and best practices. 더 많은 정보와 최적의 방법에 대한 내용은 여기서 확인할 수 있습니다.

▶️ 제품을 가져와 표시하세요

📘

구매 설정에 사용자 ID를 구성하는 방법

사용자 인증 시스템이 있는 앱이 있다면, 구성 시 또는 나중에 사용자 식별자 제공이 가능합니다. 이때 사용하는 메서드는 "."입니다. 자세한 내용은 RevenueCat의 “사용자 식별” 문서를 확인하세요. .logIn(). 더 많은 정보를 얻으려면 RevenueCat의 가이드를 확인하세요. 아래는 Offerings를 가져오는 예시입니다. Offerings를 사용하여 결제 벽을 구성할 수 있습니다. 자세한 내용과最佳 관행은 RevenueCat의 “제품 표시” 문서를 확인하세요..

SDK은 자동으로 다운로드하여 설치합니다. 구매 설정에 사용자 ID를 구성하는 방법 사용자 인증 시스템이 있는 앱이 있다면, 구성 시 또는 나중에 사용자 식별자 제공이 가능합니다. 이때 사용하는 메서드는 "."입니다. 자세한 내용은 RevenueCat의 “사용자 식별” 문서를 확인하세요.

__CAPGO_KEEP_0__은 자동으로 Apple, Google, 또는 Amazon에서 구성된 Offerings를 가져와 제품 정보를 가져옵니다. 따라서 고객이 구매 화면을 열 때 이미 제품이 로드되어 있습니다. 아래는 Offerings를 가져오는 예시입니다. Offerings를 사용하여 결제 벽을 구성할 수 있습니다. 자세한 내용과最佳 관행은 RevenueCat의 “제품 표시” 문서를 확인하세요. 제품을 가져오는 경우

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

Configuring Purchases with User IDs 제공물, 제품, 또는 사용 가능한 패키지 은 비어 있으면, 그것은 각 스토어에서 관련된 구성 문제로 인해입니다.

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

RevenueCat의 도움말 센터에서 더 많은 정보를 찾을 수 있습니다. 도움말 센터.

▶️ 구매하기

SDK은 간단한 방법으로 구매를 facilite하는 SDK을 포함합니다. purchase:package __CAPGO_KEEP_0__은 fetched Offering에서 패키지를 가져와 각각의 앱 스토어에서 거래를 처리합니다.

code 샘플은 'your_entitlement_id' 콘텐츠가 잠금 해제되는 것을 확인하는 구매 패키지와 관련된 프로세스를 보여줍니다. code에 대한 더 자세한 정보는 purchase:package method은 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, Google, 또는 Amazon 계정입니다.)

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

앱이 모든 사용자가 복원 메서드를 트리거할 수 있는 방법을 가지고 있도록 추천합니다. Apple은 사용자가 구매에 접근할 수 없게 되면 (예: 앱을 삭제/설치, 계정 정보를 잃어버리기 등) 복원 메커니즘을 요구합니다. 사용자가 앱을 삭제/설치하거나 계정 정보를 잃어버리기 등이 발생할 경우 Apple은 복원 메커니즘을 요구합니다. 두 개의 다른 App User IDs

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:.

이 메소드는 언제나 SDK이 업데이트 받을 때 호출됩니다. CustomerInfo 구매 정보가 변경된 경우 사용자의 구매 정보를 변경할 수 있는 다양한 소스에서 변경될 수 있습니다. 사용자의 구매 정보가 변경된 경우 고객의 구매 정보를 변경할 수 있는 방법을 알려주십시오. (optional delegate method를 구현하여 사용자의 구매 정보를 변경할 수 있습니다.) 이 메서드는 __CAPGO_KEEP_0__가 calls to를 통해 업데이트된 object를 받을 때 호출됩니다. 이 메서드는 __CAPGO_KEEP_0__가 calls to를 통해 업데이트된 object를 받을 때 호출됩니다. getCustomerInfo(), purchase(package:), purchase(product:)또는 restorePurchases().

고객 정보 업데이트는 아니며 RevenueCat 백엔드에서 앱으로 푸시되지 않습니다. 업데이트는 RevenueCat로의 아웃바운드 네트워크 요청으로만 발생할 수 있습니다. 위에서 설명한 것처럼.

앱의 경우, 위임을 무시하고 앱이 다시 시작되거나 SDK 메서드의 완료 블록에서 고객 정보를 변경하는 경우에만 변경 사항을 처리할 수 있습니다.

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

👍

축하합니다!

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

샘플 앱

RevenueCat 샘플 앱 리소스에 있는 SDK를 완전히 통합한 더 많은 예제를 다운로드하려면 여기를 클릭하세요.

샘플 보기

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

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

다음 단계

\

• Capgo Builder에서 Native Cloud Build 제품 페이지의 경우, 제품을 올바르게 구성했는지 확인하기 위해 RevenueCat의 entitlements.
• 사용자 식별자를 사용자 자신의 식별자로 설정하는 방법 RevenueCat으로부터 다른 시스템으로 이동하는 경우, 기존 구독을 RevenueCat의 .
• migrating your existing subscriptions RevenueCat의 .
• testing and debugging App Store Small Business Program에 가입할 수 있는지 확인하고, RevenueCat의 .
• how to apply and inform RevenueCat RevenueCat을 사용하여 앱 내 구매를 적용하고 알림하는 방법

앱에 Live update이 필요하다면

여기 가입하세요 👇

계정을 받으려면 여기를 클릭하세요

Capgo

capacitor

__CAPGO_KEEP_0__ capacitor __CAPGO_KEEP_0__ Capgo Capgo __CAPGO_KEEP_0__ __CAPGO_KEEP_0__ @capgo/자체 결제 @capgo/native-purchases 시작하기 @__CAPGO_KEEP_0__/native-purchases, 그리고 수익성 전략서 @__CAPGO_KEEP_0__/native-purchases.