PSCardForm
Overview
Securely collect card information of the client with PSCardForm (a pre-defined cards component provided by the SDK that collects the card number, expiration date and CVC).
PSCardForm
Pass the following parameters during its initialization from the application
- The cardholder name view defined through UIKit or SwiftUI.
- The card number view defined through UIKit or SwiftUI.
- The card expiry view defined through UIKit or SwiftUI.
- The CVV view defined through UIKit or SwiftUI.
The initialize methods signatures are as follows depending on the fields view types (SwiftUI or UIKit):
/// Initializes the PSCardForm using SwiftUI components.
///
/// - Parameters:
/// - currencyCode: Currency code
/// - accountId: Account id
/// - cardNumberSwiftUIView: PSCardNumberInputSwiftUIView
/// - cardholderNameSwiftUIView: PSCardholderNameInputSwiftUIView
/// - cardExpirySwiftUIView: PSCardExpiryInputSwiftUIView
/// - cardCVVSwiftUIView: PSCardCVVInputSwiftUIView
/// - completion: PSCardFormInitializeBlock
public static func initialize(
currencyCode: String,
accountId: String,
cardNumberSwiftUIView: PSCardNumberInputSwiftUIView? = nil,
cardholderNameSwiftUIView: PSCardholderNameInputSwiftUIView? = nil,
cardExpirySwiftUIView: PSCardExpiryInputSwiftUIView? = nil,
cardCVVSwiftUIView: PSCardCVVInputSwiftUIView? = nil,
completion: @escaping PSCardFormInitializeBlock
)
/// Initializes the PSCardForm using UIKit components.
///
/// - Parameters:
/// - currencyCode: Currency code
/// - accountId: Account id
/// - cardNumberView: PSCardNumberInputView
/// - cardholderNameView: PSCardholderNameInputView
/// - cardExpiryView: PSCardExpiryInputView
/// - cardCVVView: PSCardCVVInputView
/// - completion: PSCardFormInitializeBlock
public static func initialize(
currencyCode: String,
accountId: String,
cardNumberView: PSCardNumberInputView? = nil,
cardholderNameView: PSCardholderNameInputView? = nil,
cardExpiryView: PSCardExpiryInputView? = nil,
cardCVVView: PSCardCVVInputView? = nil,
completion: @escaping PSCardFormInitializeBlock
)
Parameter | Required | Type | Description |
---|---|---|---|
currencyCode | true | String | The currencyCode accepts 3 letter abbreviations of the ISO standard currencies. |
accountId | true | String | The id of the selected merchant account to process the payment.
|
cardNumberView | false | PSCardNumberInputView or PSCardNumberInputSwiftUIView | Card number field view (UIKit or SwiftUI view) |
cardholderNameView | false | PSCardholderNameInputView or PSCardholderNameInputSwiftUIView | Card holder field view (UIKit or SwiftUI view) |
cardExpiryView | false | PSCardExpiryInputView or PSCardExpiryInputSwiftUIView | Card expiry date view (UIKit or SwiftUI view) |
cardCVVView | false | PSCardCVVInputView or PSCardCVVInputSwiftUIView | Card CVV field view (UIKit or SwiftUI view) |
completion | true | PSCardFormInitializeBlock | This block is of type alias for a completion handler that receives a parameter in Result object.
|
Usage Example
PSCardForm.initialize(
currencyCode: "USD",
accountId: "<accountId>",
cardNumberSwiftUIView: cardNumberView,
cardholderNameSwiftUIView: cardholderNameView,
cardExpirySwiftUIView: cardExpiryView,
cardCVVSwiftUIView: cardCVVView
) { [weak self] result in
DispatchQueue.main.async { [weak self] in
guard let self else { return }
isInitializing = false
switch result {
case let .success(cardForm):
self.cardForm = cardForm
case let .failure(error):
print("Error", "\(error.displayMessage)")
}
}
}
PSCardForm Exceptions
Error code | Display message | Detailed message | Comments |
---|---|---|---|
9061 | There was an error (9061), please contact our support. | Invalid account id for ${paymentMethod} | AccountId is present, but is not configured for the wanted payment context. |
9101 | There was an error (9101), please contact our support. | Invalid accountId parameter | The SDK checks if the accountId string has only numbers. |
9055 | There was an error (9055), please contact our support. | Invalid currency parameter | |
9085 | There was an error (9085), please contact our support. | There are no available payment methods for this API key. | |
9031 | There was an error (9031), please contact our support. | Invalid card number separator | ['-', ' ', '']; this are the allowed card num separators |
9084 | There was an error (9084), please contact our support. | Failed to load available payment methods | Triggered when internal server error response for getting the payment methods api call. |
9127 | There was an error (9127), please contact our support. | resetCardDetails is available only when card fields are initialized | |
9073 | There was an error (9073), please contact our support. | Account not configured correctly. | The error is a result of an improperly created merchant account configuration:
|
9131 | There was an error (9131), please contact our support. | Status of the payment handle is ${status} | Thrown whenever the status is checked and is FAILED. |
Card Form Fields
PaysafeSDK supports building the checkout experience using both UIKit and SwiftUI.
All fields automatically picks up the default global theme for styling, but its also possible to customize it through it’s own theme (check “Styling the card payments form” section).
Card Holder Name Field
This is a text field specialized for securely storing and validating cardholder names.
Swift UI and UIKit Components
let field = PSCardholderNameInputSwiftUIView(cardholderName: String?, animateTopPlaceholderLabel: Bool = true, hint: String = "Cardholder Name")
let field = PSCardholderNameInputView(cardholderName: String?, animateTopPlaceholderLabel: Bool = true, hint: String = "Cardholder Name")
Parameter:
- cardholderName: Optional string parameter representing the initial value of the cardholder name field. If provided, it populates the field with the specified value.
- animateTopPlaceholderLabel: Optional boolean parameter to enable/disable the default placeholder animation.
-
hint: Optional String parameter to customize the input's placeholder.
Card Number Field
This is a text field specialized for securely storing and validating card number values. It automatically validates and updates itself based on the card brand.
Swift UI and UIKit Components
let field = PSCardNumberInputSwiftUIView(separatorType: .dash, animateTopPlaceholderLabel: Bool = true, hint: String?)
let field = PSCardNumberInputView(separatorType: .dash, animateTopPlaceholderLabel: Bool = true, hint: String?)
Parameter:
- animateTopPlaceholderLabel: Optional Boolean parameter to enable/disable the default placeholder animation.
-
hint: Optional String parameter to customize the input's placeholder.
Possible values for separators:
- .whitespace: Whitespace separator
- .none: No separator
- .dash: Dash separator
- .slash: Slash separator
Card Expiry Date Field
This field handles card expiry formatting, styling, auto-cursor movement for the year part, and offers a date picker widget for ease of selection.
Swift UI and UIKit Components
let field = PSCardExpiryInputSwiftUIView(inputType: .datePicker, animateTopPlaceholderLabel: Bool = true, hint: String = "MM YY")
let field = PSCardExpiryInputView(inputType: .datePicker, animateTopPlaceholderLabel: Bool = true, hint: String = "MM YY")
Parameter:
- animateTopPlaceholderLabel: Optional Bool parameter to enable/disable the default placeholder animation
-
hint: Optional String parameter to customize the input's placeholder
Possible values for input type:
- .text: Normal text input. It automatically applies the MM/YY format.
- .datePicker: Opens the native date picker.
Card CVV Field
This field handles card CVV formatting, styling, hiding the CVV, and offers essential events for handling user interactions. Because there are cards that have 4 digits for CVV and other that have 3 digits, the number of accepted characters updates automatically within the form, based on the card number field value.
Swift UI and UIKit Components
let field = PSCardCVVInputSwiftUIView(isMasked: Bool = true, cardBrand: PSCardBrand = .unknown, animateTopPlaceholderLabel: Bool = true, hint: String = "XXX")
let field = PSCardCVVInputView(isMasked: Bool = true, cardBrand: PSCardBrand = .unknown, animateTopPlaceholderLabel: Bool = true, hint: String = "XXX")
Parameters:
- isMasked: Boolean indicating if the text should be of type .isSecureTextEntry, default as false.
- cardBrand: PSCardBrand, default as unknown. It updates automatically within the form, based on the card number field brand.
- animateTopPlaceholderLabel: Optional Boolean parameter to enable/disable the default placeholder animation
- hint: Optional String parameter to customize the input's placeholder