MaiAbdElmonem / AKOtpView

Amaizing OTP View to handle otp/short codes

AKOtpView

Example

To run the example project, clone the repo, and run pod install from the Example directory first.

How to use

1- Add UIView to your UIViewController nib or in storyboard and from Identity Inspector change the class to AKOtpView

2- Click on Attributes Inspector and customize your view with the following attributes:
        a- Number Of Digits: set how many digits are you expecting from short code
        b- Border Error Color: set otp circle border color in error state
        c- Border Normal Color: set otp circle border color in normal state
        d- Border Fill Color: set otp circle border color when the digit is set
         e- Text Error Color: set otp text color in error state
        f- Text Normal Color: set otp text color in normal state
        g- Border Width: set circle border width default is 2.0

3- In ViewController add bellow code:

@IBOutlet weak var otpView: AKOtpView!
let correctOtp = "1234"

override func viewDidLoad() {
        super.viewDidLoad()
      
        otpView.setupView(withFont: UIFont.systemFont(ofSize: 30)) { (code) in
            // TODO: - Check if entered code is correct
            if code != self.correctOtp {
                self.otpView.isError = true
            }
        }
    }


 override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        
        // TODO: - this is optional, to open the keyboard automatically 
        otpView.openKeyboard()
    }

Installation

AKOtpView is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod 'AKOtpView'

Author

Adham Alkhateeb, [e-mail]

License

AKOtpView is available under the MIT license. See the LICENSE file for more info.