Credit Cards

Credit Cards Mobile SDK Integration Guide (Web Wrapper)

Overview

The Credit Cards vertical is delivered through Engine's Web Wrapper SDK, available 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.

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

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.CreditCard]}
  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.CreditCard] for Credit Cards.

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, financialInformation, creditInformation, creditCardInformation

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 Credit Cards flow.

EngineSDK(
  channel: 'your-channel',
  zone: 'your-zone',
  productTypes: const [engine.ProductType.creditCard],
  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.creditCard] for Credit Cards.

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, financialInformation, creditInformation, creditCardInformation

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.