Elm Credit Card by abadi199

Pretty credit card input form inspired by https://github.com/jessepollak/card

Everything is written in Elm without any external javascript, and css.

Features

Interactive update of the card type and information.
Supports multiple card type: Visa, Mastercard, American Express, Discover, Diners Club, JCB, Laser, Maestro, and Visa Electron
No external css or JavaScript dependency. The credit cards and logos are all svg dynamically generated using elm-svg.
Implements The Elm Architecture.

Live Demo

Sample of credit card numbers

MasterCard	5105105105105100
Visa	4111111111111111
AmericanExpress:	378282246310005
Discover	6011000990139424
DinersClub:	6011000990139424
JCB	3530111333300000
Visa Electron	4917300800000000

How to Use

This component implements The Elm Architecture (TEA), so if you're application also implements TEA, then using this components is simply by adding it to be part of your view, update, and Model.

You can use this component in two ways; one is by rendering the whole form together, or rendering each input fields and card individually.

Example of rendering the whole form:

import CreditCard.Model
import CreditCard.Update
import CreditCard.View
import Html.App

type alias Model =
    { creditCard : CreditCard.Model.Model CreditCard.Update.Msg
      ...
    }

init =
    { creditCard = CreditCard.Model.init CreditCard.Model.defaultOptions
      ...
    }

view model = 
    form [] 
        [ Html.App.map CardUpdate CreditCard.View.form 
        ...
        ]

type Msg = CreditCardMsg CreditCard.Update.Msg

update msg model =
    case msg of
        CreditCardMsg creditCardMsg ->
            let
                ( creditCardModel, creditCardCmd ) =
                    CreditCard.Update.update creditCardMsg model.creditCard
            in
                ( { model | creditCard = creditCardModel }
                , Cmd.map CreditCardMsg creditCardCmd 
                )
        ...

You can see the full code for this in this example

Example of rendering each sub-components individually:

import CreditCard.Model
import CreditCard.Update
import CreditCard.View
import Html.App

type alias Model =
    { creditCard : CreditCard.Model.Model CreditCard.Update.Msg 
      ...
    }

init =
    { creditCard = CreditCard.Model.init CreditCard.Model.defaultOptions
      ...
    }

view model = 
    form [] 
        [ Html.App.map CreditCardMsg (CreditCard.View.cardView model.creditCard)
        , p []
            [ label [ for "CreditCardNumber" ] [ text "Number" ]
            , App.map CreditCardMsg 
                (CreditCard.View.numberInput "CreditCardNumber" model.creditCard)
            ]
        , p []
            [ label [ for "CreditCardName" ] [ text "Name" ]
            , App.map CreditCardMsg 
                (CreditCard.View.nameInput "CreditCardName" [ class "input-control" ] model.creditCard)
            ]
        , p []
            [ label [ for "CreditCardNumber" ] [ text "Expiration Date" ]
            , App.map CreditCardMsg 
                (CreditCard.View.monthInput "CreditCardMonth" model.creditCard)
            , App.map CreditCardMsg 
                (CreditCard.View.yearInput "CreditCardYear" model.creditCard)
            ]
        , p []
            [ label [ for "CreditCardCcv" ] [ text "Number" ]
            , App.map CreditCardMsg 
                (CreditCard.View.ccvInput "CreditCardCcv" model.creditCard)
            ]
        ...
        ]

type Msg = CreditCardMsg CreditCard.Update.Msg

update msg model =
    case msg of
        CreditCardMsg creditCardMsg ->
            let
                ( creditCardModel, creditCardCmd ) =
                    CreditCard.Update.update creditCardMsg model.creditCard
            in
                ( { model | creditCard = creditCardModel }
                , Cmd.map CreditCardMsg creditCardCmd 
                )
        ...

You can see the full code for this in this example

Options

You can customize the form by specifying these available options:

showLabel (default: False)
a flag to indicate wheter to show label for each input fields or not.
blankChar (default: '•')
character used for blank input placeholder.

Style