Card view

Render the card view individually. Example:

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

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 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 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 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 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 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
            ...

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
        ...
        }

Empty card data

Internal State of the card view

Initial state of the card view