Skip to main content

Operator Managed Plaid Integration on React Native (not recommended)

Introduction​

This is an alternate solution for an operator to handle the Plaid redirect back to a native iOS app instead of allowing Pavilion to handle this. The VIP Connect web component can be displayed in a web experience or a native mobile app. If displaying the web component in a native app and also enableding Plaid, there are specific considerations with the Plaid OAuth integration. If the operator is displaying the web component inside a web experience then the below does not apply.

note

The examples below are for React Native. However, similar steps must be taken regardless of what Javascript framework was used to build the native app

Example - WebView​

In this example, a React Native UI uses an embedded webview (react-native-webview) to show the Web Componment.

When the user selects “Connect To Your Bank Account” and then taps “Continue to Login”, the Web Componment navigates to a url containing “oauth-login”, the URL for authenticating with Plaid. When the webview property onShouldStartLoadWithRequest detects navigation to that path, it opens to a new React Native webview with the “oauth-login” url. For clarity, the two WebViews in screenshots below have different titles: “Transaction” for the Web Componment and “Plaid Transaction” for Plaid.

Deposit

Web Componment Webview​

// Web Componment Webview
import WebView from "react-native-webview";
export default function WebComponmentWebview () {
return <WebView
  // ...other properties
   onShouldStartLoadWithRequest={(event) => {
     if (event.url.includes("oauth-login")){
       navigation.navigate(PLAID_TRANSACTION_ROUTE, { uri: event.url })
       return false;
     } else {
       return true;
     }
   }}
   source={{
     uri: route // something like "oauth-login.example.plaid.com"
   }}
 />
}

Plaid Webview​

There is no need to implement onShouldStartLoadWithRequest in the Plaid WebView because the user will navigate back to the Web Componment with the WebView’s back button after Plaid authentication is completed. The URI for the Plaid WebView comes from the event property in onShouldStartLoadWithRequest in the Web Componment WebView.

// Plaid Webview
import WebView from "react-native-webview";
export default function PlaidWebview (route: string) {
return <WebView
  // ...other properties
   source={{
     uri: route // something like "oauth-login.example.plaid.com"
   }}
 />
}

Success Page​

Once the user goes through all the steps to authenticate with plaid, a success page is displayed with instructions to “Click the back button” in the current webview. Once the user taps the back button, the app returns to the Web Componment in the previous webview. After a few more selections in the Web Componment, the Web Componment is authenticated with the user’s bank, and the user is able to make a deposit.

Deposit

Example - New Window​

In this example, a React Native UI uses an embedded webview to show the Web Componment while Plaid is opened in a new window.

  1. Operator creates an apple-app-site-association file and hosts it on a public site.

  2. Operator configures their native app to leverage the apple-app-site-association file.

  3. Share the universal links defined in the apple-app-site-association file with VIP Connect team.

  4. The shared universal link(s) are registered in Plaid portal for verification and generating link token to launch the Web Componment.

  5. When launching the Web Componment, add universal link as a plaidRedirect URL attribute to the URL as below –

    Production: https://api-gaming.paviliononline.io/sdk?mode=deposit&plaidRedirectUrl=https://somesite.com#session-id

    Cert: https://cert.api-gaming.paviliononline.io/sdk?mode=deposit&plaidRedirectUrl=https://somesite.com#session-id

  6. Plaid generates a link token based on the plaidRedirectUrl provided in the URL above which is then used to launch Plaid Screen.

  7. Once successful login and account mapping, Plaid will redirect to the URL set in the plaidRedirectUrl attribute.

  8. The universal link provided in the plaidRedirectUrl can be the mobile path of the Web Componment on the Parent Site or any other page where redirection is handled at parent site.