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.

EmbeddedSDK
Setup effortLowHigher
UI ownershipMoneyHashYou
Card form stylingLimited (loader colors, layout toggles)Full control - font, color, padding, height, direction, RTL
Method selection UIMoneyHash renders itYou render it natively with your own components
Native pay (Apple Pay, Google Pay)
Installment plan UIMoneyHash renders itYou render it natively
Card brand detectionAutomaticEvent-driven - cardNumberChange gives you brand + icon URL
Floating labels, custom animations✅ via SDK event callbacks
RTL supportInherited from intent localeConfigurable 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.

PlatformInstall
Web (JavaScript)npm install @moneyhash/js-sdk
iOSSwift Package Manager
Androidimplementation("io.moneyhash:android")
Flutterflutter pub add moneyhash_payment
React Nativenpm install @moneyhash/reactnative-sdk

Where to go next

I want to...Go here
Understand SDK states, error handling, and the core modelSDK Architecture
Start integrating on Web, iOS, Android, Flutter, or React NativeIntegration Steps
See version history and release notes by platformVersions & Change Log

Did this page help you?