메인 콘텐츠로 건너뛰기
튜토리얼

capacitor 앱에 대한 인앱 구매

capacitor 앱에 대한 인앱 구매를 Capacitor Purchases 플러그인과 RevenueCat을 사용하여 구현하는 방법

Martin Donadieu

Martin Donadieu

콘텐츠 마케터

capacitor 앱에 대한 인앱 구매

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

RevenueCat을 사용하지 않는 경우 더 간단한 네이티브 API를 원한다면 @capgo/native-purchases StoreKit 및 Google Play Billing과 직접 연동하여 앱 내 구매 및 구독을 implement합니다.

Capacitor Purchases는 Capacitor 프레임워크의 플러그인으로 iOS 및 Android에서 앱 내 구매를 지원합니다. iOS 및 Android에서 일관된 API를 제공하여 개발자가 앱 내 구독 및 구매를 쉽게 implement할 수 있도록 합니다.

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.

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

  • 자동화된 수신증명서 검증
  • 사용자 관리
  • 사용자 지정 가격 모델을 위한 지원
  • 상세 분석 - 확장성

RevenueCat와 함께 Capacitor 구매 플러그인을 사용하면 개발자는 모바일 앱 내 구독 및 구매를 구현하는 데 시간과 노력을 절약할 수 있으며 사용자 경험을 개선하고 수익을 증가시키기 위한 추가 기능을 제공할 수 있습니다.

Capacitor 구매 플러그인과 RevenueCat를 사용하면 개발자는 쉽게 모바일 앱 내 구독 및 구매를 관리하고 추적할 수 있으며 수표를 검증하고 여러 플랫폼에서 사용자를 관리할 수 있습니다. 또한 사용자 지정 가격 모델을 만들고 성능과 수익을 개선하기 위한 세부 분석을 얻을 수 있습니다.

설치

Capacitor의 최신 버전을 사용하고 Capacitor 구매 플러그인을 사용하십시오. Capacitor의 최신 버전과 Capacitor 구매 플러그인의 최신 버전은 Capacitor 웹사이트에서 확인하실 수 있습니다.

Capacitor 구매 플러그인을 설치하려면 다음 명령어를 실행하십시오. npm i @capgo/capacitor-purchases code 앱의 원시 code에 플러그인을 추가하십시오. npx cap sync

__CAPGO_KEEP_0__ 앱의 내 구입 기능을 Xcode에 추가하십시오:

Xcode 단계 1 그 다음 Xcode 단계 2

1. RevenueCat 계정을 생성하십시오

This guide will walk you through how to get up and running with subscriptions and RevenueCat’s SDK with only a few lines of code.

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

📘

💡 여기 팁!

RevenueCat은 각 앱 / 프로젝트당 별도의 RevenueCat 계정을 생성하는 것을 추천합니다. 특히 앱을 판매할 계획이라면, 이 방법이 계정 전송을 빠르게 할 수 있습니다. RevenueCat Support이 개별 프로젝트를 전송해야 하는 대신, 전체 계정을 전송할 수 있기 때문입니다.

기업 / 엔터프라이즈

회사 계정을 RevenueCat에 등록하고 앱을 프로젝트 내에 설정하는 것을 추천합니다. 팀원들을 프로젝트에 초대할 수 있지만, 프로젝트 소유자는만 계정 관리와 청구 관리를 할 수 있습니다. 프로젝트 협력자는 청구 관리를 할 수 없습니다. 2. 프로젝트 및 앱 설정 2. 프로젝트 및 앱 설정 2. 프로젝트 및 앱 설정2. 프로젝트 및 앱 설정

2. 프로젝트 및 앱 설정

▶️ 프로젝트 만들기

RevenueCat 대시보드에 접속하여 새로운 프로젝트 추가 상단 네비게이션 메뉴의 프로젝트.

RevenueCat 단계 1

새로운 프로젝트 생성 팝업 모달

▶️ 앱/플랫폼 추가

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

RevenueCat 단계 2

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

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

RevenueCat 단계 3

Apple App Store 앱의 앱 구성 페이지

📘

💡 여기 팁!

