SecurityCodeComponent.md

Make a payment with a hosted security code

Use our security code component to make a compliant saved card payment in regions where sending a security code is always mandatory.

Within this flow, we will securely tokenise the security code and return a security code token to your application layer, which you can then use to continue the payment flow with.

Step 1: Initialise the configuration

var configuration = SecurityCodeComponentConfiguration(apiKey: "PUBLIC_KEY",                        // set your public key
                                                       environment: Frames.Environment.sandbox)     // set the environment

Step 2: Create a UIView

Either create a UIView on storyboard (or a nib file) and define the Custom Class and Module like below and create an IBOutlet in the code counterpart:

Or, create it programmatically:

let securityCodeView = SecurityCodeComponent()
securityCodeView.frame = parentView.bounds
parentView.addSubview(securityCodeView)

Step 3: Style the component

We are using a secure display view so it won't be possible to edit the properties of the inner text field. We provide the SecurityCodeComponentStyle to allow the component to be configured. Other than text style, all other attributes can be configured like any other UIView.

Note that security code view has a clear background by default.

    let style = SecurityCodeComponentStyle(text: .init(),
                                           font: UIFont.systemFont(ofSize: 24),
                                           textAlignment: .natural,
                                           textColor: .red,
                                           tintColor: .red,
                                           placeholder: "Enter here")
configuration.style = style

Step 4: Inject an optional card scheme for granular security code validation

If you don't define a card scheme, then all 3 and 4 digit security codes are considered valid for all card schemes. If you don't use the SDKs front-end validation, you will get an error at the API level if you don't define a card scheme and the CVV is invalid. If the CVV is length 0, the SDK will throw a validation error when calling createToken independent from the injected card scheme.

configuration.cardScheme = Card.Scheme(rawValue: "VISA") // or you can directly use `Card.Scheme.visa`. You should be getting the scheme name string values from your backend.

Step 5: Call the configure method

securityCodeView.configure(with: configuration) { [weak self] isSecurityCodeValid in
  DispatchQueue.main.async {
    self?.payButton.isEnabled = isSecurityCodeValid 
  }  
 }

Step 6: Create a security code token

securityCodeView.createToken { [weak self] result in
  DispatchQueue.main.async {
      switch result {
      case .success(let tokenDetails):
        self?.showAlert(with: tokenDetails.token, title: "Success")

      case .failure(let error):
        self?.showAlert(with: error.localizedDescription, title: "Failure")
      }
   }
}

You can then continue the payment flow with this token by passing into a field name as cvv in the payment request.