Natively Docs
Join our community 🔥
  • 👩‍🚀Getting Started
    • What is Natively?
    • Why Natively?
    • FAQ
    • Create Your First App
  • 🚀Natively Platform
    • 🚉Releases
    • 🖌️Appearance
      • 😼App Icon
      • 📱Loading Screen
      • 📱Error Screen
      • 🎨Style
    • 🎬Preview
    • ⭐Features
      • 🛳️Bottom Bar
      • 🚇Deeplinks
        • 🔥Firebase
        • 🔗Universal Links
        • 🌱Branch.io
      • 📍Geolocation
      • 🔔Notifications
        • 📲OneSignal Notifications
        • 🔥Firebase Notifications (Advanced)
      • 📒Contacts
      • 👩‍🎨Social Auth
        • 🍏Sign In with Apple
      • 💟HealthKit
      • 💰Purchases
      • 🤑Admob
      • 💳NFC
      • 📷Camera
      • 📂Photo Library
      • 🎤Microphone
      • 📈Analytics
        • 🕊️AppsFlyer
        • 😛Facebook
    • 🚚Publish
      • 🍏iOS App
      • 🤖Android App
    • ⚙️Settings
    • 🙈Subscription Plans
  • Guides
    • 🧋Integration (Native Features)
      • 🏅How to get started?
      • ℹ️Device
      • ℹ️Browser Info
      • 🛳️Bottom Bar
      • ✂️Clipboard
      • 🚦Push Notifications - OneSignal
      • 🚦Push Notifications - Firebase (Advanced)
      • 📍Geolocation
      • 📦App Storage
      • 🗝️Biometrics & Credentials
      • 📧Native SMS/Email
      • 📅Native Date Picker
      • 📸Native Camera
      • 🎙️Native Audio Recorder
      • 🈁Native Scanner (QR/Barcode)
      • 📔Contacts
      • 🍏Apple Sign In
      • ❤️HealthKit
      • 💸In-App Purchases
      • 🤑Admob
      • 💳NFC
      • 🥑Show Toast/Banner
      • ⏳Show/Hide Loading Screen
      • 🥑Haptic Feedback
      • 🖼️Share Media/Files
      • 📱Open an external App/URL
      • ✍️Request User's review
      • ↔️getInsets
      • 🎨Control Style & Colors
    • 🔍Troubleshooting
    • 🐈Setup RevenueCat App
    • 🚑Setup Admob App
    • 🚥Setup One Signal App
    • 🧑‍🤝‍🧑Setup website Universal Links (Deeplinks)
    • 🍕Testing & Submitting your app
    • 🔑Generate iOS Push Key (NEW)
    • 🔑Generate iOS Push Certificate (Legacy)
    • 🤝Affiliate program
    • 📕For Partners: Natively Brand Book.
Powered by GitBook
On this page
  • 🧋 Bubble.io Plugin
  • 🛠 JavaScript SDK
  • Where to find Package ID?
  • How to link Stripe & RevenueCat?

Was this helpful?

  1. Guides
  2. Integration (Native Features)

In-App Purchases

PreviousHealthKitNextAdmob

Last updated 3 months ago

Was this helpful?

Before reading this page, please make sure you've set up your RevenueCat account.

To offer a seamless purchasing experience across platforms, use In-app Purchases for your mobile app users and your preferred web payment processor for website users. The feature helps you identify the user's platform to apply the correct payment method.

🧋 Bubble.io Plugin

[Element] Natively - Purchases

Events:

  • Purchase Success

  • Purchase Failed

  • Set Customer Success

  • Set Customer Failed

  • Purchase Cancelled

  • Customer ID Received

  • Get Price Success

  • Get Price Failed

  • Restore Purchase Success [iOS]

  • Restore Purchase Failed [iOS]

States:

  • Latest Transaction Id - Transaction Id after Purchase Package

  • Latest Customer Id - Customer Id after Set Customer ID or Purchase Package

  • Latest Error - Empty if no error

  • Latest GetPrice price - 9.99

  • Latest GetPrice price (Localized) - "$9.99" / "9.99 USD"

  • Latest GetPrice currency - "USD", "UAH", etc.

  • Latest PurchasePackage packageId

