abadi199 / elm-creditcard / CreditCard

View

card : Config config -> CardData model -> Html msg

Card view

Render the card view individually. Example:

view model =
    let
        config =
            CreditCard.Config.defaultConfig
    in
    CreditCard.card config model

form : Config.FormConfig model msg -> CardData model -> Html msg

Form view

Render the card view with the full form fields. Example:

type Msg
    = UpdateCardData Model

view model =
    let
        config =
            CreditCard.Config.defaultFormConfig UpdateCardData
    in
    CreditCard.card config model

number : Config.FormConfig model msg -> List (Html.Attribute msg) -> CardData model -> Html msg

Number form field

Render the number field individually. Example:

type Msg = UpdateCardData Model

view model =
    let
        config =
            CreditCard.Config.defaultFormConfig UpdateCardData
    in
        form []
            [ CreditCard.card config model
            , CreditCard.number config [] model
            ...

name : Config.FormConfig model msg -> List (Html.Attribute msg) -> CardData model -> Html msg

Name form field

Render the name field individually. Example:

type Msg = UpdateCardData Model

view model =
    let
        config =
            CreditCard.Config.defaultFormConfig UpdateCardData
    in
        form []
            [ CreditCard.card config model
            , CreditCard.name config [] model
            ...

month : Config.FormConfig model msg -> List (Html.Attribute msg) -> CardData model -> Html msg

Month form field

Render the month field individually. Example:

type Msg = UpdateCardData Model

view model =
    let
        config =
            CreditCard.Config.defaultFormConfig UpdateCardData
    in
        form []
            [ CreditCard.card config model
            , CreditCard.month config [] model
            ...

year : Config.FormConfig model msg -> List (Html.Attribute msg) -> CardData model -> Html msg

Year form field

Render the year field individually. Example:

type Msg = UpdateCardData Model

view model =
    let
        config =
            CreditCard.Config.defaultFormConfig UpdateCardData
    in
        form []
            [ CreditCard.card config model
            , CreditCard.year config [] model
            ...

cvv : Config.FormConfig model msg -> List (Html.Attribute msg) -> CardData model -> Html msg

CVV form field

Render the CVV field individually. Example:

type Msg = UpdateCardData Model

view model =
    let
        config =
            CreditCard.Config.defaultFormConfig UpdateCardData
    in
        form []
            [ CreditCard.card config model
            , CreditCard.cvv config [] model
            ...

Data


type alias CardData model =
{ model | number : Maybe String
, name : Maybe String
, month : Maybe String
, year : Maybe String
, cvv : Maybe String
, state : State 
}

Stores the card data such as number, name, etc.

This CardData can be embeded into your application's Model in various ways. Here's 2 example of embedding this data into your model: Example 1:

-- Use CardData in your model directly
type alias Model =
    { cardData : CreditCard.CardData {}
    ...
    }

-- Initial the model
init =
    { cardData = CardData.emptyCardData
    ...
    }

Example 2:

-- Extends the CardData in your Model
type alias Model =
    { number : Maybe String
    , name : Maybe String
    , month : Maybe String
    , year : Maybe String
    , cvv : Maybe String
    , state : CreditCard.State
    , shippingAddress : Maybe String
    ...
    }

-- Initial the model
init =
    let
        emptyCardData =
            CardData.emptyCardData
    in
        { emptyCardData |
        shippingAddress = Nothing
        ...
        }

emptyCardData : CardData {}

Empty card data

Internal State


type alias State =
Internal.State

Internal State of the card view

initialState : State

Initial state of the card view