> ## Documentation Index
> Fetch the complete documentation index at: https://docs.reeple.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# Flutter
> Integrate the Reeple checkout via a WebView bridge
`@reeple/sdk` is a browser/DOM-based library (it renders a modal and iframe) — it does not run inside Flutter's Dart runtime. There is no native Reeple SDK for Flutter. The pattern below is the standard workaround used for web-based checkout SDKs on mobile: load a small hosted HTML page in a `WebView` and bridge its events back to Dart via a JavaScript channel.
## 1. Host a bridge HTML page
Host this page yourself (e.g. as a static file on your own domain) — it embeds the CDN script and posts SDK events back through a JavaScript channel named `ReepleChannel`.
```html reeple-checkout.html theme={null}
```
Pass the payment details as query params when loading the page from the `WebView` (see below).
## 2. Load it from Flutter
```yaml pubspec.yaml theme={null}
dependencies:
webview_flutter: ^4.0.0
```
```dart checkout_screen.dart theme={null}
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
class CheckoutScreen extends StatefulWidget {
const CheckoutScreen({super.key});
@override
State createState() => _CheckoutScreenState();
}
class _CheckoutScreenState extends State {
late final WebViewController controller;
@override
void initState() {
super.initState();
final checkoutUrl = Uri.parse('https://yoursite.com/reeple-checkout.html').replace(
queryParameters: {
'publicKey': 'pk_live_your_key_here',
'amount': '5000',
'currency': 'NGN',
'narration': 'Order #1234',
'email': 'customer@example.com',
'firstName': 'John',
'lastName': 'Doe',
'phoneNumber': '+2348012345678',
},
);
controller = WebViewController()
..setJavaScriptMode(JavaScriptMode.unrestricted)
..addJavaScriptChannel(
'ReepleChannel',
onMessageReceived: (message) {
final data = jsonDecode(message.message);
switch (data['type']) {
case 'success':
debugPrint('Payment successful: ${data['payload']}');
break;
case 'close':
debugPrint('Modal closed');
break;
case 'error':
debugPrint('Payment error: ${data['payload']['message']}');
break;
}
},
)
..loadRequest(checkoutUrl);
}
@override
Widget build(BuildContext context) {
return WebViewWidget(controller: controller);
}
}
```
Verify the payment on your server using the `reference` from the success payload — see [Callbacks & Verification](/callbacks-and-verification). Never mark an order paid based solely on the WebView message.