> For the complete documentation index, see [llms.txt](https://even-financial.gitbook.io/developer-center/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://even-financial.gitbook.io/developer-center/embeddable-integrations/mobile-sdks/credit-cards.md).

# Credit Cards

## 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.

{% hint style="info" %}
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.
{% endhint %}

## Getting Started

{% tabs %}
{% tab title="React Native" %}

### 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:

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

### Basic Example

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

### Properties

<table><thead><tr><th width="220">Prop</th><th width="220">Type</th><th width="130">Required</th><th>Description</th></tr></thead><tbody><tr><td><code>channel</code></td><td><code>string</code></td><td>Yes</td><td>Identifies your integration in Engine. Provided by your Partner Manager (e.g. <code>'direct'</code>).</td></tr><tr><td><code>zone</code></td><td><code>string</code></td><td>Yes</td><td>Identifies the placement or distribution surface for the SDK. Provided by your Partner Manager (e.g. <code>'marketplace'</code>).</td></tr><tr><td><code>productTypes</code></td><td><code>ApiModels.ProductType[]</code></td><td>Yes</td><td>Product flow(s) to render. Use <code>[ApiModels.ProductType.CreditCard]</code> for Credit Cards.</td></tr><tr><td><code>bearerToken</code></td><td><code>string</code></td><td>For prefill</td><td>API token from your Partner Manager. Required to use the Prefill API. Without it, the standard non-prefilled flow renders.</td></tr><tr><td><code>isDev</code></td><td><code>boolean</code></td><td>No</td><td>When <code>true</code>, the SDK targets Engine's dev/staging hosts. Defaults to <code>false</code> (production).</td></tr><tr><td><code>style</code></td><td><code>ViewStyle</code></td><td>No</td><td>Style applied to the underlying view, e.g. <code>{{ height: '100%' }}</code>.</td></tr><tr><td><code>personalInformation</code>, <code>financialInformation</code>, <code>creditInformation</code>, <code>creditCardInformation</code></td><td><code>Lead*Information</code></td><td>No</td><td>Prefill data. See <a href="/pages/bk4sJGnjW48JE8zxvvdy">Prefill Lead Data</a>.</td></tr><tr><td><code>clientTags</code></td><td><code>Record&#x3C;string, string[]></code></td><td>No</td><td>Reporting/attribution tags. See <a href="/pages/yaI5IyeBFgYa7zn4q2g5">Client Tags</a>.</td></tr><tr><td><code>onExit</code></td><td><code>OnExitCallback</code></td><td>Yes</td><td>Fired when the user exits the flow.</td></tr><tr><td><code>onInitialize</code>, <code>onCreate</code>, <code>onUpdate</code>, <code>onNavigate</code>, <code>onSubmit</code>, <code>onRateTableRender</code>, <code>onOfferClick</code>, <code>onErrorPageView</code>, <code>onErrorPageRetry</code>, <code>onEmbedError</code>, <code>onEmbedErrorRetry</code></td><td><code>(props) => void</code></td><td>No</td><td>Optional tracking hooks. See <a href="/pages/DSFe4UpqLY5fGL0TJ5B0">Event Handlers</a>.</td></tr></tbody></table>
{% endtab %}

{% tab title="Flutter" %}

### Requirements

* Flutter 3.0.0 or higher
* Dart 3.10.7 or higher

### Install

Install the SDK via pub get:

```yaml
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):

```dart
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.

```dart
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

<table><thead><tr><th width="220">Prop</th><th width="220">Type</th><th width="130">Required</th><th>Description</th></tr></thead><tbody><tr><td><code>channel</code></td><td><code>String</code></td><td>Yes</td><td>Identifies your integration in Engine. Provided by your Partner Manager (e.g. <code>'direct'</code>).</td></tr><tr><td><code>zone</code></td><td><code>String</code></td><td>Yes</td><td>Identifies the placement or distribution surface for the SDK. Provided by your Partner Manager (e.g. <code>'marketplace'</code>).</td></tr><tr><td><code>productTypes</code></td><td><code>List&#x3C;ProductType></code></td><td>Yes</td><td>Product flow(s) to render. Use <code>[engine.ProductType.creditCard]</code> for Credit Cards.</td></tr><tr><td><code>bearerToken</code></td><td><code>String</code></td><td>For prefill</td><td>API token from your Partner Manager. Required to use the Prefill API. Without it, the standard non-prefilled flow renders.</td></tr><tr><td><code>personalInformation</code>, <code>financialInformation</code>, <code>creditInformation</code>, <code>creditCardInformation</code></td><td><code>Lead*Information(Json)</code></td><td>No</td><td>Prefill data. See <a href="/pages/bk4sJGnjW48JE8zxvvdy">Prefill Lead Data</a>.</td></tr><tr><td><code>clientTags</code></td><td><code>Map&#x3C;String, List&#x3C;String>></code></td><td>No</td><td>Reporting/attribution tags. See <a href="/pages/yaI5IyeBFgYa7zn4q2g5">Client Tags</a>.</td></tr><tr><td><code>onExit</code></td><td><code>OnExitCallback</code></td><td>Yes</td><td>Fired when the user exits the flow.</td></tr><tr><td><code>onInitialize</code>, <code>onCreate</code>, <code>onUpdate</code>, <code>onNavigate</code>, <code>onSubmit</code>, <code>onRateTableRender</code>, <code>onOfferClick</code>, <code>onErrorPageView</code>, <code>onErrorPageRetry</code>, <code>onEmbedError</code>, <code>onEmbedErrorRetry</code></td><td>Callbacks</td><td>No</td><td>Optional tracking hooks. See <a href="/pages/DSFe4UpqLY5fGL0TJ5B0">Event Handlers</a>.</td></tr></tbody></table>
{% endtab %}
{% endtabs %}

## User Experience Demo

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

Typical flow:

1. Landing screen
2. Personal details form
3. Offer results

<div><img src="/files/iAv3ghUelaTmZ2UGZeij" alt="Landing Screen" width="324"> <img src="/files/MbbHmZO4sQUuRxYkTkYd" alt="Personal Details" width="324"></div>

<div><figure><img src="/files/HCnrPHWEIC6nRcOJnZV5" alt="" width="324"><figcaption><p>Personal Details</p></figcaption></figure> <figure><img src="/files/RxFbmRXpxHuCt0fGYgaW" alt="" width="324"><figcaption><p>Personal Details</p></figcaption></figure></div>

<div align="center"><figure><img src="/files/FMUNGTNx0jX6irekNENu" alt="" width="324"><figcaption><p>Personal Details</p></figcaption></figure> <figure><img src="/files/x2uiR7GTt9Mt84RwcmlL" alt="" width="324"><figcaption><p>Personal Details</p></figcaption></figure></div>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://even-financial.gitbook.io/developer-center/embeddable-integrations/mobile-sdks/credit-cards.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.