Mobile SDK

How to get started with an Engine by MoneyLion marketplace Mobile SDK integration for Personal Loans

Welcome to Engine by MoneyLion’s React Native SDK Integration Guide. This document provides the necessary steps to seamlessly integrate the Engine SDK into your React Native application. With this SDK, you can effortlessly connect to Engine by MoneyLion’s network, authenticate with the Engine API, and provide users access to a variety of financial institutions. The guide covers software requirements, installing and initializing the SDK, and leveraging its customizable features to optimize the user journey. Finally, there are sample screenshots of how the SDK looks (which may vary depending on your color customizations).

Screenshot of Engine Mobile SDK: Splash Page

Setup Instructions

Step 1: Request an API token

Before you can use the Engine SDK, you’ll need to request an API token from your Partner Manager. This is used to authenticate with the Engine API and provides access to different financial institutions. You may want to use multiple API tokens depending on how many entry points your app has into the SDK.

Step 2: Confirm Software Requirements

Requirements:

• React Native

Package Size:

• SDK Bundle Size: 1.27MB Unpacked

Step 3: Install the SDK

Install the SDK from npm using the command using your package manager, e.g.

• npm install –save @moneylion/react-native-engine-sdk

• yarn add @moneylion/react-native-engine-sdk

Step 4: Initialize the SDK

In your app, you’ll need to initialize the SDK by rendering its React component. As props, you’ll need to pass your provided bearer token (Step 1 - request a token from your Partner Manager), the Engine endpoint you’re connecting to, and any information you already have about the user if you don’t want the user to enter it again. See the example below:

<EngineSdk
    bearer="{your_token}"
    endpoint="https://api.engine.tech"
    primaryColor=”#11aa34”
    secondaryColor=”#444444”
    prefilledData={/* any data you don't want to ask for again */}
    clientTags={{ “userTrackingId”: [“80”] }}
    onInitialize={(storedLeadUuid, storedLeadData) => { /* handler */ }}
    onCreate={(leadUuid, leadData, page, editingPage) => { /* handler */ }}
    onUpdate={(leadUuid, leadData, page, editingPage) => { /* handler */ }}
    onNavigate={(leadUuid, leadData, currentPage, nextPage, editingPage) => { /* handler */ }}
    onSubmit={(leadUuid, leadData) => { /* handler */ }}
    onExit={() => { /* handler */ }}
/>

How it Works

Implementation/Prefilled Data

There are certain fields that must be provided to the Engine SDK component on initialization:

• API endpoint

• Bearer token

• Required prefilled data (the Engine SDK does not ask for these 3 fields):

  • First name

  • Last name

  • Email address

Beyond those, you can pass any other information you have already collected, so the user isn’t asked for it again. Instructions here:

Mobile SDK - Prefilling Lead Data

You can also pass any unique identifiers (userid, campaign, etc) you want for attribution/tracking as Client Tags. Instructions here:

Adding Your Client Tags to Reporting for Mobile SDK Integrations

User Flow

When the EngineSdk component is rendered, it will first determine how much information it needs to ask from the user (if not provided in prefilledData). It will then present the user with a splash screen explaining the process to them. When they continue, if all info is prefilled, they are taken directly to the summary screen with their info and can immediately submit to see their offers. Otherwise, they navigate through subsequent screens to collect any missing information, before being presented with the summary screen. From the summary screen, the user is able to correct any info* before submitting it and receiving their offers.

*Note: only info submitted directly by the user can be edited; prefilledData cannot be edited at this time. If firstName/lastName/email or other `prefilledData` fields need to be updated, that should be done in the host app, not the SDK data capture.

At each step through the loan form, the information is saved to the phone and an attempt is made to submit it to the Engine API (updating lead info to track progress/dropoff). If no network is available, the SDK will proceed to the next step without submitting to the Engine API. A network is only required for the final step of submitting the form and receiving offers.

User dropoff and reentry

Any time a user exits and re-enters the Engine Mobile SDK, they will restart at the same point they were before they exited the SDK.

• If a user was in the middle of the form but did not submit, they will start back on that step (and all previously entered info will be retrieved from local storage so they will not need to enter it again).

• If a user submitted a form and saw offers before exiting, the next time they re-enter the SDK (within the offer expiration period of 31 days), they will be directed back to their offer screen. If offers have expired (>31 days later), they will start at the beginning of the form (save for any prefilled info that will be skipped).

Offer expiration

Offers will expire 31 days after initially received by the user. Any time within the valid period, users re-entering the SDK will see the same available offers (consumers are unlikely to have material changes to their credit worthiness within that period, which is why offers are cached for that time duration). Users entering the SDK >31 days after they initially received those offers will start the form again as a new lead (minus any prefilled info).

Customization

You can also customize some of the branding by changing the primary and secondary colors to match your own brand. use the primaryColor and secondaryColor attributes to accomplish this.

*Dark mode is not currently available in the Engine Mobile SDK . This will be coming in a future update.

Screenshots of sample SDK Implementation

Note: any screen where that info is prefilled will be skipped.