Last Updated: 23 August 2024 | Change Log

Card Validation

Validate your customer's card details before processing them.


Warning

The validation does not check if your customer's card details are correct. The validation only checks the format of the entered details.

Get started

  • you have added the AccessCheckoutSDK to your project as a Cocoapods dependency
  • you have added an import AccessCheckoutSDK at the top of your swift file

The four basic components for this integration are:

  • Your UITextField's for PAN, expiry date and CVC
  • An AccessCheckoutCardValidationDelegate is designed to receive events pertaining to validation
  • An instance of CardValidationConfig contains all the information required for the initialization of the validation flow, including references to the view components to enable validation for
  • An AccessCheckoutValidationInitialiser is responsible for initializing the validation flow
Full Sample Integration

You can see an example of the CVC validation integration here.

Create and reference the UI components

To display your checkout form, you must create your layout first using your storyboard.

Here's an example of how you would reference your UI components using unique identifiers.

import AccessCheckoutSDK

class ViewController: UIViewController {

    @IBOutlet weak var panTextField: UITextField!
    @IBOutlet weak var expiryDateTextField: UITextField!
    @IBOutlet weak var cvcTextField: UITextField!
    ...

Implement the AccessCheckoutCardValidationDelegate protocol

This ensures you are notified of validation events and card brand changes on customer input.

Here's an example.

extension ViewController: AccessCheckoutCardValidationDelegate {

    // This event handler is notified when the card brand detected by the SDK has changed
    func cardBrandChanged(cardBrand: CardBrand?) {
        // This piece of code updates in the UI a card image displayed in a UIImageView next to the PAN
        // A cardBrand contains a name and an array of images objects.
        // Each image object has a URL and a type (either image/png or image/svg+xml) and represents the same brand 
        if let imageUrl = cardBrand?.images.filter({ $0.type == "image/png" }).first?.url, let url = URL(string: imageUrl) {
            DispatchQueue.global(qos: .userInteractive).async {
                if let data = try? Data(contentsOf: url) {
                    DispatchQueue.main.async {
                        self.imageView.image = UIImage(data: data)
                    }
                }
            }
        } else {
            // This occurs when the SDK has not been able to identify the card brand from the PAN entered by the customer
            self.imageView.image = ...
        }
    }

    // This event handler is notified when the PAN becomes valid or invalid
    func panValidChanged(isValid: Bool) {
        // You might want to change the text colour
        panTextField.textColor = isValid ? nil : UIColor.red
        
        if !valid {
            // You might want to disable a submit button which would normally be clicked on when all fields are valid
            submitButton.isEnabled = false
        }
    }

    // This event handler is notified when the CVC becomes valid or invalid
    func cvcValidChanged(isValid: Bool) {
        // You might want to change the text colour
        cvcTextField.textColor = isValid ? nil : UIColor.red
        
        if !valid {
            // You might want to disable a submit button which would normally be clicked on when all fields are valid
            submitButton.isEnabled = false
        }
    }

    // This event handler is notified when the expiry date becomes valid or invalid
    func expiryDateValidChanged(isValid: Bool) {
        // You might want to change the text colour
        expiryDateTextField.textColor = isValid ? nil : UIColor.red
        
        if !valid {
            // You might want to disable a submit button which would normally be clicked on when all fields are valid
            submitButton.isEnabled = false
        }
    }

    // This event handler is notified when the PAN, expiry date and CVC are all valid
    func validationSuccess() {
        // You might want to enable a submit button when all fields are valid
        submitButton.isEnabled = true
    }
}

Instantiate a CardValidationConfig and initialize the validation

We highly recommend to do this in the viewDidLoad() handler of your UIViewController. This is because the AccessCheckoutValidationInitialiser asynchronously requests a file containing validation configuration.

override func viewDidLoad() {
    ...
    let validationConfig = try! CardValidationConfig.builder()
        .pan(panTextField)
        .expiryDate(expiryDateTextField)
        .cvc(cvcTextField()
        .accessBaseUrl(<ACCESS_BASE_URL>)
        .validationDelegate(self)
        .build()
    
    AccessCheckoutValidationInitialiser().initialise(validationConfig)
}
PlaceholderDescriptions
<ACCESS_BASE_URL>
  • For testing use: https://try.access.worldpay.com/
  • For live use: https://access.worldpay.com/

Card validation rules

The validation logic in the SDK, is based off a set of default rules for any card type. Specific brand rules are fetched from a CardTypes JSON file, which holds the validation rules and card brand logos for each brand. The icons are available in both SVG and PNG.

Validation rules

The table below shows the rules that our SDK uses to validate your customer's card details.

Card NameBIN RangePAN LengthCVC Length
Amex34, 37154
Diners300-305, 3095, 36, 38, 3914, 16, 193
Discover6011, 644 - 649, 6516, 193
JCB2131, 1800, 3088 - 3094, 3096 - 3102, 3112 - 3120, 3158 - 3159, 3337 - 3349, 3528 - 358916, 17, 18, 193
Maestro493698, 500000 - 506698, 506779 - 508999, 56 - 59, 63, 67, 612, 13, 14, 15, 16, 17, 18, 193
MasterCard51 - 55, 2221 - 2229, 223 - 229, 23 - 26, 270 - 271, 2720: optimized using 22 - 27163
Visa413, 16, 18, 193

Card brand restriction

The SDK enables you to optionally provide a list of card brands that you support. This means that if you do not support a certain card brand, the SDK notifies your code of an invalid PAN if an unsupported brand is recognized.

By default, the SDK allows cards from any brand. If you do not wish to restrict the card brands that you accept then you do not need to pass any configuration.

Example Configuration

To restrict the card brands that you accept, simply pass in an array of the brands that you do wish to accept when initializing the SDK.

The following validation configuration restricts the SDK to accept only American Express, Visa or Mastercard BIN ranges.

let validationConfig = try! CardValidationConfig.builder()
    ...
    .acceptedCardBrands(["visa", "mastercard", "AMEX"])
    ...
    .build()

Currently supported card brands

The SDK is able to recognize the following card brands:

BrandCode
American Express"amex"
Diners"diners"
Discover"discover"
JCB"jcb"
Maestro"maestro"
Mastercard"mastercard"
Visa"visa"
Note

If the SDK does not recognize a PAN as one of the above brands, it will be permitted as long as it meets the usual criteria for a valid PAN.

PAN formatting

The SDK allows PAN formatting as the customer types. This feature is disabled by default.

The PAN is formatted in the following way:

Card TypeFormatting
Visa, Mastercard, JCB, Discover, Diners, MaestroXXXX XXXX XXXX XXXX
AmexXXXX XXXXXX XXXXX

Enabling PAN formatting

To enable the PAN formatting behavior, simply call the enablePanFormatting method on the builder.

let validationConfig = try! CardValidationConfig.builder()
    ...
    .enablePanFormatting()
    ...
    .build()

Create session(s)

Once validation is in place you can request sessions to implement your payment flow.

Next steps


Create a session to pay with a card or
Create sessions to pay with a card and cvc