PFM SDK (Engage) | Lune Docs

Installation

// npm
npm install @lune/engage-web

// CDN
<script src="https://cdn.lunedata.io/engage/v1/engage.js"></script>

npm install @lune/engage-react-native
cd ios && pod install

// Swift Package Manager (Package.swift)
.package(url: "https://github.com/lunedata/engage-ios.git", from: "1.0.0")

// build.gradle
implementation "io.lunedata.engage:engage-android:1.0.0"

Initialize

Set your publishable key once at app launch. Never embed a secret key in client code.

import { Engage } from '@lune/engage-web';

Engage.init({
  publishableKey: 'lune_pk_live_...',
  theme: 'dark',
  locale: 'en',
  userToken: yourSignedJwtFromYourBackend,
});

import { EngageProvider } from '@lune/engage-react-native';

<EngageProvider
  publishableKey="lune_pk_live_..."
  theme="dark"
  userToken={signedJwt}>
  {children}
</EngageProvider>

Available components

Component	Description
`<SpendingOverview>`	Donut chart of spend by category, configurable date range.
`<TransactionFeed>`	Enriched transaction list with merchant logos and filters.
`<BudgetCard>`	Goal-based monthly budget per category with smart nudges.
`<Goal>`	Save-toward-target component with auto-rule suggestions.
`<CarbonImpact>`	Per-transaction and aggregate carbon footprint visualization.
`<Subscriptions>`	Auto-detected recurring charges, cancel flow handoff.

Theming

Customize colors, radius, fonts, and density via CSS custom properties (web) or a theme object (React Native, iOS, Android).

/* Override design tokens — apply to a parent of <Engage> */
.engage-container {
  --engage-color-primary: #6FCFB5;
  --engage-color-bg: #0A1410;
  --engage-color-text: #F2F7F5;
  --engage-radius: 14px;
  --engage-font-family: 'Inter', sans-serif;
}

Events

Components emit events your app can listen to — for analytics, deep-linking, or surfacing Lune actions inside your own UI.

engage:transaction-tap — user tapped a transaction row.
engage:goal-complete — user completed a savings goal.
engage:budget-exceeded — a budget threshold crossed.
engage:subscription-canceled — user canceled via the Subscriptions component.

RTL & Arabic-first

Pass locale: 'ar' at init. All components mirror their layout, switch typography to the Arabic font stack (default IBM Plex Sans Arabic), and adjust spacing tokens automatically.

Previous ← Enrichment API Next Webhooks →