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
...
{ 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
Internal State of the card view
initialState : State
Initial state of the card view