This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
We were not able to find the expected elm-package.json file at this tag.
Tag 10.0.1
Committed At 2018-12-28 09:15:15 UTC

Modules

    README

    Elm Credit Card

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

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

    alt text

    Features

    • Interactive update of the card type and information.
    • Can be used as just the card view, or as part of the credit card form.
    • 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.
    • Implemented as reusable views that will fit nicely with The Elm Architecture.

    Live Demo

    See here for live demo

    How to Install

    You can install this package running:

    elm-package install abadi199/elm-creditcard
    

    or by manually adding abadi199/elm-creditcard to your elm-package.json.

    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 using card view:

    import CreditCard
    import CreditCard.Config
    
    type alias Model =
        { number : Maybe String
        , name : Maybe String
        , month : Maybe String
        , year : Maybe String
        , cvv : Maybe String
        , state : CreditCard.State
        }
    
    view model =
        CreditCard.card CreditCard.Config.defaultConfig model
    
    

    Example of using form view:

    import CreditCard
    import CreditCard.Config
    
    type alias Model =
        { number : Maybe String
        , name : Maybe String
        , month : Maybe String
        , year : Maybe String
        , cvv : Maybe String
        , state : CreditCard.State
        ...
        }
    
    type Msg
      = UpdateCardData Model
      ...
    
    view model =
        ...
        CreditCard.form (CreditCard.Config.defaultFormConfig UpdateCardData) model
        ...
    
    update msg model =
        case msg of
            UpdateCardData updatedModel ->
                ( updatedModel, Cmd.none )
    
            ...
    
    

    You can see the full code for this in the example folder.

    Documentations

    Please see Elm Package for complete documentation.

    Contributing

    • Submit a pull request! If you're missing a feature you want to have, or just found a bug, or found an error in the docs, please submit a pull request.
    • Create an issue! If you found a bug or want a new feature that you think will make the library better, but don't have time to do it yourself, please submit an issue.
    • Message me on slack or twitter if you just want to give me a feedback or thank me. I'm abadi199 on elm-lang slack channel.

    License

    Apache 2.0