SDK
MoneyHash SDKs give you full programmatic control over the payment experience - from how payment methods are listed, to how card fields look and feel, to how native pay buttons are triggered. This page explains what the SDK unlocks, how it differs from the Embedded Experience, and where to go next.
Embedded vs SDK
The Embedded Experience is the fastest path to a working checkout. You create an intent, drop in a URL, and MoneyHash renders the entire checkout inside an iframe - method selection, card form, success and failure screens. You get a loader you can tint and a handful of layout toggles. That's the extent of it.
The SDK is the alternative when that isn't enough. Instead of rendering MoneyHash's UI, the SDK gives you the building blocks - states, events, and methods - and lets you drive the experience yourself. MoneyHash handles the data layer (card tokenization, vault, routing, retries) while you own every pixel the customer sees.
| Embedded | SDK | |
|---|---|---|
| Setup effort | Low | Higher |
| UI ownership | MoneyHash | You |
| Card form styling | Limited (loader colors, layout toggles) | Full control - font, color, padding, height, direction, RTL |
| Method selection UI | MoneyHash renders it | You render it natively with your own components |
| Native pay (Apple Pay, Google Pay) | ❌ | ✅ |
| Installment plan UI | MoneyHash renders it | You render it natively |
| Card brand detection | Automatic | Event-driven - cardNumberChange gives you brand + icon URL |
| Floating labels, custom animations | ❌ | ✅ via SDK event callbacks |
| RTL support | Inherited from intent locale | Configurable per field via direction: "rtl" |
How the SDK works
The SDK is state-driven. Every step in the payment flow - method selection, card entry, 3DS, processing, success, failure - corresponds to a state the SDK returns. Your code reads the state and renders the appropriate UI. When the customer acts, you call the corresponding SDK method and get the next state back.
This means the SDK never imposes a layout. You decide what to show at each state - your design system, your components, your copy.
The one exception is card input fields. These are rendered as secure vault iframes inside containers you define - the iframe is what keeps card data off your infrastructure without requiring PCI certification. Everything surrounding the iframe (labels, borders, error messages, animations) is fully yours.
What you can build with the SDK
Custom card form
Define your own containers in the DOM. The SDK mounts a secure vault iframe inside each one. You style the containers, labels, and error states. You supply the font via fontSourceCss. You control focus and blur animations through SDK event callbacks. The card data never touches your servers.
Native method selection
When the SDK returns METHOD_SELECTION state, you get a list of available payment methods for that intent. Render them with your own components - your own icons, your own layout, your own selection interaction. Call proceedWith when the customer picks one.
Apple Pay and Google Pay
Trigger Apple Pay and Google Pay natively using SDK methods. You control when and how the native pay sheet appears. Supported on Web, iOS, Android, Flutter, and React Native.
Installment plans
When the SDK returns INSTALLMENT_PLANS state, you get the available plans for the card entered. Render your own plan selector - monthly breakdown, fees, term length - using your UI components.
Locale and RTL
Set the locale at SDK initialization or change it programmatically via setLocale. Card fields support direction: "rtl" per field or globally. Error messages respect the locale - English, Arabic, and French are supported.
Available SDKs
The SDK is one concept delivered across five platforms. The API is consistent - the same states, the same flow - with platform-specific implementation details.
| Platform | Install |
|---|---|
| Web (JavaScript) | npm install @moneyhash/js-sdk |
| iOS | Swift Package Manager |
| Android | implementation("io.moneyhash:android") |
| Flutter | flutter pub add moneyhash_payment |
| React Native | npm install @moneyhash/reactnative-sdk |
Where to go next
| I want to... | Go here |
|---|---|
| Understand SDK states, error handling, and the core model | SDK Architecture |
| Start integrating on Web, iOS, Android, Flutter, or React Native | Integration Steps |
| See version history and release notes by platform | Versions & Change Log |
Updated about 1 month ago