finsmart

This project is used to share MX FinSmart ads across applications.

Usage no npm install needed!

<script type="module">
  import finsmart from 'https://cdn.skypack.dev/finsmart';
</script>

README

This project is used to share MX FinSmart ads across applications.

There are currently two FinSmart campaign types included in this package.

  • Credit card
  • Mini-credit card

Installation

npm add finsmart

Props

  • offer: Object, required
  • onDismissClick: Function, optional
  • theme: Object, optional,
  • widgetDimension: String, optional (only MiniCreditCard)

Usage

import { CreditCard, MiniCreditCard } from 'finsmart'

const defaultProps = {
  offer: {
    account_name: 'Bad Account',
    account_interest_rate: 10,
    account_logo: 'http://logo.url',
    campaign_call_to_action: 1,
    campaign_disclosure: 'Disclosure Text',
    campaign_disclosure_url: 'http://disclosure.url',
    campaign_interest_rate_type: 1,
    campaign_interest_rate: 1.2,
    campaign_name: 'Credit Card',
    campaign_opt_out_url: 'http://opt.out.url',
    estimated_dollars_saved: 100,
    estimated_finance_charge: 10,
    guid: 'OFR-1',
    image_url: 'http://image.url',
    redirect_url: 'http://redirect.url',
  },
}

<CreditCard {...defaultProps} />
<MiniCreditCard {...defaultProps} widgetDimension="PORTRAIT" />
<MiniCreditCard {...defaultProps} widgetDimension="LANDSCAPE" />
<MiniCreditCard {...defaultProps} widgetDimension="MINIPORTRAIT" />

Development

  • git@gitlab.mx.com:mx/finsmart.git
  • cd finsmart
  • npm install
  • npm run dev