Javascript Setup
Embedded with JavaScript
Section titled “Embedded with JavaScript”Step 1: Import the SDK
Section titled “Step 1: Import the SDK”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>Step 2: Attach Ria to the page
Section titled “Step 2: Attach Ria to the page”We need to be able to attach to your application somewhere, so add in a new div and identifiable id where you us located.
<div id="rmt_container"></div>Step 3: Set up the embedded application
Section titled “Step 3: Set up the embedded application”Create a basic setup with no details
var ssoToken = null;var elementId = "rmt_container";var userData = null;var tokenCallback = null;var checkLoggedInCallback = null;var ssoParams = null;setupRmtSso( ssoToken, elementId, userData, tokenCallback, checkLoggedInCallback, ssoParams);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.
Configuration
Section titled “Configuration”Step 4: Handle the SSO Token
Section titled “Step 4: Handle the SSO Token”When a new user registers in embedded Ria, a SSO token will be created automatically that needs to be handled by you.
Callback
Section titled “Callback”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.
Step 5: Pass the SSO token to the SDK
Section titled “Step 5: Pass the SSO token to the SDK”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.
User Data
Section titled “User Data”Step 6: Registration
Section titled “Step 6: Registration”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",};| Property | Type | Validation Rules |
|---|---|---|
stringmin: 1, max: 50 | Conditional or Mandatory without phone number Must contain ’@’, ‘.com/.co’ | |
| firstName | stringmin: 1, max: 50 | International characters allowed |
| lastName | stringmin: 1, max: 50 | International characters allowed |
| dateOfBirth | datemin: 8, max: 10 | Vary based on country of origin |
| phoneNumberCountry | stringmin: 1, max: 3 | Country code numeric |
| phoneNumber | stringmin: 1, max: 10 | Conditional or Mandatory without email |
| street | stringmin: 2, max: 100 | Alphanumeric + symbols |
| city | stringmin: 2, max: 50 | |
| postalCode | stringmin: 4, max: 8 | Vary based on country of origin |
| state | stringmin: 2, max: 30 | Vary based on country of origin |
Step 7: Verifying User Login
Section titled “Step 7: Verifying User Login”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.
Step 8: User Log out
Section titled “Step 8: User Log out”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.
// during setup
ssoObject = setupRmtSso( ssoToken, elementId, userData, tokenCallback, checkLoggedInCallback);
// when you want to perform a log out
ssoObject.logout();Step 9: Optional Parameters
Section titled “Step 9: Optional Parameters”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:
stringThe language to be used in the embedded application. The default is English (en-US). - packageName:
stringThe name of the package where the theme will be used. - 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 nativeASWebAuthenticationSessionsheet — see Step 11.
Language
Section titled “Language”These are the currently supported languages:
| Language | Code |
|---|---|
| English American | en-US |
| English | en-GB |
| Spanish American | es-US |
| Spanish | es-ES |
| Danish | da-DK |
| German | de-DE |
| French Canadian | fr-CA |
| French | fr-FR |
| Italian | it-IT |
| Lithuanian | lt-LT |
| Dutch | nl-NL |
| Norwegian | nb-NO |
| Portuguese | pt-PT |
| Finnish | fi-FI |
| Swedish | sv-SE |
Package Name
Section titled “Package Name”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.
Custom Logo Click and onEvent
Section titled “Custom Logo Click and onEvent”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.
Disable Logo Click
Section titled “Disable Logo Click”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.
On Callback
Section titled “On Callback”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.
Local Storage - iOS only
Section titled “Local Storage - iOS only”Step 10: iOS local storage
Section titled “Step 10: iOS local storage”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();If you are using the SDK in a web application or an Android app, you can skip this step.
Bank Verification - iOS only
Section titled “Bank Verification - iOS only”Step 11: iOS native Plaid sheet
Section titled “Step 11: iOS native Plaid sheet”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
riassocallback scheme: does not need to be registered in your Info.plist. It is private to the auth session; when Plaid redirects toriasso://…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.
This step only applies when the SDK runs inside an iOS application and your users add bank accounts through Plaid. Web and Android integrations can skip it.
Put it all together
Section titled “Put it all together”<head> <!-- ...other scripts here --> <script src="https://embedded.riamoneytransfer.com/sdk/rmtsso_sdk.min.js"></script></head>//keep id consistent with div idvar elementId = "rmt_container";
//retrieve token from where it has been saved, or default to nullvar ssoToken = yourGetSsoTokenFn();
//retrieve the userData you have on file from your own sign up processvar userData = yourGetUserDataFn();
// process your returned token herevar tokenCallback = (token) => { //e.g. save token to session storage};
//process login statusvar checkLoggedInCallback = () => { //e.g. call ssoObject.logout() if required};
//optional paramsvar ssoParams = { language: "es-ES", // packageName: "com.example.app", // mobile apps: applies your partner theme (Step 9) // nativePlaidSheet: true, // iOS apps only — requires the native setup from Step 11};
var ssoObject = setupRmtSso( ssoToken, elementId, userData, tokenCallback, checkLoggedInCallback, ssoParams);