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.

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.

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.

4. Badges

• Use the badges field to display badges on top of the cardName for offers with isITA: true

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