> ## Documentation Index
> Fetch the complete documentation index at: https://docs.henrylabs.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# Native Apps
> Collect cards in an iOS, Android, or React Native app by showing the Card Element in a WebView.
There is no native SDK. Instead, show the [Card Element](https://docs.henrylabs.ai/v1/sdk/client/elements/card-element.md) in a WebView and pass the `cardToken` to your app through the WebView's message bridge. Card data stays inside Henry's iframe, so it never touches your app or your servers.
> [!WARNING]
>
> Load the page with an `https` base URL, as in the examples below. Any URL
> works; nothing is fetched from it. Without one, `submit()` never returns.
## 1. Add the card page
Ship this page with your app. It mounts the Card Element and sends results to whichever bridge is present.
```html card.html theme={null}
```
The app receives one of these messages:
| `type` | Meaning |
| - | - |
| `ready` | The form has loaded. Enable your submit button |
| `token` | Success: `cardToken`, `cardBrand`, `cardBin`, `cardLast4` |
| `invalid` | The buyer hasn't finished entering the card |
| `error` | `message`. The form failed to load, or the request failed or timed out |
## 2. Show it in your app
Keep your submit button disabled until `ready` arrives and while a submit is in progress. Give the WebView a height of about `140` points so both rows of fields fit.
**Swift**
Add `card.html` to your app target.
```swift theme={null}
import SwiftUI
import WebKit
struct CardResult: Decodable {
let type: String // "ready", "token", "invalid" or "error"
let cardToken: String?
let cardBrand: String?
let cardLast4: String?
let message: String?
}
final class HenryCardForm: NSObject, WKScriptMessageHandler {
var onResult: ((CardResult) -> Void)?
private weak var webView: WKWebView?
func makeWebView() -> WKWebView {
let config = WKWebViewConfiguration()
config.userContentController.add(self, name: "henry")
let webView = WKWebView(frame: .zero, configuration: config)
let url = Bundle.main.url(forResource: "card", withExtension: "html")!
let html = try! String(contentsOf: url, encoding: .utf8)
// Any https URL works; it gives the page an origin and is never fetched.
webView.loadHTMLString(html, baseURL: URL(string: "https://yourapp.com"))
self.webView = webView
return webView
}
func submit() {
webView?.evaluateJavaScript("submitCard()")
}
func userContentController(
_ controller: WKUserContentController,
didReceive message: WKScriptMessage
) {
guard let json = (message.body as? String)?.data(using: .utf8),
let result = try? JSONDecoder().decode(CardResult.self, from: json)
else { return }
onResult?(result)
}
}
struct CardFormView: UIViewRepresentable {
let form: HenryCardForm
func makeUIView(context: Context) -> WKWebView { form.makeWebView() }
func updateUIView(_ webView: WKWebView, context: Context) {}
}
struct AddCardScreen: View {
@State private var form = HenryCardForm()
@State private var isReady = false
@State private var isSubmitting = false
var body: some View {
VStack {
CardFormView(form: form).frame(height: 140)
Button("Save card") {
isSubmitting = true
form.submit()
}
.disabled(!isReady || isSubmitting)
}
.padding()
.onAppear {
form.onResult = { result in
isSubmitting = false
switch result.type {
case "ready": isReady = true
case "token": sendToBackend(result.cardToken)
case "invalid": showError("Check your card details")
default: showError(result.message)
}
}
}
}
}
```
**Kotlin**
Put `card.html` in `app/src/main/assets/`, and make sure your manifest has the `INTERNET` permission.
```kotlin theme={null}
import android.annotation.SuppressLint
import android.webkit.JavascriptInterface
import android.webkit.WebView
import org.json.JSONObject
@SuppressLint("SetJavaScriptEnabled")
class HenryCardForm(
private val webView: WebView,
private val onResult: (JSONObject) -> Unit,
) {
init {
webView.settings.javaScriptEnabled = true
webView.addJavascriptInterface(this, "HenryBridge")
val html = webView.context.assets.open("card.html")
.bufferedReader().use { it.readText() }
// Any https URL works; it gives the page an origin and is never fetched.
webView.loadDataWithBaseURL(
"https://yourapp.com", html, "text/html", "utf-8", null,
)
}
fun submit() = webView.evaluateJavascript("submitCard()", null)
@JavascriptInterface
fun postMessage(json: String) {
// Called on a background thread
webView.post { onResult(JSONObject(json)) }
}
}
```
Wire it to your layout's WebView and button:
```kotlin theme={null}
val saveButton = findViewById