Trustly React Native Example

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.

Getting Started

1. Clone this repository

git clone [email protected]:TrustlyInc/trustly-react-native-example.git

2. Install dependencies

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

3. Copy the env.example.ts file to a new env.ts file and fill out your environment variables

4. Start the app!

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

How it works

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

Closing Chrome Custom Tabs on Android

RedirectActivity

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

AndroidManifest

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

How to integrate native components with Trustly WebView

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

  }
}

Server Side Features

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.

Request Signature

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

Contributing

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.