> 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/flutter/credit-cards.md).

# Credit Cards

## Overview

This documentation covers installation, required prerequisites, configuration properties currently surfaced (channel, zone), the prefill props supported for the Credit Cards product type, and a basic usage example.

## Setup Instructions

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

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

* Flutter 3.0.0 or higher
* Dart 3.10.7 or higher

### Step 3: Install the SDK

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.

### Step 4: Initialize the SDK

In your app, initialize the SDK by adding the following imports to any Dart file where you want to use it. The second import exposes the prefill data models (imported with the `engine` prefix 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, please see Event Handlers section below
)
```

## Properties

Pass these properties to `EngineSDK`:

<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 (the prefill props below). Without it, the standard non-prefilled flow renders.</td></tr><tr><td><code>personalInformation</code></td><td><code>LeadPersonalInformation</code></td><td>No</td><td>Prefill data (see <a href="#prefilling-lead-data">Prefilling Lead Data</a> below).</td></tr><tr><td><code>financialInformation</code></td><td><code>LeadFinancialInformation</code></td><td>No</td><td>Prefill data (see <a href="#prefilling-lead-data">Prefilling Lead Data</a> below).</td></tr><tr><td><code>creditInformation</code></td><td><code>LeadCreditInformationJson</code></td><td>No</td><td>Prefill data (see <a href="#prefilling-lead-data">Prefilling Lead Data</a> below).</td></tr><tr><td><code>creditCardInformation</code></td><td><code>LeadCreditCardInformationJson</code></td><td>No</td><td>Prefill data (see <a href="#prefilling-lead-data">Prefilling Lead Data</a> below).</td></tr><tr><td><code>clientTags</code></td><td><code>Map&#x3C;String, List&#x3C;String>></code></td><td>No</td><td>Arbitrary key/value tags for reporting and attribution.</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 the Event Handlers page.</td></tr></tbody></table>

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

## Prefilling Lead Data

This section describes how to prefill any user data you already have into your Flutter Credit Cards SDK implementation. Prefilled data is grouped into typed information classes and passed directly as props on `EngineSDK`. These models come from the `api_models.dart` import (aliased as `engine`).

Prefilling requires a `bearerToken`. Pass only the fields you have — omitted fields are collected from the user in-flow.

### Example

```dart
EngineSDK(
  channel: 'your-channel',
  zone: 'your-zone',
  bearerToken: '{your_token}',
  productTypes: const [engine.ProductType.creditCard],
  personalInformation: engine.LeadPersonalInformation(
    firstName: 'Bob',
    lastName: 'Dylan',
    email: 'bobdylan@gmail.com',
    dateOfBirth: DateTime(1990, 1, 1),
    primaryPhone: '2325624852',
    address1: '1600 Pennsylvania Avenue',
    address2: 'Apt 2',
    city: 'Washington',
    state: engine.State.DC,
    zipcode: '20500',
  ),
  financialInformation: engine.LeadFinancialInformation(
    annualIncome: 20000,
  ),
  creditInformation: engine.LeadCreditInformationJson(
    providedCreditRating: engine.ProvidedCreditRating.good,
  ),
  creditCardInformation: engine.LeadCreditCardInformationJson(
    cardPurposes: const [
      engine.CardPurpose.balanceTransfer,
      engine.CardPurpose.cashBack,
    ],
  ),
  onExit: (_) {},
)
```

### Type Definitions

The information classes accept the following fields for Credit Cards (all fields optional):

```dart
class LeadPersonalInformation {
  final String? firstName;
  final String? lastName;
  final String? email;
  final DateTime? dateOfBirth;
  final String? primaryPhone; // 10 digits, no "+" or "-" chars
  final String? address1;
  final String? address2; // optional apartment / suite
  final String? city;
  final State? state; // enum, 2-letter (e.g. State.DC)
  final String? zipcode;
}

class LeadFinancialInformation {
  final int? annualIncome; // raw integer value (e.g. 20000)
}

class LeadCreditInformationJson {
  final ProvidedCreditRating? providedCreditRating; // enum below
}

class LeadCreditCardInformationJson {
  final List<CardPurpose>? cardPurposes; // enum below
}
```

### Enums / Accepted Values

Fields backed by an enum must use one of the predefined values:

```dart
enum CardPurpose {
  balanceTransfer,
  cashBack,
  earningRewards,
  improveCredit,
  lowInterest,
  newToCredit,
  student,
  travelIncentives,
}

enum ProvidedCreditRating {
  excellent,
  good,
  fair,
  poor,
  limited,
}

// State is a 2-letter US state enum, e.g. State.CA, State.DC, State.NY
```

{% hint style="warning" %}
Do not prefill any fields that are empty or unavailable — omit them so the user is prompted in-flow. Prefilled data must match the type definitions above, and any field backed by an enum must use a valid value. If a value is invalid, that attribute is stripped and the user will have to enter it again manually.
{% endhint %}

## Client Tags for Reporting

The Engine Flutter SDK supports adding your unique Client Tags to track performance of specific campaigns or users. All Client Tag data is attributed to the lead level.

Client Tags can be added by including a **clientTags** attribute at the top level of the EngineSDK widget, where the value is a **Map\<String, List\<String>>**.

We strongly recommend including only one element per list for ease of reporting and attribution—if you want two separate tags, include the second tag under a different key. There is no limit to the number of keys in the **clientTags** map

### Example

```dart
EngineSDK( 
bearerToken: '{your_token}', 
channel: '{your_channel}', 
zone: '{your_zone}', 
productTypes: const [engine.ProductType.loan], 
personalInformation: engine.LeadPersonalInformation(/* ...any data you don't want to ask for again */), 
clientTags: const { 
'clientId': ['client1'], 
'trafficsource': ['email'], 
'campaignId': ['campaign1'], 
}, 
// ...optional Event Handlers, please see Event Handler section 
)
```

**Note**: Client Tags are only sent as part of a prefill request. You must provide both a `bearerToken` and prefill data (via the information-class props such as `personalInformation`). If no prefill data is supplied, the SDK makes no prefill call and any `clientTags` you pass are ignored.

### Supported Client Tag Keys for Reporting

If you plan for the Engine team to set up reporting (i.e., you do not plan to hit the Analytics API), these are the only keys that are currently fully supported. If a different key is needed, please reach out to your partner manager—we may be able to accommodate, but adding nonstandard keys will increase the time it takes Engine to report Client Tag values back to you and is therefore not recommended.

* agentId
* campaignId
* clientId
* deviceid
* medium
* sourceId
* subid
* subid1
* subid2
* subid3
* target
* trafficsource
* userid

See the [GET Lead Client Tags](https://engine.tech/docs/api-reference/#get-lead-client-tags) endpoint for information on attributing lead analytics to your own client tags, if you decide to hit the Analytics API for reporting.

## Event Handlers Implementation

{% content-ref url="/pages/hseQLi613mnndOXekby4" %}
[Event Handlers](/developer-center/embeddable-integrations/mobile-sdks/flutter/flutter-callbacks-events-for-tracking.md)
{% endcontent-ref %}


---

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