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 "]
    ]

A view function that will render the credit card.

This view will renders the credit card information such as the number, full name, expiration month/year, ccv, and the card logo.

This component also provide a card flipping animation for flipping back and forth between the front and back side of the card when displaying CCV number. Some type of card has CCV printed on the front side of the card, in this case, the flipping animation will not be performed.

To use this view, just include this function as part of your view function. This will render the card as svg element.

Example:

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

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 "NumberInput" model.creditCardModel)
    , button [] [ text "Checkout "]
    ]

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 "NameInput" model.creditCardModel)
    , button [] [ text "Checkout "]
    ]

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 "MonthInput" model.creditCardModel)
    , button [] [ text "Checkout "]
    ]

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 "YearInput" model.creditCardModel)
    , button [] [ text "Checkout "]
    ]

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 "CCVInput" model.creditCardModel)
    , button [] [ text "Checkout "]
    ]