Search Overlay

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

  1. The cardholder name view defined through UIKit or SwiftUI.
  2. The card number view defined through UIKit or SwiftUI.
  3. The card expiry view defined through UIKit or SwiftUI.
  4. 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.

  • If you are a merchant, then this field is required only if you have more than one account configured for the same payment method and currency.
  • If you are a partner using a shared API key, then this field is mandatory.
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. 

  • public type alias PSCardFormInitializeBlock = (Result<PSCardForm, PSError>) > Void. 
  • The initialize method returns a Result object that represents either a PSCardForm instance when successful or an error 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:
  • Merchant has no account or payment methods configured.
  • The account that is provided on initialize is not configured for the merchant.
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