React Native & Flutter

The best way to use Banxa's services in a mobile application is to use a WebView for our site.

Step 1: Install a WebView Library

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:

npm install --save react-native-webview

flutter pub add webview_flutter

Step 2: Import WebView

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:

import { WebView } from 'react-native-webview';

import 'package:webview_flutter/webview_flutter.dart';

Step 3: Add WebView Component

Next, you need to add the WebView component to your app. You can do this by adding the following code:

<WebView
  source={{ uri: '{partner_code}.banxa-sandbox.com' }}
  allowsInlineMediaPlayback
  enableApplePay
  mediaPlaybackRequiresUserAction={false}
/>

WebView(
  initialUrl: "{partner_code}.banxa-sandbox.com"
  javascriptMode: JavascriptMode.unrestricted,
  allowsInlineMediaPlayback: true,
),

Key information

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

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)
Make sure that HTML5 video playback is allowed (we're using some instructions within tags): if video-instructions are not played, try using WebChromeClient to enable video playback
Autoplay in fullscreen mode is disabled and allowsInlineMediaPlayback is set as true for WebView

Camera Access

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'.
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.

Note. Due to iOS restrictions, it is only possible to pass Sumsub KYC liveness check using the Safari browser.

Android

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 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.

        val url = "https://<subdomain>.banxa.com"
        val intent: CustomTabsIntent = Builder()
            .build()
        intent.launchUrl(this@MainActivity, Uri.parse(url))

String url = "https://<subdomain>.banxa.com"
CustomTabsIntent intent = new CustomTabsIntent.Builder()
        .build();
intent.launchUrl(MainActivity.this, Uri.parse(url));

Closing a webview

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.

import 'package:webview_flutter/webview_flutter.dart';

class WebViewExample extends StatefulWidget {
  const WebViewExample({super.key});

  @override
  State<WebViewExample> createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State<WebViewExample> {
  late final WebViewController _controller;

  @override
  void initState() {
    super.initState();

    // #docregion platform_features
    late final PlatformWebViewControllerCreationParams params;
    if (WebViewPlatform.instance is WebKitWebViewPlatform) {
      params = WebKitWebViewControllerCreationParams(
        allowsInlineMediaPlayback: true,
        mediaTypesRequiringUserAction: const <PlaybackMediaTypes>{},
      );
    } else {
      params = const PlatformWebViewControllerCreationParams();
    }

    final WebViewController controller =
        WebViewController.fromPlatformCreationParams(params);
    // #enddocregion platform_features

    controller
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setBackgroundColor(const Color(0x00000000))
      ..setNavigationDelegate(
        NavigationDelegate(
          onNavigationRequest: (NavigationRequest request) {
            if (request.url.startsWith('{INSERT RETURN URL HERE}')) {
              debugPrint('blocking navigation to ${request.url}');
              return NavigationDecision.prevent;
            }
            return NavigationDecision.navigate;
          },
          onUrlChange: (UrlChange change) {
            if(change.url === "{INSERT RETURN URL HERE}") {
             	 //navigate to new page here
            }
            debugPrint('url change to ${change.url}');
          },
        ),
      )
      ..loadRequest(Uri.parse('https://<subdomain>.banxa.com'));

    _controller = controller;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.green,
      appBar: AppBar(
        title: const Text('Flutter WebView example'),
        // This drop down menu demonstrates that Flutter widgets can be shown over the web view.
        actions: <Widget>[],
      ),
      body: WebViewWidget(controller: _controller),
    );
  }