Collect Card Information
Getting Started
To create a Card Form using the MoneyHash Payment SDK for iOS, you will use the CardFormBuilder
class to configure the card form's fields and set up listeners to monitor changes in their states. This setup allows you to handle events such as when a user updates the card number, CVV, cardholder name, expiry month, or expiry year fields.
The CardFormBuilder
provides methods to set listeners (handlers) for each card input field. These listeners are closures (functions) that will be called every time the user updates the respective field. The listener function receives a CardInputFieldState
object, which contains information about the field’s validity, error message (if any), and the formatted value.
CardInputFieldState
Each time the user updates a field, the corresponding listener will be invoked with a CardInputFieldState
object. The CardInputFieldState
model represents the current state of a card input field, such as the card number, CVV, or expiration date. It includes information about whether the field is valid, any error message associated with it, whether the field is currently focused, and the length of the input entered by the user.
public struct CardInputFieldState {
public let isValid: Bool?
public let errorMessage: String?
public let isOnFocused: Bool
public let inputLength: Int
}
Properties:
- isValid: A Boolean indicating whether the current input in the field is valid. If the input has not been validated yet, this can be
nil
. - errorMessage: An optional string containing an error message if the input is invalid. If the input is valid or no validation has occurred yet, this will be
nil
. - isOnFocused: A Boolean indicating whether the input field is currently focused (i.e., the user is actively entering or editing the field).
- inputLength: An integer representing the length of the input currently entered in the field.
Example Usage:
let cardInputState = CardInputFieldState(isValid: true, errorMessage: nil, isOnFocused: true, inputLength: 16)
print("Card Number is valid: \(cardInputState.isValid)")
Default State:
The default state of the card input field can be accessed using:
let defaultState = CardInputFieldState.defaultState
In the default state, the field is not focused, and the input length is 0
, with no validation performed (isValid
and errorMessage
are nil
).
Creating the CardForm
CardForm
To collect card details, you will use the CardFormBuilder
to configure the card input fields and their respective listeners. These listeners handle state changes for each field, such as card number, CVV, cardholder name, expiry month, and expiry year, allowing you to monitor user input and validation in real-time.
Example:
import Foundation
import MoneyHashSDK
class CardFormViewModel: ObservableObject {
@Published var cardForm: CardForm?
init() {
setupCardForm()
}
private func setupCardForm() {
self.cardForm = CardFormBuilder()
.setCardNumberField { [weak self] state in
print("Card Number Field State: \(state)")
}
.setCVVField { [weak self] state in
print("CVV Field State: \(state)")
}
.setCardHolderNameField { [weak self] state in
print("Card Holder Name Field State: \(state)")
}
.setExpireMonthField { [weak self] state in
print("Expire Month Field State: \(state)")
}
.setExpireYearField { [weak self] state in
print("Expire Year Field State: \(state)")
}
.setCardBrandChangeHandler { [weak self] brand in
print("Card Brand Changed: \(brand)")
}.build()
}
}
Explanation:
-
Listeners for Input Fields: Each field—such as card number, CVV, cardholder name, expiry month, and expiry year—has a listener associated with it. These listeners use closures to receive the updated state (
CardInputFieldState
) whenever the user modifies the respective field.-
For instance, in the
setCardNumberField
closure, the state of the card number input is printed, and this state includes information such as whether the input is valid, the formatted value, and any error messages. -
The
setCardBrandChangeHandler
closure listens for changes to the card brand, allowing you to track when the card type (e.g., Visa, MasterCard) changes based on the user's input.
-
-
build()
Method: After configuring the field listeners, thebuild()
method finalizes the creation of theCardForm
instance, which is then assigned to thecardForm
property. This form can now be used in your UI to display secure card input fields and manage the payment process.
Integrating SecureTextField
The SecureTextField
is a SwiftUI view that represents a secure input field for card data. Since it's a SwiftUI view, you can integrate it into your UIKit application using UIHostingController
or by building your view entirely with SwiftUI.
Here's how you can integrate SecureTextField
into your view:
import SwiftUI
import MoneyHashSDK
@available(iOS 15.0, *)
struct CardFormView: View {
@ObservedObject var cardForm: CardForm
var body: some View {
VStack(spacing: 16) {
SecureTextField(cardFormCollector: cardForm, type: .cardHolderName) {
Text("Cardholder Name")
.foregroundColor(.gray)
}
.textFieldStyle()
SecureTextField(cardFormCollector: cardForm, type: .cardNumber) {
Text("Card Number")
.foregroundColor(.gray)
}
.textFieldStyle()
HStack(spacing: 8) {
SecureTextField(cardFormCollector: cardForm, type: .expireMonth) {
Text("MM")
.foregroundColor(.gray)
}
.textFieldStyle()
SecureTextField(cardFormCollector: cardForm, type: .expireYear) {
Text("YY")
.foregroundColor(.gray)
}
.textFieldStyle()
SecureTextField(cardFormCollector: cardForm, type: .cvv) {
Text("CVV")
.foregroundColor(.gray)
}
.textFieldStyle()
}
}
.padding()
}
}
@available(iOS 15.0, *)
extension View {
func textFieldStyle() -> some View {
self
.padding()
.background(Color(UIColor.systemGray6))
.cornerRadius(8)
.overlay(
RoundedRectangle(cornerRadius: 8)
.stroke(Color(UIColor.separator), lineWidth: 1)
)
}
}
Explanation:
-
SecureTextField
: For each card input field, we create aSecureTextField
instance, specifying thecardFormCollector
and the type of the field, such as.cardHolderName
,.cardNumber
,.expireMonth
,.expireYear
, or.cvv
. -
Placeholders: We provide a placeholder view for each field using a
Text
view. -
Styling: We define a
textFieldStyle()
extension to style the text fields uniformly. -
Layout: We arrange the fields using
VStack
andHStack
for proper alignment.
Updated 25 days ago