Actions:

  • Purchase Package - Initiate purchase of product or subscription

  • Set Customer ID - Link your user's id with RevenueCat customer

    • Customer Identifier - (We're recommending using a Current User's unique id to identify customers in the RevenueCat dashboard)

  • Reset Customer ID - Unlink Customer ID from a device

  • Get Package Price - Returns a price for specific product

  • Get Customer ID - Returns a current customer id

  • Restore Purchase [iOS] - Restores purchases (Handled by RevenueCat automatically)

How to use?

  1. Add revenuecat_apiKey in plugin settings. To find API Key, go to RevenueCat App > API keys > Secret API keys.

  2. Call Set Customer ID

  3. Call Purchase Package action

How to verify User's subscription?

Make sure you've added revenuecat_apiKey in plugin settings. To find API Key, go to RevenueCat App > API keys > Secret API keys. ⚠️⚠️⚠️ MAKE SURE YOU'RE USING API KEY V1

RevenueCat - Verify Subscription

  • Customer ID - Revenue cat user id that was used on RevenueCat Login.

Returns a result as:

  • Product ID - text

  • Purchase Date - date

  • Grace Period Expires Date - date

  • Expiration Date - date

  • Is Active - yes / no (Expiration Date > Current Date)

  • Error - empty text if no error

Bubble Setup example:

  1. On each User Login or first Signup you need to set the RevenueCat customer ID to your own user's unique id.

  2. Purchase a subscription (package) with action

  3. Verify user's subscription whenever you need it

  4. If you have any issues and, for some reasons, purchases doesn't work. You can check Latest Error value from Natively Purchases element

🛠 JavaScript SDK

NativelyPurchases

const purchases = new NativelyPurchases();
const login_callback = function(resp) {
    console.log(resp.status); // SUCCESS or FAILED
    console.log(resp.customerId); // Customer Id
    
    // Empty if no error (should contain an error if status === "FAILED"
    console.log(resp.error); 
};

// Link your user with the customer on RevenueCat
const userId = "sdfdsr-2345-3rsd-fsd3432";
const userEmail = "email@example.com";
purchases.login(userId, userEmail, login_callback);

// Unlink your user with the customer on RevenueCat
const logout_callback = function(resp) {
    console.log("Logged out");
}
purchases.logout(logout_callback);

// Get the current user's customer id (Useful in case you're not linking the user with the RevenueCat customer)
const customer_id_callback = function(resp) {
    console.log(resp.customerId);
}
purchases.customerId(customer_id_callback);

// Make a purchase
const packageId = "$rc_monthly";
const purchases_package_callback = function(resp) {
    console.log(resp.status);
    console.log(resp.transactionId); //Legacy. Will not have value in a recent build
    console.log(resp.error);
};
purchases.purchasePackage(packageId, purchases_package_callback);

// Get price
const packageId = "$rc_monthly";
const price_callback = function(resp) {
    console.log(resp.status); // SUCCESS / FAILED
    console.log(resp.price); // "9.99"
    console.log(resp.localized); // "$9.99" or "9.99 USD"
    console.log(resp.currency); // "USD"
    console.log(resp.error); // Empty if no error
};
purchases.packagePrice(packageId, price_callback);

// Restore a purchase
const restore_callback = function(resp) {
    console.log(resp.status); // SUCCESS / FAILED
    console.log(resp.customerId);
    console.log(resp.error);
};
purchases.restore(restore_callback);

How to verify subscription with JS?

Where to find Package ID?

For custom package identifier

For default package identifier

How to link Stripe & RevenueCat?

How to link Stripe purchases with RevenueCat?

Where fetch_token & app_user_id is:

Make sure you've for your app

A new customer will be created if the customer with such ID does not exist. More details

Entitlements ID - your entitlements id, more details .

You can also use for your purpose (for example, validation of purchases)

You need to fetch a user from RevenueCat API and verify it's entitlements. More details can be found .

You can find it in your RevenueCat App dashboard, more details

We recommend checking guide if you plan to use a Stripe subscription through RevenueCat.

Create a request in (more details about the endpoint you can find )

🧋
💸
set up your Revenue Cat
here
here
RevenueCat API
here
here
this
API Connector
here
🐈Setup RevenueCat App
Browser Info
Bubble.io Plugin
Verify Subscription with Plugin
JavaScript SDK
Verify Subscription with JS
How to link Stripe & RevenueCat?
Where to find Package ID?
Package ID