React Native

The Trustly Lightbox JavaScript library allows you to quickly build a bank authorization workflow in your React Native app. Integrate the Trustly Lightbox to retrieve bank authorization data that can be used with other Trustly APIs.

To use an example project for testing and learning, see the React Native Example in GitHub.

If you need help with your integration, contact your Trustly representative or send your request to us.integrations@trustly.com.

OAuth configuration

Banks that use OAuth login pages often have strict security policies which prohibit access to their login urls from WebViews. Trustly client libraries include functionality that simplifies OAuth handling. For more information about using OAuth login authorization flows with the Trustly Lightbox, see About OAuth Authentication.

Add the React Native components

1. Run the following command to add react-native-webview to your application or alternative WebView package:

   $
   npm install react-native-webview --save

2. Run the following command to add the react-native-inappbrowser component to your application or alternative in-app browser package:

   $
   npm install react-native-inappbrowser-reborn --save

3. Configure a deep link for your application. See the React Native linking documentation. Typically, the format for a deep link or URL scheme in your application is: my_app://.

Launch the Lightbox

The Lightbox is launched by using the establishData variable. The variable must include a metadata object with the following properties:

• urlScheme - the URL you want the user to return to after completing an OAuth or “App-to-App” user flow. For example, my_app:// or my_app://path/success.
• integrationContext - one of InAppBrowser or InAppBrowserNotify. InAppBrowserNotify posts a message to the WebView element and is recommended by Trustly. InAppBrowser triggers a window.open event using a target url that is opened in a secure in-app browser.

In the following example, a number of the required establishData variable properties are omitted for simplicity. For a complete list of the required properties, see Establish Data.

1
const establishData = {
2
  accessId: 'YOUR_ACCESS_ID',
3
  merchantId: 'YOUR_MERCHANT_ID',
4
  metadata: {
5
    urlScheme: "YOUR_APP://",
6
    integrationContext: "InAppBrowserNotify",
7
  }
8
};

Render the Lightbox in a WebView

You can open the Lightbox in a separately hosted web page or raw html. The following example uses the react-native-webview package to open the myapp.com/checkout URL where the Trustly Lightbox is rendered:

1
import { WebView } from 'react-native-webview';
2
3
class TrustlyWebview extends Component () {
4
  render(){
5
    return (
6
      <WebView
7
        source={{ uri: 'https://myapp.com/checkout' }}
8
        javaScriptEnabled=&#123;true&#125;
9
        startInLoadingState
10
      />);
11
  }  
12
}

Note: For this package, the property javaScriptEnabled={true} must be passed to allow the Lightbox to communicate with your app’s WebView.

Set up Window Message Listener

Errors can occur when a user selects an OAuth-enabled bank and then selects their login URL within the WebView. You can use the window.ReactNativeWebview.postMessage method to simplify error handling in React Native apps.

1. Add the window.ReactNativeWebview.postMessage method to inject a listener in the WebView. For example:

   1
   import { WebView } from 'react-native-webview';
   2
   3
   const postMessageForOauth = `
   4
     window.addEventListener(
   5
     "message",
   6
     function (event) {
   7
       var data = (event || {}).data || {}
   8
       window.ReactNativeWebView.postMessage(event.data);
   9
     },
   10
     false
   11
     );
   12
   `;
   13
   14
   class TrustlyWebview extends Component () {
   15
     render(){
   16
       return (
   17
         <WebView
   18
           source={{ uri: 'https://myapp.com/checkout' }}
   19
           javaScriptEnabled=&#123;true&#125;
   20
           injectedJavaScript=&#123;postMessageForOauth&#125;
   21
           startInLoadingState
   22
         />);
   23
     }  
   24
   }

2. Configure your app to listen for these messages. The following is an example of an OAuth login window message:

   1
   {
   2
       "nativeEvent": {
   3
           "canGoBack": true,
   4
           "canGoForward": false,
   5
           "data": "PayWithMyBank.ExternalBrowserIntegration|open|https://sandbox.paywithmybank.com/step/oauth/login/1024436793?ts=1691778330867&lbid=1691778325518|oauth:_FIOAuthWindow",
   6
           "loading": false,
   7
           "target": 3,
   8
           "title": "Trustly",
   9
           "url": "about:blank"
   10
       }
   11
   }

