본문으로 건너뛰기
강좌

capacitor 앱 내 구매

capacitor 앱 내 구매를 위한 Capacitor Purchases 플러그인과 RevenueCat을 사용하는 방법

마틴 도나디우

마틴 도나디우

컨텐츠 마케터

capacitor 앱 내 구매

이 플러그인은 RevenueCat 공식 저장소로 이전되었습니다. 더 많은 정보를 얻으려면 공식 문서를 참조하세요. official documentation RevenueCat을 사용하지 않는 경우 더 간단한 __CAPGO_KEEP_0__ 앱을 원한다면

If you prefer a simpler native API without RevenueCat, @capgo/native-purchases 스토어킷과 구글 플레이 비リング과 직접 인앱 구매 및 구독을 구현합니다.

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

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

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

  • 자동 수신증명서 검증
  • 사용자 관리
  • 사용자 정의 가격 모델 지원
  • 세부적인 분석-확장성

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

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 앱의 원시 code에 플러그인을 추가하십시오. npx cap sync

인앱 구매 기능을 Xcode에 추가하십시오:

Xcode 단계 1 그런 다음 Xcode 단계 2

1. RevenueCat 계정 만들기

이 안내서에서는 구독과 RevenueCat의 SDK를 사용하기 위해 몇 줄의 code만으로 시작하는 방법을 안내합니다.

새로운 RevenueCat 계정 만들기 여기.

📘

💡 여기 팁!

RevenueCat은 각 앱 / 프로젝트당 별도의 RevenueCat 계정을 생성하는 것을 추천합니다. 특히 앱을 판매할 계획이 있다면, 계정 전송 프로세스를 빠르게 하기 위해 전체 계정을 전송할 수 있습니다. RevenueCat Support이 개별 프로젝트를 전송하기를 기다릴 필요가 없습니다.

기업 / 엔터프라이즈

RevenueCat 계정과 앱을 프로젝트 내에 설정할 때 회사 계정을 사용하는 것을 추천합니다. 팀원들을 프로젝트에 초대할 수 있지만, 프로젝트 소유자는만 계정 관리가 가능합니다. 협력자 하지만 billing 관리는 프로젝트 소유자만 가능합니다.2. 프로젝트 및 앱 설정

▶️ 프로젝트 만들기

RevenueCat 대시보드에 접속하여

▶️ 프로젝트 만들기 새 프로젝트 추가 위쪽 네비게이션 메뉴의 드롭다운에서 프로젝트.

RevenueCat 단계 1

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

▶️ 앱/플랫폼 추가

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

RevenueCat 단계 2

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

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

RevenueCat 3단계

Apple App Store 앱의 앱 구성 페이지

📘

💡 여기 팁이 있습니다!

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

📘

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

RevenueCat은 스테이징 및 프로덕션 환경을 별도로 구분하지 않습니다. 대신 사용자의 underlying 거래는 sandbox와 production으로 구분됩니다.

어떤 RevenueCat 앱도 스토어에서 샌드박스 및 프로덕션 구매를 모두 만들 수 있습니다. 만약 스테이징 및 프로덕션에 대한 별도의 앱이 있다면, RevenueCat에서 프로젝트를 여러 개 만들 수 있습니다. 이는 설정을 반영하기 위해.

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

▶️ 서비스 자격증명

RevenueCat이 앱 스토어와 통신하기 위해 설정해야 하는 서비스 자격증명이 필요합니다. RevenueCat 가이드를 참조하세요. 애플 스토어 커넥트 공유 비밀, Play 서비스 자격증명, 아마존 앱 스토어 공유 비밀 자세한 정보는 여기서 확인하세요.

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

3. 제품 설정

▶️ 스토어 설정

구매를 위해 RevenueCat을 사용하기 전에, 각 스토어에서 제품을 구성해야 합니다. 다음 안내서를 참조하세요. App Store Connect, Google Play Console, Amazon AppstoreStripe 스토어 설정을 위한 도움말을 참조하세요.

iOS 제품을 판매하는 경우, 'Paid Applications Agreement'에 서명하고 App Store Connect > Agreements, Tax, and Banking에서 은행 및 세금 정보를 입력하세요. 구매 테스트를 시작하기 전에 이 작업을 완료해야 합니다.. 테스트 중 스토어 설정을 건너뛰고 싶다면?.

📘

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

__CAPGO_KEEP_0__

StoreKit 설정 파일을 RevenueCat에서 설정하는 방법에 대해 더 읽어보세요. 테스트 환경입니다. 안내서.

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

App Store Connect에서 제품을 구성한 후 Google Play Console에서, Amazon Appstore에서, 또는Stripe에서 제품을 구성한 후, RevenueCat 대시보드에 그 설정을 복사해야 합니다. RevenueCat은 프리미엄 기능에 대한 접근을 제어하기 위해 권한 시스템을 사용하고, 고객에게 제공할 제품의 집합을 관리하기 위해 오퍼링을 사용합니다.권한은 고객이 특정 제품을 구매한 후

접근할 수 있는 권한 권장합니다. 이 기능을 사용하여 code을 간소화하고 앱 업데이트를 내리지 않고 제품을 변경할 수 있도록 해보세요.

보기 제품 설정 제품을 설정하고 Offerings 또는 Entitlements로 그룹화하는 방법을 알아보세요.

RevenueCat 단계 4

4. RevenueCat의 Purchases SDK

RevenueCat은 SDK을 사용하여 RevenueCat 서버와 동기화하는 동안 플랫폼 간에 구입 및 구독을 무난하게 구현합니다.

SDK과 관련된 문제가 발생하면 SDK의 문제 해결 안내를 참고하세요.

