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

        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));