Skip to content

Modal Checkout View


open class FUIModalCheckoutViewController: UIViewController

A view controller to be presented as a modal form sheet. The view controller shows a CheckoutIndicatorView, which is drawn based on the set displayState.



let viewController = FUIModalCheckoutViewController.instantiateViewController()
viewController.title = "My Modal Checkout Title"
viewController.text = "Processing"
self.present(viewController, animated: false)

Inside a Storyboard

  1. Drag and drop a Storyboard Reference component to Interface Builder's canvas.
  2. Enter FUIModalCheckout as Storyboard and as Bundle.
  3. Create a segue between your Button and the storyboard reference and select Present Modally as action.
  4. Select the segue and in Interface Builder give it an identifier (e.g. showModalCheckout).
  5. In your view controller override prepare(for segue: UIStoryboardSegue, sender: Any?)
  6. From the segue get the destination and cast it to FUIModalCheckoutViewController.
  7. You can then register a delegate or change the controller's display state.


// override `prepareForSegue`-method and retrieve view controller from segue destination.
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
   guard let showModalCheckoutSegue = segue.identifier, showModalCheckoutSegue == "showModalCheckout" else {

   // keep a (weak) reference to modalCheckoutViewController
   self.modalCheckoutViewController = segue.destination as? FUIModalCheckoutViewController
   self.modalCheckoutViewController?.delegate = self

// implementation of FUIModalCheckoutViewControllerDelegate callback.
public func dismissController(_ controller: FUIModalCheckoutViewController) {
   //stop any loading or checkout! User cancelled it...
   //... or set state to completed.
   self.modalCheckoutViewController?.changeDisplayState(to: .completed) {
       self.modalCheckoutViewController?.dismiss(animated: true)

// While the FUIModalCheckoutViewController is shown, you might want to change the display state according to
// your loading / checkout progress. E.g. when you are done, you can change the state to `.completed`.
self.modalCheckoutViewController?.displayState = .completed
self.modalCheckoutViewController?.text = "Completed"


Supported style classes



The delegate object with type FUIModalCheckoutViewControllerDelegate is declared as a weak reference. So on deallocation it will be automatically set to nil. To keep it alive as expected, developer should retain the delegate object during its whole execution scope.

Last update: April 14, 2021