Experimental

Personal Loans Web Wrapper SDK Integration Guide (Experimental)

Overview

The Experimental approach delivers the Personal Loans marketplace flow as an embedded widget, sharing one implementation across multiple tech stacks. Pick your stack in the tabs below. Each tab covers installation, prerequisites, the core configuration props (channel, zone, productTypes), and a basic usage example.

This approach is experimental while we finalize the cross-stack API. For production React Native integrations today, we recommend the Recommended approach.

You'll need the correct channel and zone values for your integration. Ask your Partner Manager to provide these values for Personal Loans.

Before you start, request an API token from your Partner Manager. It authenticates with the Engine API and is required to use the Prefill API. You may want multiple tokens depending on how many entry points your app has into the SDK.

Getting Started

Requirements

React Native

Install

Install the SDK from npm using your package manager:

npm install --save @moneylion/react-native-web-wrapper
yarn add @moneylion/react-native-web-wrapper

Initialize

Import the WebWrapper component into any file where you want to render the Engine flow:

import { WebWrapper, ApiModels } from '@moneylion/react-native-web-wrapper';

Basic Example

<WebWrapper
  channel="your-channel"
  zone="your-zone"
  productTypes={[ApiModels.ProductType.Loan]}
  onExit={() => {
    // handle exit / navigation
  }}
  // ...optional event handlers, see Event Handlers
/>

Properties

Prop

Type

Required

Description

channel

string

Yes

Identifies your integration in Engine. Provided by your Partner Manager (e.g. 'direct').

zone

string

Yes

Identifies the placement or distribution surface for the SDK. Provided by your Partner Manager (e.g. 'marketplace').

productTypes

ApiModels.ProductType[]

Yes

Product flow(s) to render. Use [ApiModels.ProductType.Loan] for Personal Loans.

bearerToken

string

For prefill

API token from your Partner Manager. Required to use the Prefill API. Without it, the standard non-prefilled flow renders.

isDev

boolean

When true, the SDK targets Engine's dev/staging hosts. Defaults to false (production).

style

ViewStyle

Style applied to the underlying view, e.g. {{ height: '100%' }}.

personalInformation, loanInformation, mortgageInformation, creditInformation, financialInformation, employmentInformation, legalInformation, educationInformation

Lead*Information

Prefill data. See Prefill Lead Data.

clientTags

Record<string, string[]>

Reporting/attribution tags. See Client Tags.

onExit

OnExitCallback

Yes

Fired when the user exits the flow.

onInitialize, onCreate, onUpdate, onNavigate, onSubmit, onRateTableRender, onOfferClick, onErrorPageView, onErrorPageRetry, onEmbedError, onEmbedErrorRetry

(props) => void

Optional tracking hooks. See Event Handlers.

Requirements

Flutter 3.0.0 or higher
Dart 3.10.7 or higher

Install

Install the SDK via pub get:

flutter pub add engine_mobile_flutter_sdk

Note: This installs the latest compatible SDK version. For a specific version, pin it explicitly in pubspec.yaml.

Initialize

Add the following imports to any Dart file where you want to use the SDK. The second import exposes the prefill data models (aliased as engine to avoid name collisions with Flutter):

import 'package:engine_mobile_flutter_sdk/engine_mobile_flutter_sdk.dart';
import 'package:engine_mobile_flutter_sdk/api_models.dart' as engine;

Basic Example

Place the EngineSDK widget anywhere in your widget tree to render the Personal Loan flow.

EngineSDK(
  channel: 'your-channel',
  zone: 'your-zone',
  productTypes: const [engine.ProductType.loan],
  onExit: (_) {
    debugPrint("Exit triggered from SDK");
    Navigator.pop(context);
  },
  // ...optional event handlers, see Event Handlers
)

Properties

Prop

Type

Required

Description

channel

String

Yes

Identifies your integration in Engine. Provided by your Partner Manager (e.g. 'direct').

zone

String

Yes

Identifies the placement or distribution surface for the SDK. Provided by your Partner Manager (e.g. 'marketplace').

productTypes

List<ProductType>

Yes

Product flow(s) to render. Use [engine.ProductType.loan] for Personal Loans.

bearerToken

String

For prefill

API token from your Partner Manager. Required to use the Prefill API. Without it, the standard non-prefilled flow renders.

personalInformation, loanInformation, mortgageInformation, creditInformation, financialInformation, employmentInformation, legalInformation, educationInformation

Lead*Information(Json)

Prefill data. See Prefill Lead Data.

clientTags

Map<String, List<String>>

Reporting/attribution tags. See Client Tags.

onExit

OnExitCallback

Yes

Fired when the user exits the flow.

onInitialize, onCreate, onUpdate, onNavigate, onSubmit, onRateTableRender, onOfferClick, onErrorPageView, onErrorPageRetry, onEmbedError, onEmbedErrorRetry

Callbacks

Optional tracking hooks. See Event Handlers.

User Experience Demo

The SDK renders a complete Personal Loans journey inside your app. It collects any missing user inputs, submits the lead, and then displays offers.

Typical flow:

Landing screen
Loan and personal details form
Review / confirm details
Offer results

PreviousEvent Handlers for Real-Time Tracking NextPrefill Lead Data

Last updated 8 hours ago

Was this helpful?