Quick Start Guide

Get CroissantPay running in your React Native app in just 5 minutes.

Create your account

Install the SDK

Add the CroissantPay SDK to your React Native project.

bash

# npm
npm install @croissantpay/react-native

# yarn
yarn add @croissantpay/react-native

# pnpm
pnpm add @croissantpay/react-native

Configure your app

Create an app in the CroissantPay dashboard and add your store credentials.

For iOS (App Store)

Create an API key in App Store Connect (Users → Keys)
Add your Issuer ID and Key ID to CroissantPay
Upload the .p8 private key file

For Android (Google Play)

Create a service account in Google Cloud Console
Grant access in Play Console (Users → Permissions)
Upload the service account JSON to CroissantPay

Initialize the SDK

Wrap your app with the CroissantPay provider and start using purchases.

tsx

import { CroissantPayProvider } from '@croissantpay/react-native';

function App() {
  return (
    <CroissantPayProvider 
      apiKey="mx_public_your_key_here"
      userId={currentUser.id} // Your app's user ID
      apiUrl="https://api.croissantlabs.com" // Or your self-hosted URL
    >
      <YourApp />
    </CroissantPayProvider>
  );
}

Display products and purchase

Use the usePurchases hook to display products and handle purchases.

tsx

import { usePurchases } from '@croissantpay/react-native';

function PaywallScreen() {
  const { 
    offerings,
    purchaseProduct,
    hasEntitlement,
    isLoading 
  } = usePurchases();

  // Check if user already has access
  if (hasEntitlement('premium')) {
    return <Text>You're already a premium member!</Text>;
  }

  // Show loading state
  if (isLoading || !offerings) {
    return <ActivityIndicator />;
  }

  // Get current offering packages
  const packages = offerings.current?.packages || [];

  return (
    <View>
      <Text>Choose your plan</Text>
      {packages.map(pkg => (
        <TouchableOpacity
          key={pkg.identifier}
          onPress={() => purchaseProduct(pkg.product)}
        >
          <Text>{pkg.product.title}</Text>
          <Text>{pkg.product.priceString}</Text>
          <Text>{pkg.product.description}</Text>
        </TouchableOpacity>
      ))}
    </View>
  );
}

Check entitlements

Gate features based on what the user has purchased.

tsx

import { usePurchases } from '@croissantpay/react-native';

function PremiumFeature() {
  const { hasEntitlement, entitlements } = usePurchases();

  // Simple check
  if (!hasEntitlement('premium')) {
    return <UpgradePrompt />;
  }

  // Or get full entitlement details
  const premium = entitlements?.premium;
  
  return (
    <View>
      <Text>Welcome, premium member!</Text>
      {premium?.expiresAt && (
        <Text>Renews: {new Date(premium.expiresAt).toLocaleDateString()}</Text>
      )}
      <PremiumContent />
    </View>
  );
}

You're all set!

CroissantPay will automatically validate receipts, track subscriptions, and keep entitlements in sync across devices. Check the dashboard to monitor your subscribers and revenue.

Back to Docs SDK Reference