> 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/react-native/web-wrapper/credit-cards.md).

# \[Alpha] Credit Cards

## Overview

The Web Wrapper delivers the Credit Cards marketplace flow as an embedded widget, sharing one implementation across multiple tech stacks. This page covers installation, prerequisites, the core configuration props (`channel`, `zone`, `productTypes`), a basic usage example, prefilling lead data, client tags, and event handlers.

{% hint style="warning" %}
This approach is in **\[Alpha]** while we finalize the cross-stack API.
{% endhint %}

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 %}

## 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="#prefilling-lead-data">Prefilling 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="#client-tags">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="#event-handlers">Event Handlers</a>.</td></tr></tbody></table>

## Prefilling Lead Data

Prefill any user data you already have to reduce what the user has to type in-flow. Prefilled data is grouped into typed information objects, each passed as its own prop on `WebWrapper` (e.g. `personalInformation`, `financialInformation`, `creditInformation`, `creditCardInformation`).

{% hint style="info" %}
Prefilling requires a `bearerToken`. Pass only the fields you have — omitted fields are collected from the user in-flow.
{% endhint %}

### Example

```tsx
<WebWrapper
  channel="your-channel"
  zone="your-zone"
  bearerToken="{your_token}"
  productTypes={[ApiModels.ProductType.CreditCard]}
  personalInformation={{
    firstName: 'Bob',
    lastName: 'Dylan',
    email: 'bobdylan@gmail.com',
    dateOfBirth: '1990-01-01', // YYYY-MM-DD
    primaryPhone: '2325624852',
    address1: '1600 Pennsylvania Avenue',
    address2: 'Apt 2',
    city: 'Washington',
    state: 'DC',
    zipcode: '20500',
  }}
  financialInformation={{
    annualIncome: 20000,
    creditCardDebt: 5000,
  }}
  creditInformation={{
    providedCreditRating: ApiModels.ProvidedCreditRating.Good,
  }}
  creditCardInformation={{
    allowAnnualFee: true,
    cardPurposes: [
      ApiModels.CardPurpose.BalanceTransfer,
      ApiModels.CardPurpose.CashBack,
    ],
  }}
  onExit={(evt) => console.log('onExit', evt)}
/>
```

### Type Definitions

Every prop and field is optional — pass only what you have.

```ts
interface LeadPersonalInformation {
  firstName?: string;
  lastName?: string;
  email?: string;
  dateOfBirth?: string; // YYYY-MM-DD
  primaryPhone?: string; // 10 digits, no "+" or "-" chars
  address1?: string;
  address2?: string; // optional apartment / suite
  city?: string;
  state?: string; // 2-letter code, e.g. 'DC'
  zipcode?: string;
}

interface LeadFinancialInformation {
  annualIncome?: number; // raw integer value (e.g. 20000)
  creditCardDebt?: number; // total credit card debt, raw integer value
}

interface LeadCreditInformation {
  providedCreditRating?: ApiModels.ProvidedCreditRating; // enum below
}

interface LeadCreditCardInformation {
  allowAnnualFee?: boolean; // whether the lead is open to cards with an annual fee
  cardPurposes?: ApiModels.CardPurpose[]; // enum below
}
```

### Enums / Accepted Values

Use a member of the corresponding `ApiModels` enum (each member maps to the on-the-wire value shown):

```ts
enum CardPurpose {
  BalanceTransfer = 'balance_transfer',
  CashBack = 'cash_back',
  EarningRewards = 'earning_rewards',
  ImproveCredit = 'improve_credit',
  LowInterest = 'low_interest',
  NewToCredit = 'new_to_credit',
  Student = 'student',
  TravelIncentives = 'travel_incentives',
}

enum ProvidedCreditRating {
  Excellent = 'excellent',
  Good = 'good',
  Fair = 'fair',
  Poor = 'poor',
  Limited = 'limited',
}

// Access via the ApiModels namespace, e.g. ApiModels.CardPurpose.BalanceTransfer
// state is a 2-letter US state code, e.g. 'CA', 'DC', '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

The Engine Web Wrapper 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 are added via the `clientTags` prop, a map of string keys to lists of string values. 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.

```tsx
<WebWrapper
  channel="your-channel"
  zone="your-zone"
  bearerToken="{your_token}"
  productTypes={[ApiModels.ProductType.CreditCard]}
  personalInformation={{ /* ...any data you don't want to ask for again */ }}
  clientTags={{
    clientId: ['client1'],
    trafficsource: ['email'],
    campaignId: ['campaign1'],
  }}
  // ...optional Event Handlers, see below
/>
```

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

## Event Handlers

The `WebWrapper` component exposes optional event callback props that notify your app when key moments occur during the user's journey. Each callback receives an event object containing a `timestamp` (ISO 8601 UTC) and event-specific fields.

All callbacks are optional. If a callback is not provided, the SDK will still log the event to the debug console in development mode.

```tsx
<WebWrapper
  channel="your-channel"
  zone="your-zone"
  bearerToken="{your_token}"
  productTypes={[ApiModels.ProductType.CreditCard]}
  onInitialize={(evt) => console.log('onInitialize', evt)}
  onCreate={(evt) => console.log('onCreate', evt.leadUuid)}
  onSubmit={(evt) => console.log('onSubmit', evt.leadUuid)}
  onOfferClick={(evt) => console.log('onOfferClick', evt.offerUuid)}
  onExit={(evt) => console.log('onExit', evt)}
  // ...other callbacks
/>
```

### Available Events

| Callback              | Trigger                          |
| --------------------- | -------------------------------- |
| **onInitialize**      | SDK finished loading the embed   |
| **onCreate**          | New lead created                 |
| **onUpdate**          | Lead data updated                |
| **onNavigate**        | Page navigation within the flow  |
| **onSubmit**          | Lead form submitted              |
| **onRateTableRender** | Rate table displayed with offers |
| **onOfferClick**      | User clicked an offer            |
| **onErrorPageView**   | Error page displayed in the flow |
| **onErrorPageRetry**  | User retried from the error page |
| **onExit**            | User exited the SDK              |
| **onEmbedError**      | Web embed failed to load         |
| **onEmbedErrorRetry** | User retried after embed failure |

For Credit Cards, `onRateTableRender` populates `creditCardOffers`, and `onOfferClick` includes card-specific fields such as `financialInstitutionBrandName`, `cardName`, `isITA`, and `cardNetwork`. Every event includes a `timestamp` (ISO 8601 UTC).


---

# 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/react-native/web-wrapper/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.