iOS Example Frames

A few examples are present in the repository. Let’s walk through the example called iOS Example Frames.

Walkthrough

To create the card token, you will need to instantiate the checkout API Client CheckoutAPIClient with your public key. If you don’t have one already, go to the checkout.com website to get a sandbox account.

    let checkoutAPIClient = CheckoutAPIClient(publicKey: "pk_test_03728582-062b-419c-91b5-63ac2a481e07",
                                              environment: .sandbox)

You can replace pk_test_03728582-062b-419c-91b5-63ac2a481e07 by your own public key.

  let cardViewController = CardViewController(cardHolderNameState: .hidden, billingDetailsState: .normal)

Instantiate a CardViewController that will show the form to enter card details. The constructor takes two arguments: cardHolderNameState and billingDetailsState. You can specified if you want to include those fields in the form.

    override func viewDidLoad() {
        super.viewDidLoad()
        // set the card view controller delegate
        cardViewController.delegate = self
        // replace the bar button by Pay
        cardViewController.rightBarButtonItem = UIBarButtonItem(title: "Pay", style: .done, target: nil, action: nil)
        // specified which schemes are allowed
        cardViewController.availableSchemes = [.visa, .mastercard]
    }

In the example, we replace the Done button by Pay. We also specified which schemes are allowed. By default, all schemes are allowed (see CardScheme). You can also used the CheckoutAPIClient to get the list of card providers that you set in the hub.

The controller must conform to the delegate CardViewControllerDelegate.

class MainViewController: UIViewController, CardViewControllerDelegate {

The delegate contains one method called onTapDone. This method is executed when the user tap on the done button to validate the card information. Note that in the example, the done button has been renamed Pay.

    func onTapDone(controller: CardViewController, card: CkoCardTokenRequest) {
        controller.navigationController?.popViewController(animated: true)
        checkoutAPIClient.createCardToken(card: card, successHandler: { cardToken in
            self.showAlert(with: cardToken.id)
        }, errorHandler: { error in
            print(error)
        })
    }

The onTapDone method takes the card token request generated by the user as an argument. You can used this card token request to generate a card token via our API. In the code above, checkoutAPIClient.createCardToken uses the card token request. It will make a call to the API to generate a card token. You should define a success and error handler to react to the API response.