CreditCard.View

View related functions

Form View

form : Model Msg -> Html Msg

A view function that will render the whole form fields including the card.

To use this view, just include this function as part of your view function.

Example:

form []
    [ Html.App.map CreditCardMsg (CreditCard.View.form model.creditCardModel)
    , button [] [ text "Checkout "]
    ]

numberInput : String -> Model Msg -> Html Msg

A view function that will render the input field for credit card number.

To use this view, just include this function as part of your view function.

Example:

form []
    [ Html.App.map CreditCardMsg (CreditCard.View.numberInput model.creditCardModel)
    , button [] [ text "Checkout "]
    ]

nameInput : String -> List (Attribute Msg) -> Model Msg -> Html Msg

A view function that will render the input field for full name.

To use this view, just include this function as part of your view function.

Example:

form []
    [ Html.App.map CreditCardMsg (CreditCard.View.nameInput model.creditCardModel)
    , button [] [ text "Checkout "]
    ]

monthInput : String -> Model Msg -> Html Msg

A view function that will render the input field for credit card expiration month.

To use this view, just include this function as part of your view function. The input field will only accept numeric input with maximum value of 12.

Example:

form []
    [ Html.App.map CreditCardMsg (CreditCard.View.monthInput model.creditCardModel)
    , button [] [ text "Checkout "]
    ]

yearInput : String -> Model Msg -> Html Msg

A view function that will render the input field for credit card expiration year.

To use this view, just include this function as part of your view function. The input field will only accept numeric input.

Example:

form []
    [ Html.App.map CreditCardMsg (CreditCard.View.yearInput model.creditCardModel)
    , button [] [ text "Checkout "]
    ]

ccvInput : String -> Model Msg -> Html Msg

A view function that will render the input field for credit card CCV/CVC number.

To use this view, just include this function as part of your view function. The input field will only accept numeric input with maximum length of 4.

Example:

form []
    [ Html.App.map CreditCardMsg (CreditCard.View.ccvInput model.creditCardModel)
    , button [] [ text "Checkout "]
    ]