Developer Center
Back to Engine.tech
  • Welcome!
  • Top of Funnel Applications
    • Embeddable Calculators
      • Embeddable Personal Loan Calculator
      • Embeddable Debt Consolidation Loan Calculator
      • Embeddable Personal Loan vs Debt Relief Calculator
      • Embeddable Savings Calculator
      • Adding Your Client Tags for Reporting Attribution
  • Loans / Savings / Second Look Marketplace
    • Hosted Integrations
      • Partner Pages / Embeds
        • Loans Partner Pages
          • Frond-End Customization Options
          • Preferred Look Partner Pages
          • Bridge Partner Pages
          • Special Offer Partner Pages
        • Loans Embeds
        • Pre-Populating Existing Customer Data
        • Adding Your Client Tags for Reporting Attribution
      • Mobile SDK
        • Mobile SDK - Prefilling Lead Data
        • Adding Your Client Tags to Reporting for Mobile SDK Integrations
        • Event Handlers for Real-Time Tracking in the Engine Mobile SDK
    • Native API (Build Your Own)
      • Financial Product Verticals
        • Loans
          • Personal Loans
            • Collecting User Information for Personal Loans
            • Displaying Personal Loan Offers
            • API Specifications
            • FAQs
          • Home Equity Line of Credit (HELOC)
            • Displaying Offers HELOC
            • Risk Factors & Requirements
            • Dos & Don’ts for All HELOC Supply Partners
            • Dos & Don’ts for HELOC Native Partners (API)
            • Our Embed/Partner Page Implementation
            • HELOC-specific disclosures
          • Auto Loan Refinancing (ALR)
            • Collecting User Information
            • Displaying Auto Loan Refinance Offers
            • API Specifications
            • FAQs
        • Savings
          • Collection User Information for Savings
          • Displaying Savings Offers
          • Marketplace Display Requirements
          • Reporting
          • API Specifications
        • 2nd Look Marketplace
          • 2nd Look Marketplace (Financial Services Providers)
          • 2nd Look Marketplace (Channel Partners)
            • Collecting User Information for 2LM
            • Displaying 2L Marketplace Offers
      • Adding Your Client Tags to Reporting for Native API Integrations
      • General Compliance Guidelines
        • Consumer Information Fields
          • Additional Compliance Recommendations & Best Practices
        • Disclosures
        • Consents
        • Offer Display Fields
    • Reporting Options for Channel Partners
      • Channel Partner Reporting - Looker
      • Channel Partner Reporting - Analytics API
  • Credit Cards Marketplace
    • Native API (Build Your Own)
      • Getting Started
      • Flow Design
      • Collecting User Information for Credit Cards
      • Displaying Credit Card Offers
      • API Specifications
      • Compliance Guidelines
  • New Marketplaces (Credit Builders, Earned Wage Access, Debt Relief)
    • Hosted Integrations
      • New Marketplaces Embeds
      • Adding Your Client Tags for Reporting Attribution
  • References
    • Brand Guidelines and Assets
    • Appendix
      • Appendix A - Notices
      • Appendix B - Disclosures
      • Appendix C - Consents
      • Appendix D: API Field to Offer Card Mappings
      • Appendix E: Appending Client Tags for Partner Page and Embed Integrations
Powered by GitBook
On this page
  • Offer Card Components and Display Logic
  • Offer Card Views
  • Offer Card Components
  • Card Stats and Details Display Logic

Was this helpful?

  1. Credit Cards Marketplace
  2. Native API (Build Your Own)

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

PreviousCollecting User Information for Credit CardsNextAPI Specifications

Last updated 1 month ago

Was this helpful?