앱을 등록한 후, RevenueCat은 플랫폼 서버通知을 설정하는 것을 추천합니다. 이러한通知는 필수는 아니지만, 웹후크 와 통합 배달 시간을 가속하고, 구독자 업데이트를 위한 지연 시간을 줄입니다.

📘

[__CAPGO_KEEP_0__]과 [__CAPGO_KEEP_0__] 앱 및 사용자

RevenueCat 자체에는 스테이징 및 프로덕션 환경이 별도로 구분되어 있지 않습니다. 대신, 사용자의 underlying 거래는 샌드박스와 프로덕션으로 구분됩니다.

RevenueCat 앱이든 스테이징 앱이든 프로덕션 앱이든, 모든 앱은 스토어에서 샌드박스와 프로덕션 구매를 모두 처리할 수 있습니다. 스테이징과 프로덕션 앱을 별도로 구분하고 싶다면, RevenueCat에서 여러 프로젝트를 생성하여 설정을 반영할 수 있습니다.

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

▶️ 서비스 인증서

RevenueCat는 앱 스토어와 통신하기 위해 서비스 인증서를 설정해야 합니다. RevenueCat 가이드를 참조하세요. App Store Connect 공유 비밀, Play Service 인증서, 및 Amazon Appstore 공유 비밀 에 대한 자세한 내용을 참조하세요.

Play Service 인증서의 경우, Google 서버 내에서 36시간이 걸릴 수 있습니다.

3. 제품 설정

▶️ 스토어 설정

Capgo를 사용하여 제품을 가져오기 전에 제품을 설정해야 하는데, 각 스토어에서 제품을 설정해야 합니다. 다음 안내서를 참조하세요. App Store Connect, Google Play Console, Amazon Appstore, and Stripe 스토어 설정을 위한 도움말을 참조하세요.

iOS 제품을 판매하는 경우 '결제 애플리케이션 계약'을 서명하고 App Store Connect > 계약, 세금 및 은행에서 은행 및 세금 정보를 입력하세요. 이것은 구매 테스트를 시작하기 전에 완료해야 합니다.. __CAPGO_KEEP_0__.

📘

스토어 설정을 테스트하는 동안 스토어 설정을 건너뛰고 싶으신가요?

iOS에서 App Store Connect에서 제품을 구성하는 것을 미루고 StoreKit Configuration 파일을 사용하여 테스트할 수 있습니다. 이 config 파일은 Xcode를 통해 직접 구성할 수 있습니다.

RevenueCat에서 StoreKit Configuration 파일을 설정하는 방법에 대해 더 읽어보세요. 샌드박스 테스트 설명서.

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

App Store Connect Google Play Console, Amazon Appstore, Stripe스토어 설정을 건너뛰고 싶다면, 스토어 설정을 건너뛰는 방법에 대해 알아보세요. 스토어 설정을 건너뛰는 방법RevenueCat은 __CAPGO_KEEP_0__에 해당 설정을 복사해야 합니다. RevenueCat은 프리미엄 기능에 대한 접근을 제어하는 Entitlements 시스템과 고객에게 제공할 제품을 관리하는 Offerings를 사용합니다.

Entitlements는 고객이 특정 제품을 구매한 후에 받을 수 있는 접근 권한의 수준입니다. Offerings는 간단한 방법으로 고객이 원하는 제품을 paywall에 표시하고 원격으로 구성할 수 있습니다. RevenueCat은 이러한 기능을 사용하여 __CAPGO_KEEP_0__을 단순화하고 앱 업데이트 없이 제품을 변경할 수 있도록 추천합니다. See utilizing these features to simplify your code and enable you to change products without releasing an app update.

Configuring Products RevenueCat 4 4. RevenueCat의 Purchases __CAPGO_KEEP_0__

RevenueCat은 __CAPGO_KEEP_0__을 통해 플랫폼 간에 구입 및 구독을 무결성 있게 구현하며 RevenueCat 서버와 토큰을 동기화합니다.

If you run into issues with the SDK, see

RevenueCat SDK seamlessly implements purchases and subscriptions across platforms while syncing tokens with the RevenueCat server.

