Overview — Full vs Lite
Which SDK to use per platform, and how PCI scope shifts when the card is tokenized on the client.
Tonder's SDKs offer payment-processing tools and a seamless checkout experience for your customers. They simplify integration with clear documentation and add robust security measures for sensitive data.
Choose your SDK type
Tonder offers two variants to match your integration needs:
Full SDK (Inline)
- Pre-built payment UI — ready to use out of the box.
- Built-in form validation (card, expiry, CVV).
- Automatic 3DS handling.
- PCI compliant — sensitive data never touches your servers.
- Best for: quick launches, teams with limited frontend resources.
Lite SDK
- Build your own custom payment UI from scratch.
- Complete design control — fits any design system.
- Card management: save, retrieve & delete payment methods.
- Secure tokenization — no sensitive data on your servers.
- Best for: custom UI, complex workflows, existing design systems.
Platform support
The Web SDK got a major upgrade. For web, a single package —
@tonder.io/web-sdk (npm or CDN) — covers
both approaches: the default full form (Full-style) and individual secure fields in your own UI
(Lite-style). The Full/Lite split still applies to the mobile SDKs. See
Web SDK. Coming from the previous SDK or from Direct API? Follow the
legacy SDK migration guide or the
Direct API one.
| Platform | Full SDK | Lite SDK | Notes / Requirements |
|---|---|---|---|
| Web (JavaScript / TypeScript) | ✅ | ✅ | @tonder.io/web-sdk · npm or CDN · one package covers both approaches |
| Flutter | ✅ | ✅ | iOS & Android · Skyflow Maven config required |
| Ionic | ✅ | ✅ | Hybrid mobile · Skyflow script tag required |
| React Native | ✅ | ✅ | RN 0.70+ · React 16.8+ · iOS & Android |
Integration flow (mobile SDKs)
On web, the flow is createTonder() → init() → create('card_fields') → mount() → pay() —
see the Web SDK quick start. On the mobile SDKs the
flow is:
POST /api/secure-token/ with your secret key. The resulting secureToken is valid for
1 hour.
Instantiate new TonderSdk.InlineCheckout({...}).
Call configureCheckout({ email, secureToken }).
Call injectCheckout() to mount the form into your page.
Call payment(checkoutData) on user click.
Webhooks
All SDKs use the public API key. The mobile SDKs receive webhooks in Long format;
Lite SDK 2.0 (the Web SDK) uses the Short format — top-level fields, with
client_reference and event_type such as payment_Success — the same one API Direct sends. See
the events catalog.
Mobile-SDK Long webhooks have no top-level orderReference. Use metadata.order_id or
metadata.external_id for reconciliation.
Next steps
Web SDK
The new @tonder.io/web-sdk: secure fields, saved cards, and APMs.
Mobile SDK
Flutter, Ionic, and React Native.
SDK Reference
Methods, parameters, and options per platform.
Webhooks model
The Long format in depth.
Tonder Web SDK plugin (AI)
Integrate the Web SDK with Claude Code, Claude Desktop, or Codex using recipes and versioned docs.
SDK demos portal
Interactive demos of the new Web SDK (card, saved cards, APMs, SafetyPay) + legacy demos.