Vue.js Setup

Import our sdk in your head tag to access our functions.

<head>
  <script src="https://embedded.riamoneytransfer.com/sdk/rmtsso_sdk.min.js"></script>
</head>

Add in a new div with a unique Id attribute, where you want to launch the Ria application.

<template>
  <div id="rmt_container"></div>
</template>

Create a basic setup with no details:

<script setup>
import { onMounted } from "vue";

var ssoToken = null;
var elementId = "rmt_container";
var userData = null;
var tokenCallback = null;
var checkLoggedInCallback = null;
var ssoParams = null;

onMounted(() => {
  setupRmtSso(
    ssoToken,
    elementId,
    userData,
    tokenCallback,
    checkLoggedInCallback,
    ssoParams
  );
});
</script>

That’s all – the embedded Ria Money Transfer web application has been set up! Calling setupRmtSso() will load Ria within the container provided. No additional data needs to be supplied and users will automatically start with the Ria registration flow.

When a new user registers in embedded Ria, a SSO token will be created automatically that needs to be handled by you.

The code below shows how to supply a callback function as the tokenCallback argument.

function handleNewToken(token: string) {
  //save your token securely
  postRequestToYourServerToSaveToken(token);
  // track with analytics provider
  analytics.track("Saved token", {
    token: token,
  });
};
...
const ssoObject = setupRmtSso(
  'initial-token',
  'sso-container-id',
  {},           // userData
  handleNewToken // tokenCallback
);

The token will be received in the callback and you can setup custom handling to process it how you choose.

Next, the SSO token must be stored SECURELY in your user management system it can be retrieved later when the same user accesses the embedded Ria application again.

Once you’ve set up your token callback and the user has logged in once, you can retrieve the current user’s SSO token from your secure saved location and pass it to the SDK. That can be done by supplying the ssoToken argument, like in this snippet:

var ssoToken = getRequestToYourServerForToken() // returns "Xh721ilsdß0ajk...";

Now, SSO has been fully setup. When an SSO token is supplied to the SDK, the Ria Money Transfer application will verify it and automatically login the user.

To make the registration process smoother, we recommend supplying user data you have stored so that it can be automatically used by Ria during registration and match across accounts.

To transfer user data to the SDK, pass an object of it to the userData argument like in the example below.

var userData = {
  email: "test@test.com",
  firstName: "First",
  lastName: "Last",
  dateOfBirth: "1999-12-25",
  phoneNumberCountry: "1",
  phoneNumber: "5152901234",
  street: "Street",
  city: "City",
  postalCode: "12345",
  state: "AL",
};

The user should only remain logged in the embedded Ria application whilst they are also logged in to the parent site. To do this, we provide a checkLoggedInCallback parameter, which is a function you can supply to the SDK that returns true if the user is logged in to your parent app.

checkLoggedInCallback = (action: string) => {
  // perform a check to see if the user is logged in to your parent app
  var userIsLoggedIn = yourCheckIfUserIsLoggedInFn();
  return userIsLoggedIn; // return true if user is logged in to parent app
};

We call checkLoggedInCallback on 3 separate occasions, with each occassion having a different action:

• Check: Every 20 seconds to ensure the user has not been logged out of your parent site.
• Require: When our embedded app requires the user to be logged in to your parent app, for example, when we create the ssoToken.
• Refresh: The RMT app session has expired so we are refreshing the whole sdk, checking authentication is still valid while refreshing.

We provide a simple log out function that you can call any time you wish to log the user out of the embedded application, for example, during a log out function on the parent site.

let ssoObject: any;
// during setup

ssoObject = setupRmtSso(
  ssoToken,
  elementId,
  userData,
  tokenCallback,
  checkLoggedInCallback
);

// when you want to perform a log out

ssoObject.logout();

You may need to provide additional information to the SDK if you require further platform customization, such as language localization. To pass extra parameters to the SDK, create an object of them as the ssoParams argument like in this snippet:

var ssoParams = {
  language: "es-ES",
  ...
};

The optional parameter types:

• language: string The language to be used in the embedded application. The default is English (en-US).
• packageName: string The name of the package where the theme will be used - for mobile apps only.
• onCallback: (data?: unknown) => void
• onEvent: (data?: unknown) => void
• disableLogoClick: boolean (default false)
• customLogoClick: boolean (default false)
• nativePlaidSheet: boolean (default false) For iOS apps that open Plaid in a native ASWebAuthenticationSession sheet — see Step 11.

These are the currently supported languages:

The package name parameter is used for mobile apps that use builds, so that we may identify the partner and apply the correct branding and theming.

