{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-products/legacy-api/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"React Native & Flutter","description":"Official Banxa API documentation – on-ramp and off-ramp transfers with identity verification and compliance.","llmstxt":{"hide":false,"sections":[{"title":"Table of contents","includeFiles":["**/*"],"excludeFiles":[]}],"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"react-native--flutter","__idx":0},"children":["React Native & Flutter"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The best way to use Banxa's services in a mobile application is to use a WebView for our site."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-1-install-a-webview-library","__idx":1},"children":["Step 1: Install a WebView Library"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The first step is to install a WebView library in your project. You can do this by running the following command in your project directory:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"npm install --save react-native-webview\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"text","header":{"controls":{"copy":{}}},"source":"flutter pub add webview_flutter\n","lang":"text"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-2-import-webview","__idx":2},"children":["Step 2: Import WebView"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Once you have installed the WebView library, you need to import it into your project. You can do this by adding the following line of code to the top of your file:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"import { WebView } from 'react-native-webview';\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"text","header":{"controls":{"copy":{}}},"source":"import 'package:webview_flutter/webview_flutter.dart';\n","lang":"text"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-3-add-webview-component","__idx":3},"children":["Step 3: Add WebView Component"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Next, you need to add the WebView component to your app. You can do this by adding the following code:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"<WebView\n  source={{ uri: '{partner_code}.banxa-sandbox.com' }}\n  allowsInlineMediaPlayback\n  enableApplePay\n  mediaPlaybackRequiresUserAction={false}\n/>\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"text","header":{"controls":{"copy":{}}},"source":"WebView(\n  initialUrl: \"{partner_code}.banxa-sandbox.com\"\n  javascriptMode: JavascriptMode.unrestricted,\n  allowsInlineMediaPlayback: true,\n),\n","lang":"text"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"key-information","__idx":4},"children":["Key information"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If you are planning on using a WebView there are a few permissions and settings that will need to be enabled to use our services correctly. Most of these settings are either set by default or have been set in the above examples, however if you are using a mobile framework that isn't included in the examples please make sure you set these permissions and settings"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["WebView is able to access device local storage and initialize camera (for older iOS versions camera can be accessed only from Safari browser or WebView withSFSafariViewController)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Make sure that HTML5 video playback is allowed (we're using some instructions within ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<video>"]}," tags): if video-instructions are not played, try using WebChromeClient to enable video playback"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Autoplay in fullscreen mode is disabled and allowsInlineMediaPlayback is set as true for WebView"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"camera-access","__idx":5},"children":["Camera Access"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Feature-Policy header for your webpage/frame or any other container with SDK doesn't have any restrictions for initializing camera like value camera 'none'."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Permissions-Policy header doesn't restrict access to a camera and microphone (for some cases) and if allow is set check for \"camera; microphone\" values."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Note. Due to iOS restrictions, it is only possible to pass Sumsub KYC liveness check using the Safari browser."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"android","__idx":6},"children":["Android"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Opening the Banxa website outside your app is recommended to work with all payments. However, if you want more control over the user journey, please open the Banxa site with ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://developer.chrome.com/docs/android/custom-tabs"},"children":["CustomTab"]}," Intent. If the site is opened in Webview, it will have issues with different payment methods such as Google Pay and Pay by Bank."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"text","header":{"controls":{"copy":{}}},"source":"        val url = \"https://<subdomain>.banxa.com\"\n        val intent: CustomTabsIntent = Builder()\n            .build()\n        intent.launchUrl(this@MainActivity, Uri.parse(url))\n","lang":"text"},"children":[]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"text","header":{"controls":{"copy":{}}},"source":"String url = \"https://<subdomain>.banxa.com\"\nCustomTabsIntent intent = new CustomTabsIntent.Builder()\n        .build();\nintent.launchUrl(MainActivity.this, Uri.parse(url));\n","lang":"text"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"closing-a-webview","__idx":7},"children":["Closing a webview"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To close a webview it is recommended you listen to the webview URL and close the webview / navigate away within your application when the URL changes to be the redirect URL specified against your Partner profile or the one that is passed in through the API."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"text","header":{"controls":{"copy":{}}},"source":"import 'package:webview_flutter/webview_flutter.dart';\n\nclass WebViewExample extends StatefulWidget {\n  const WebViewExample({super.key});\n\n  @override\n  State<WebViewExample> createState() => _WebViewExampleState();\n}\n\nclass _WebViewExampleState extends State<WebViewExample> {\n  late final WebViewController _controller;\n\n  @override\n  void initState() {\n    super.initState();\n\n    // #docregion platform_features\n    late final PlatformWebViewControllerCreationParams params;\n    if (WebViewPlatform.instance is WebKitWebViewPlatform) {\n      params = WebKitWebViewControllerCreationParams(\n        allowsInlineMediaPlayback: true,\n        mediaTypesRequiringUserAction: const <PlaybackMediaTypes>{},\n      );\n    } else {\n      params = const PlatformWebViewControllerCreationParams();\n    }\n\n    final WebViewController controller =\n        WebViewController.fromPlatformCreationParams(params);\n    // #enddocregion platform_features\n\n    controller\n      ..setJavaScriptMode(JavaScriptMode.unrestricted)\n      ..setBackgroundColor(const Color(0x00000000))\n      ..setNavigationDelegate(\n        NavigationDelegate(\n          onNavigationRequest: (NavigationRequest request) {\n            if (request.url.startsWith('{INSERT RETURN URL HERE}')) {\n              debugPrint('blocking navigation to ${request.url}');\n              return NavigationDecision.prevent;\n            }\n            return NavigationDecision.navigate;\n          },\n          onUrlChange: (UrlChange change) {\n            if(change.url === \"{INSERT RETURN URL HERE}\") {\n               //navigate to new page here\n            }\n            debugPrint('url change to ${change.url}');\n          },\n        ),\n      )\n      ..loadRequest(Uri.parse('https://<subdomain>.banxa.com'));\n\n    _controller = controller;\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      backgroundColor: Colors.green,\n      appBar: AppBar(\n        title: const Text('Flutter WebView example'),\n        // This drop down menu demonstrates that Flutter widgets can be shown over the web view.\n        actions: <Widget>[],\n      ),\n      body: WebViewWidget(controller: _controller),\n    );\n  }\n}\n","lang":"text"},"children":[]}]},"headings":[{"value":"React Native & Flutter","id":"react-native--flutter","depth":1},{"value":"Step 1: Install a WebView Library","id":"step-1-install-a-webview-library","depth":2},{"value":"Step 2: Import WebView","id":"step-2-import-webview","depth":2},{"value":"Step 3: Add WebView Component","id":"step-3-add-webview-component","depth":2},{"value":"Key information","id":"key-information","depth":2},{"value":"Camera Access","id":"camera-access","depth":3},{"value":"Android","id":"android","depth":1},{"value":"Closing a webview","id":"closing-a-webview","depth":1}],"frontmatter":{"title":"Mobile Applications (WebView)","seo":{"title":"React Native & Flutter"}},"lastModified":"2026-05-19T23:30:38.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/products/legacy-api/docs/on-ramp-off-ramp/mobile-applications-webview","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}