3. Create a message handler function to filter and verify the messages your application receives and then pass them to the onMessage property of the WebView component. For example:

   1
   import { WebView } from 'react-native-webview';
   2
   3
   const postMessageForOauth = `
   4
     window.addEventListener(
   5
     "message",
   6
     function (event) {
   7
       var data = (event || {}).data || {}
   8
       window.ReactNativeWebView.postMessage(event.data);
   9
     },
   10
     false
   11
     );
   12
   `;
   13
   14
     messageHandler = (message: any) => {
   15
       const data = message.nativeEvent.data
   16
       var [command, ...params] = data.split("|")
   17
       
   18
       // check for correct message content
   19
       if(command.includes("ExternalBrowserIntegration")) {
   20
         var messageUrl = params[1]
   21
         // user selected an OAuth bank
   22
         console.log("Trustly URL", messageUrl)
   23
       }
   24
     }
   25
   26
   class TrustlyWebview extends Component () {
   27
     render(){
   28
       return (
   29
         <WebView
   30
           source={{ uri: 'https://myapp.com/checkout' }}
   31
           javaScriptEnabled=&#123;true&#125;
   32
           injectedJavaScript=&#123;postMessageForOauth&#125;
   33
           startInLoadingState
   34
           onMessage={this.messageHandler}
   35
         />);
   36
     }  
   37
   }

Open the external link

Many banks consider WebViews an insecure method for accepting and authenticating user credentials. Following the completion of this step, when a customer opens the Trustly Lightbox and selects an OAuth-required Bank, a secure in-app-browser layer opens over the Lightbox. This layer contains information about the selected bank and a button that a customer can select to authenticate with their bank’s mobile app or through the bank’s OAuth login web page. After a customer is successfully authenticated, they are directed back to your app.

There are several packages that provide abstractions for the iOS and Android APIs. The following example uses the react-native-inappbrowser-reborn package:

1
import { InAppBrowser } from 'react-native-inappbrowser-reborn';
2
3
class TrustlyWebview extends Component () {
4
  
5
  openOAuthLink = async link => {
6
    try {
7
      await InAppBrowser.openAuth(link, '', { modalPresentationStyle: "fullscreen"})
8
        .then(response => {
9
        // handle user action in auth session
10
        
11
      });
12
    } catch (err) {
13
      console.log(err);
14
    }
15
  }
16
  
17
  messageHandler = (message: any) => {
18
    const data = message.nativeEvent.data
19
    var [command, ...params] = data.split("|")
20
    
21
    // check for correct message content
22
    if(command.includes("ExternalBrowserIntegration")) {
23
      var messageUrl = params[1]
24
      // user selected an OAuth bank
25
      console.log("Trustly URL", messageUrl)
26
      this.openOAuthLink(messageUrl)
27
    }
28
  }
29
  
30
  // render function ommitted for brevity
31
32
}

This example shows a simplified InAppBrowser function. For more information, see the documentation and the API specification for your preferred in-app browser package

Return to the Lightbox

To complete the authentication process, the InAppBrowser.openAuth() function is used to handle the Promise and notify the Trustly Lightbox that the customer has returned from their OAuth session. Within this callback, you add a function to inject the JavaScript that calls the Trustly.proceedToChooseAccount() function in the WebView. For example:

1
import { InAppBrowser } from 'react-native-inappbrowser-reborn';
2
3
class TrustlyWebview extends Component () {
4
  
5
  const postMessageForOauth = `
6
    window.addEventListener(
7
    "message",
8
    function (event) {
9
      var data = (event || {}).data || {}
10
      window.ReactNativeWebView.postMessage(event.data);
11
    },
12
    false
13
    );
14
  `;
15
16
	openOAuthLink = async link => {
17
	  try {
18
			await InAppBrowser.openAuth(link, '', { modalPresentationStyle: "fullscreen"})
19
				.then(response => {
20
					if (response.type === 'success') {
21
						// notify Trustly object of user return
22
			      this.webview.injectJavaScript('window.Trustly.proceedToChooseAccount();');
23
			    } else {
24
						console.log(response);
25
				});
26
	  } catch (err) {
27
	    console.log(err);
28
	  }
29
	}
30
	
31
	//messageHandler ommitted for brevity
32
33
	render(){
34
		return (
35
	    <WebView 
36
	      source={{ uri: 'https://myapp.com/checkout' }}
37
	      javaScriptEnabled=&#123;true&#125;
38
        injectedJavaScript=&#123;postMessageForOauth&#125;
39
	      startInLoadingState
40
        onMessage={this.messageHandler}
41
	    />);
42
	}  
43
}