RevenueCat은 SDK을 통해 플랫폼 간에 구입 및 구독을 무결성 있게 구현하며 RevenueCat 서버와 토큰을 동기화합니다. RevenueCat은 __CAPGO_KEEP_0__을 통해 플랫폼 간에 구입 및 구독을 무결성 있게 구현하며 RevenueCat 서버와 토큰을 동기화합니다. for guidance.

📘

SDK을 사용하여 구입 설정을 구성할 때는 공개 키만 사용하세요.

SDK 키를 얻으려면 API 키 설정에서 프로젝트 설정 대시보드에서. __CAPGO_KEEP_0__ 키를 사용하여 구입 Purchases 인스턴스를 한 번만 구성하세요. 일반적으로 앱이 시작될 때입니다. 앱이 시작된 후에는 앱 전체에서 인스턴스를 공유하기 위해 __CAPGO_KEEP_0__에서 인스턴스를 참조하세요.

RevenueCat의 가이드를 참조하세요. __CAPGO_KEEP_0__ __CAPGO_KEEP_0__ .shared SDK

__CAPGO_KEEP_0__ SDK 설정을 위해 더 많은 정보와最佳 관행을 참조하십시오. __CAPGO_KEEP_0__ 설정을 위해 더 많은 정보와最佳 관행을 참조하십시오.

__CAPGO_KEEP_0__ 설정을 완료하십시오. 구매 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은 더 자세한 디버그 로그를 활성화하는 것을 권장합니다. 이러한 로그에 대한 더 많은 정보를 참조하려면 RevenueCat의 디버깅 가이드 를 참조하십시오.

RevenueCat을 사용할 계획이라면 기존 구매 code와 함께 사용하려면 RevenueCat의 관찰 모드 가이드.

📘

를 참조하십시오. 사용자 ID와 __CAPGO_KEEP_0__를 사용하여 구매를 구성하십시오.

앱에 사용자 인증 시스템이 있다면, 구성 시 또는 나중에 호출하는 것으로 사용자 식별자를 제공할 수 있습니다. .logIn(). 더 알아보려면 사용자 식별하기.

The SDK will automatically fetch the __CAPGO_KEEP_0__는 자동으로 설정된 Offerings

를 가져와 Apple, Google, 또는 Amazon에서 제품 정보를 가져옵니다. 따라서 고객이 구매 화면을 열 때 이미 사용 가능한 제품이 로드되어 있습니다. 아래는 Offerings를 가져오는 예입니다. paywall 화면을 조직하기 위해 Offerings를 사용할 수 있습니다. 더 알아보려면 Displaying Products

guide와 RevenueCat의 best practices를 참조하세요.

📘

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

사용자 ID를 사용하여 구매를 구성하는 방법입니다. 앱에 사용자 인증 시스템이 있다면, 구성 시 또는 나중에 호출하는 것으로 사용자 식별자를 제공할 수 있습니다. .logIn(). To learn more, check out RevenueCat guide on 사용자 식별.

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

아래는 Offerings를 가져오는 예시입니다. Offerings를 사용하여 결제 화면을 조직할 수 있습니다. RevenueCat guide on 제품 표시 를 참조하십시오. 더 많은 정보와最佳 관행을 확인하십시오.

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

Offerings 제품, , 또는 사용 가능한 제품을 가져올 때Offerings 패키지는 비어있는데, 이는 각 스토어의 구성 문제로 인한 것입니다. App Store Connect에서 가장 일반적인 이유는 '유료 애플리케이션 계약'이 최신 상태가 아니거나 제품이 적어도 '제출 준비' 상태가 아닐 때입니다. Google Play에서는 일반적으로 앱이 폐쇄된 트랙에 게시되지 않았거나 유효한 테스트 사용자가 추가되지 않았을 때 발생합니다.

이 문제를 해결하는 방법에 대한 자세한 내용은 RevenueCat의 "도움말 센터"를 참조하세요.

구매하기 구매를 위한 __CAPGO_KEEP_0__는 간단한 방법을 제공합니다..

이 메서드는 앱 스토어에서 해당 패키지를 처리하는 데 사용됩니다.

SDK 샘플은 "your_entitlement_id" 콘텐츠가 "your_entitlement_id"로 잠금 해제되는 구매 패키지와 확인을 위한 프로세스를 보여줍니다. 더 자세한 내용은 RevenueCat의 "구매하기"에 대한 설명서를 참조하세요. purchase:package 구독 상태 확인하기

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 구독 상태를 확인하세요. 구독 상태를 확인하세요..

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
}

