abadi199/elm-creditcard - version: 10.0.2

for more information visit the package's GitHub page

Package contains the following modules:

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

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

License

Apache 2.0