This example application demonstrates how the Trustly UI can be integrated with a React Native app. In addition to this example, also see the Trustly developer docs for React Native apps.

git clone git@github.com:TrustlyInc/trustly-react-native-example.git

cd trustly-react-native-example && npm install
cd ios && pod install

npm start or npx react-native start (if you don't have react-native-cli installed)

For React Native integrations, set the integrationContext parameter to InAppBrowserNotify within the establishData object, as shown in the example below:

let establishData = {
  ...
  metadata:{
    integrationContext: "InAppBrowserNotify",
    ...
  },
  ...
};

With the integrationContext parameter set appropriately, when an OAuth bank is selected in the Trustly Lightbox, a message will be triggered and must be captured by the onMessage attribute of the WebView, as shown in the example below and in the App.tsx file:

<WebView
  ...
  onMessage={this.handleOAuthMessage}
  ...
/>

The function provided in onMessage will receive a message containing a URL, which must be opened in an in-app browser, as shown in the example below and in the App.tsx file:

handleOAuthMessage = (message: any) => {
  const data = message.nativeEvent.data

  if ( typeof data !== 'string') return;

  var [command, ...params] = data.split("|");

  if(command.includes("ExternalBrowserIntegration")) {
    var messageUrl = params[1]

    if( shouldOpenInAppBrowser(messageUrl) ) {
      this.openLink(messageUrl);
    }
  }
}

When the application receives some action like in-app-browser-rn (or any name that you defined in the urlScheme), it will call your target Activity with some flags, and reload it.

The example below is from RedirectActivity:

Intent intent = new Intent(getApplicationContext(), MainActivity.class);
intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP | Intent.FLAG_ACTIVITY_SINGLE_TOP);
startActivity(intent);
finish();

<activity
  android:name=".RedirectActivity"
  android:exported="true">
    <intent-filter>
      <action android:name="android.intent.action.VIEW" />
      <category android:name="android.intent.category.DEFAULT" />
      <category android:name="android.intent.category.BROWSABLE" />
      <data android:scheme="in-app-browser-rn" />
    </intent-filter>
</activity>

Trustly UI offers two types of user experiences that can be configured to fit your application. The primary method is to render the Select Bank Widget (shown below) which allows users to quickly search for and select a bank to begin the authorization process. See the Trustly UI docs for more details.

In this case, we need to prevent the Select Bank Widget from calling the Lightbox immediately when the user selects a bank, as we first need to obtain the amount value to populate the establishData. To achieve this, we need to add a piece of JavaScript inside the Select Bank Widget, as shown in the trustly.tsx file.

const TrustlyWidgetBankSelected = (data) => {
  return false;
}

Trustly.selectBankWidget(establishData, TrustlyOptions, TrustlyWidgetBankSelected);

Now, implement a way in the WebView to handle the three events triggered by the Select Bank Widget and Lightbox: user selects a bank, user cancels the authorization, and the user completes the authorization.

• Bank selection event (PayWithMyBank.createTransaction): In this demonstration app, after selecting the bank, we redirect the user to the authentication page.

handlePaymentProviderId(data: string) {
  if (data.startsWith('PayWithMyBank.createTransaction')) {
    let splitData = data.split('|')

    this.establishData.amount = this.state.amount;
    this.establishData.paymentProviderId = splitData[1];

    this.goToAuthBankSelected();
  }
}

goToAuthBankSelected = () => {
  this.setState({ step: 'lightbox' });
}

• Close or cancel event (close|cancel|):

handleWithCancelOrClose(data: string) {
  if(data.endsWith('close|cancel|')) {
    this.setState({ step: 'widget' });
  }
}

• Finish authorization event (PayWithMyBank.closePanel|):

handleClosePanelSuccess(data: string) {
  if (data.startsWith('PayWithMyBank.closePanel|')) {
    let returnValues = data.split('|')[1];
    let returnParameters = returnValues.split('?')[1];

    this.setState({
      returnParameters: returnParameters,
      step: 'success'
    });

  }
}

This example project can be run entirely as a frontend app in order to quickly test basic Trustly functions. However, your application will likely require backend integration with Trustly as well. Check out our trustly-nestjs-example project to learn more and follow the steps below to integrate it with this app.

Documentation: Securing Requests

1. Clone and run the trustly-nestjs-example, in case you don't have a request signature server set
2. Add the request signature endpoint (e.g. http://localhost:8080/signature in the NestJS Example) into the SIGNATURE_API_URL variable of the env.ts file
3. Uncomment the getRequestSignature code snippet in the trustly.tsx file
4. Run your app

You can participate in this project by submitting bugs and feature requests in the Issues tab. Please, add @lukevance as an assignee.

If you are interested in fixing issues and contributing directly to the code base, feel free to open a Pull Request with your changes. Please, make sure to fulfill our Pull Request Template and add @lukevance as code reviewer.