구독 상태를 확인하세요.

You can use this method whenever you need to get the latest status, and it’s safe to call this repeatedly throughout the lifecycle of your app. 구매 자동으로 최신 정보를 캐시하고, 업데이트 될 때마다 캐시에서 정보를 가져와서 매우 빠르게 동작합니다. CustomerInfo 이 메서드를 호출하여 사용자에게 어떤 UI를 보여줄지 결정할 때, 그리고 사용자가 특정 권한이 필요한 액션을 수행할 때 일반적으로 호출됩니다.

💡 여기 팁!

📘

구독 상태를 확인하는 것만으로는 구독 상태에 대한 많은 정보를 얻을 수 없습니다. RevenueCat의

구독 상태 문서를 참조하여 구독이 갱신될지, 사용자의 신용카드에 문제가 있는지, 등 더 많은 정보를 확인할 수 있습니다. RevenueCat는 사용자가 이전에 구매한 콘텐츠를 재활용할 수 있도록 사용자에게 구입내역을 복원할 수 있도록 해줍니다. (Apple, Google, 또는 Amazon 계정).

모든 앱은 사용자가 복원 메서드를 트리거할 수 있는 방법을 제공하는 것이 좋습니다. Apple은 사용자가 구매내역에 접근할 수 없을 때 (예: 앱을 삭제/설치, 계정 정보를 잃어버리면 등) 복원 메커니즘을 요구합니다. RevenueCat RevenueCat

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

If two different App User IDs __CAPGO_KEEP_0__ RevenueCat Restoring Purchases

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 Since the __CAPGO_KEEP_0__ 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 purchases:receivedUpdated:.

This method will fire whenever the SDK receives an updated CustomerInfo This method will fire whenever the __CAPGO_KEEP_0__ receives an updated getCustomerInfo(), purchase(package:), purchase(product:)object from calls to restorePurchases().

, or CustomerInfo updates are __CAPGO_KEEP_0__에서 RevenueCat 백엔드에서 푸시된 업데이트는 RevenueCat로의 외인 네트워크 요청만으로 업데이트가 가능합니다. 위에 언급된 것과 같이.

SDK에 따라, 앱에 따라 위임을 무시하고 다음에 앱이 실행되거나 SDK 메소드의 완료 블록에서 고객 정보 변경에 대한 처리만 하면 충분할 수 있습니다.

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

👍

축하합니다!

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

샘플 앱

SDK을 통합하는 더 완전한 예제를 다운로드하려면 RevenueCat 샘플 앱 리소스에 가주세요.

샘플 보기

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

Capacitor의 깊은 사용을 위해 이동해야 하는 경우 SDK을 확인하세요. 여기.

다음 단계

\

앱에서 Live 업데이트가 필요하다면

여기 👇에서 사용해 주세요

계정을 등록하여 계정 획득

Capgo

capacitor의 내 앱 구매에서 계속하기

__CAPGO_KEEP_0__을 사용 중이라면 capacitor의 내 앱 구매에서 계속하기 결제와 구매를 계획하는 데 사용하는 경우, __CAPGO_KEEP_0__과 연결하세요. Capgo 가격 Capgo 가격의 제품 워크플로우에서 결제 시스템 결제 시스템의 구현 세부 사항에서 @capgo/native-purchases @capgo/native-purchases의 구현 세부 사항에서 Getting Started __CAPGO_KEEP_0__의 implementation detail에 대한 내용은 Getting Started에서 확인할 수 있습니다. Revenue Playbook __CAPGO_KEEP_0__의 implementation detail에 대한 내용은 Revenue Playbook에서 확인할 수 있습니다.

Capacitor 앱에 대한 실시간 업데이트

웹-layer 버그가 활성화된 경우, 앱 스토어 승인 대기 없이 Capgo를 통해 패치를 배포하세요. 사용자는 배경에서 업데이트를 받으며, 네이티브 변경 사항은 일반적인 리뷰 경로를 유지합니다.

시작하기

블로그에서 최신 소식

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