For your custom logo click, if set true, the Ria app will perform a custom action that you have outlined in the onEvent callback. The event will be triggered when the user clicks on the navigation logos in the embedded app.

If you set disableLogoClick to true, the Ria app will not perform any action when the user clicks on the navigation logos in the embedded app. This is useful if you want to prevent the user from navigating away from the embedded app.

The onCallback parameter passes a function that is triggered at certain events. At the moment there is only one event that calls the partner call back - checking the available balance of the partner’s wallet during a transaction.

If you are using the SDK within an iOS application, you will need to enable local storage. Add the following code into your iOS application to activate local storage.

webConfiguration.websiteDataStore = WKWebsiteDataStore.default();

When a user adds a bank account, the embedded Ria app opens Plaid for verification. Plaid’s bank login flow navigates the whole webview away from your page, which destroys the embedded session — the user returns to a logged-out screen instead of their transfer.

To prevent this on iOS, open Plaid in a system ASWebAuthenticationSession sheet instead of letting it navigate your webview. The sheet runs on top of your app, your page and the embedded session stay alive underneath, and the flow resumes exactly where the user left off.

Two changes are required in your integration:

1. Declare the nativePlaidSheet parameter in your ssoParams so Ria issues the correct completion redirect for the sheet:

var ssoParams = {
  nativePlaidSheet: true,
};

2. Add the following to your iOS app (the view controller that owns the webview hosting our SDK):

import AuthenticationServices

// Keep a strong reference while the sheet is open.
private var plaidAuthSession: ASWebAuthenticationSession?

func webView(_ webView: WKWebView,
             decidePolicyFor navigationAction: WKNavigationAction,
             decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
    // Divert Plaid into a system auth sheet so the webview never navigates away.
    if let url = navigationAction.request.url,
       let host = url.host?.lowercased(),
       host.hasSuffix("plaid.com") {
        decisionHandler(.cancel)
        openPlaidAuthSession(url: url)
        return
    }
    decisionHandler(.allow)
}

private func openPlaidAuthSession(url: URL) {
    let session = ASWebAuthenticationSession(url: url, callbackURLScheme: "riasso") { [weak self] _, _ in
        // Fires when Plaid finishes (riasso:// redirect) or the user closes the sheet.
        DispatchQueue.main.async {
            self?.plaidAuthSession = nil
            self?.resumePlaidCompletion()
        }
    }
    session.presentationContextProvider = self
    plaidAuthSession = session
    session.start()
}

private func resumePlaidCompletion() {
    // Tell the Ria SDK that Plaid finished so the embedded app can complete adding the bank account.
    webView.evaluateJavaScript("window.rmtSsoResumePlaid && window.rmtSsoResumePlaid()")
}

extension YourViewController: ASWebAuthenticationPresentationContextProviding {
    func presentationAnchor(for session: ASWebAuthenticationSession) -> ASPresentationAnchor {
        return view.window ?? ASPresentationAnchor()
    }
}

How it works:

• Intercepting plaid.com: the webview cancels the Plaid navigation and opens the same URL in the system sheet, so your page — and the user’s session — never unloads.
• rmtSsoResumePlaid(): provided by the Ria SDK. The embedded app was never navigated, so it does not know Plaid finished; this call resumes the flow and completes the bank account setup.
• presentationContextProvider: mandatory on iOS 13+. It tells iOS which window to present the sheet from — without it, the session fails to start.
• The riasso callback scheme: does not need to be registered in your Info.plist. It is private to the auth session; when Plaid redirects to riasso://… the sheet closes automatically and the completion handler fires.
• Covers all Plaid flows: the same code handles both adding a new bank account and re-verifying an existing one — no additional changes per flow.

<head>
    <script src="https://embedded.riamoneytransfer.com/sdk/rmtsso_sdk.min.js"></script>
</head>

<template>
    <div id="rmt_container"></div>
</template>
<script setup>
import { onMounted } from "vue";

var ssoToken = null;
var elementId = "rmt_container";
var userData = null;
var tokenCallback = null;
var checkLoggedInCallback = null;
var ssoParams = null;

onMounted(() => {
setupRmtSso(
    ssoToken,
    elementId,
    userData,
    tokenCallback,
    checkLoggedInCallback,
    ssoParams
);
});
</script>
<style scoped>
#rmt_container {
    height: 100vh !important;
}
</style>

<script>
    import RiaSetupComponent from "./RiaSetupComponent.vue";
</script>
<template>
    <RiaSetupComponent />
</template>