📘

만약에 SDK 키를 사용하여 Purchases를 구성한다면

공개 SDK 키를 얻으려면 API 키 __CAPGO_KEEP_0__ 탭 프로젝트 설정 대시보드에서

Purchases를 한 번만 구성하여야 합니다. 일반적으로 앱이 시작될 때 구성합니다. 이후에 동일한 인스턴스는 앱 내에서 __CAPGO_KEEP_0__를 통해 공유됩니다. RevenueCat의 __CAPGO_KEEP_0__ 구성 가이드를 참조하세요. Configuring __CAPGO_KEEP_0__ .shared Configuring SDK

Configuring __CAPGO_KEEP_0__ Configuring SDK Configuring __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를 사용하려는 경우, Observer 모드에 대한 RevenueCat의 안내서를 참조하세요. 구매 구성하기.

📘

사용자 ID를 제공할 수 있습니다. 사용자 인증 시스템이 있는 경우, 구성 시 또는 나중에 사용자 ID를 제공할 수 있습니다.

. 사용자 ID를 제공하는 방법에 대한 자세한 정보는 RevenueCat의 .logIn()Observer 모드 사용자 식별.

SDK은 자동으로 Apple, Google 또는 Amazon에서 구성된 Offerings를 가져와 제품 정보를 가져옵니다. 따라서 고객이 구매 화면을 시작할 때 이미 사용 가능한 제품이 로드되어 있습니다. 구성된 Offerings 아래는 Offerings를 가져오는 예시입니다. Offerings를 사용하여 결제 화면을 구성할 수 있습니다. Displaying Products에 대한 자세한 내용과最佳 관행을 알아보려면 RevenueCat의

Displaying Products ▶️ 사용 가능한 제품을 가져와 표시 구매와 사용자 ID 구성

사용자 인증 시스템이 있는 앱이 있다면, 구성 시 또는 나중에 호출하는

📘

를 사용하여 사용자 식별자 제공할 수 있습니다. 자세한 내용은 RevenueCat의

Identifying Users .logIn()을 참조하세요. Identifying Users.

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

아래는 Offerings을 가져오는 예시입니다. Offerings을 사용하여 결제 화면을 조직할 수 있습니다. RevenueCat의 Displaying Products에 대한 안내서를 참조하십시오. Displaying Products 결제 화면을 위한 Offerings

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

제품 사용 가능한, 패키지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 이 메서드를 사용하여 앱의 라이프 사이클 동안 반복적으로 호출할 수 있는 최신 상태를 가져올 수 있습니다. 구매.

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__

구매하기 __CAPGO_KEEP_0__ 자동으로 최신 버전을 캐싱합니다. CustomerInfo 업데이트가 발생하면 캐시에서 데이터를 가져와서 매우 빠르게 실행됩니다.

이 메서드를 호출할 때는 일반적으로 사용자에게 표시할 UI를 결정할 때, 또는 사용자가 특정 권한이 필요한 액션을 수행할 때 사용합니다.

📘

💡 팁!

구독 여부를 단순히 활성화 여부로만 확인하는 것 외에도 구독 상태에 대한 더 많은 정보를 액세스할 수 있습니다. 구독 상태에 대한 자세한 내용은 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)
  })

RevenueCat는 사용자가 이전에 구매한 콘텐츠를 재활용할 수 있도록 사용자의 인앱 구매를 복원할 수 있도록 해줍니다. 사용자가 이전에 구매한 콘텐츠를 재활용할 수 있도록 해줍니다. Apple, Google, 또는 Amazon 계정에서 동일한 underlying store 계정으로 거래를 복원하세요. RevenueCat는 두 개의 App User ID 사이에 alias를 생성하고 앞으로 그 사용자를 동일한 사용자로 간주할 수 있습니다. RevenueCat의 guide에서 더 많은 정보를 참조하세요. 구매를 복원하세요 구매를 복원하는 다양한 구성 가능한 복원 동작에 대한 자세한 정보는

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 메소드의 호출 또는 getCustomerInfo(), purchase(package:), purchase(product:)메소드를 호출하여 restorePurchases().

객체를 받을 때마다 호출됩니다. CustomerInfo 업데이트는 pushed

Depending on your app, it may be sufficient to ignore the delegate and simply handle changes to customer information the next time your app is launched or in the completion blocks of the SDK methods.

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

👍

축하합니다!

You have now implemented a fully-featured subscription purchasing system without spending a month writing server code. Congrats!

샘플 앱

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

샘플 보기

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

If you need to move deep usage of the Capacitor SDK check the documentation 여기.

__CAPGO_KEEP_2__

\

계정을 등록하려면 여기를 클릭하세요.

__CAPGO_KEEP_0__

Capgo로 PR 제출하기

인앱 구매에서 계속 진행하세요 Capgo

capacitor

In __CAPGO_KEEP_0__ capacitor __CAPGO_KEEP_0__ Capgo Capgo __CAPGO_KEEP_0__ __CAPGO_KEEP_0__ capgo capgo __CAPGO_KEEP_0__ __CAPGO_KEEP_0__ __CAPGO_KEEP_0__ Capgo의 수익성 전략서에 대한 구현 세부 정보를 참조하십시오.

실시간 업데이트 된 Capacitor 앱

웹-layer 버그가 활성화된 경우 Capgo를 통해 픽스를 배포하는 대신 앱 스토어 승인까지 며칠 기다리지 말고, 사용자는 배경에서 업데이트를 받으면서 네이티브 변경 사항은 일반적인 검토 경로를 유지한다.

마틴의 인간 지원

시작하기

최신 블로그

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