# Displaying Credit Card Offers

## Offer Card Components and Display Logic

This section explains how Engine uses fields returned by the Credit Cards API to display offer card components in both unexpanded and expanded views. Use the logic outlined below as reference for your UI implementation.

### **Offer Card Views**

* **Unexpanded View:**
  * Display the first 3 bullet points from the details field with a **“See Details”** link.
  * Display the first 3 high-level stats based on priority.
* **Expanded View:**
  * Display all bullet points and stats returned from the API.

### **Offer Card Components**

1\. Credit Card Image

* Use the `cardImageUrlSource` field to retrieve the card image.<br>

2\. Continue Button

* Use the `url` field to determine the destination URL for the Continue Button.
* All clicks should open a new tab in the browser.<br>

3\. Rates & Terms Link

* Use the `ratesUrl` field to determine the destination for the Rates & Terms link.
* All clicks should open a new tab in the browser.<br>

4\. Badges

* Use the `badges` field to display badges on top of the cardName for offers with `isITA: true`<br>

5\. Card Name

* Use the `cardName` field to display the card name exactly as provided.

6\. See Details Drawer

* Add a **“See Details”** drawer if `details.details` (i.e. Card Stats) contains more than 3 items.
* If `details.details` does not contain more than 3 items, the **“See Details”** option should not be displayed.

### Card Stats and Details Display Logic

#### **Annual Fee**

* Always display the **Annual Fee** as the first stat.
* Logic:
  * If no annual fee is provided, display **"See Terms"** text.
  * If both `minAnnualFee` and `maxAnnualFee` are equal, display the specific fee (e.g., "$10").
  * If only `minAnnualFee` or `maxAnnualFee` is provided, display that specific value.
  * If `minAnnualFee` and `maxAnnualFee` are different, display a range (e.g., "$5 - $10").
  * If `annualIntroFee` is not null, the text should be displayed in a tooltip.
  * Annual Intro Fee Impact on Annual Fee Logic
    * If an `annualIntroFee` is present and not null, then `annualIntroFeeTerm` (always in years) should be listed ahead of the `annualFee` values. Example: “$10 for 2 years, then $20."
    * If both `minAnnualFee` and `maxAnnualFee` are provided (for after the introductory period), it should display a range, for example "$10 for 2 years, then $10 - $20."

#### **Recommended Credit**

* If no credit ratings are provided (`recommendedCreditRatings`), it should display **"See Terms"**
* If all five credit ratings (limited, poor, fair, good, excellent) are available, it should display **"Any"**
* If the subset of the five credit ratings are available, display the ones that are returned by API in descending order
* The tooltip for recommended credit should display value from **recommendedCreditRatingsDisclaimer**

#### **Card Stats Priority**

* Display the top 3 stats in the following hierarchy:
  * Annual Fee (always displayed)
  * Rewards
  * Welcome Bonus
  * APR (always displayed)
  * Minimum Deposit
  * Transfer Fee
* Logic for more than 3 stats:
  * Display the top 3 on the card
  * Remaining stats appear in the “See Details” section

#### **Rewards**

* If `rewardsDescription` is null, do not display this stat
* If `rewardsDescription` is not null, display the stat with provided text
* If `rewardsDisclaimer` is not null, the text should be displayed in a tooltip

#### **Welcome Bonus**

* If `introOfferAmount`, `introOfferText`, and `introOfferType` are all null, do not display the welcome bonus stat
* If `introOfferText` is not null, display `introOfferText` only in the stat
* If `introOfferText` is null:
  * Concatenate `introOfferAmount` and `introOfferType` into a single string
  * If `introOfferType` is "**miles**" or "**points**", add commas to `introOfferAmount` (e.g., "**10,000 miles**" or "**10,000 points**")
  * If `introOfferType` is "**statement\_credit**", add a $ sign to `introOfferAmount`, add commas where needed, and append **"statement credit"** (e.g., **"$1,000 statement credit"**)
* If `introOfferDisclaimer` is not null, the text should be displayed in a tooltip

#### **APR**

* Always display APR
* Logic:
  * If `purchaseAprText` is provided, display it
  * If `purchaseAprText` is null:
    * If no APR values are provided, display "**See Terms**"
    * If both `minPurchaseApr` and `maxPurchaseApr` are provided and equal, display the `maxPurchaseApr`
    * If `minPurchaseApr` and `maxPurchaseApr` differ, display the range (e.g., **"10.99% - 24.99%"**)
* APR Label:
  * If no specific `aprType` is provided, label the field as **"APR"**
  * If `aprType` is "variable," label as **"Variable APR"**
  * If `aprType` is "fixed," label as **"Fixed APR"**
  * If `purchaseAprDisclaimer` is not null, the text should be displayed in a tooltip

#### **Minimum Deposit**

* If `minDepositAmount` is null, do not display this stat.
* Otherwise, display the value in dollars (e.g., "**$500**")
* If `minDepositDisclaimer` is not null, the text should be displayed in a tooltip

#### **Balance Transfer APR**

* If all fields (`maxBalanceTransferApr`, `minBalanceTransferApr`, and `balanceTransferAprText`) are null, do not display this stat
* If `balanceTransferAprText` is not null, display the text
* If `balanceTransferAprText` is null:
  * If both `minBalanceTransferApr` and `maxBalanceTransferApr` are equal, display the single value
  * If only `minBalanceTransferApr` or `maxBalanceTransferApr` is provided, display that value
  * If `minBalanceTransferApr` and `maxBalanceTransferApr` are different, display the range (e.g., "**2% - 10%**")
* If `balanceTransferFeeDisclaimer` is not null, the text should be displayed in a tooltip

\
\ <br>


---

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

```
GET https://even-financial.gitbook.io/developer-center/native-api-integrations/credit-cards-marketplace/displaying-credit-card-offers.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.