for more information visit the package's GitHub page
Package contains the following modules:
Pretty credit card input form inspired by https://github.com/jessepollak/card
Everything is written in Elm without any external javascript, or css.
See here for live demo
You can install this package running:
elm-package install abadi199/elm-creditcard
or by manually adding abadi199/elm-creditcard
to your elm-package.json
.
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.
Please see Elm Package for complete documentation.
Apache 2.0