Integration Guides
  1. In-App Payments
  2. iOS

Pay by Card button

Drop-in UIView that launches the Scan to PayKit checkout flow — minimal code, consistent UX.

The MPPayByCard view is a pre-built UIView subclass you can drop into your storyboard or build programmatically. When tapped, it launches the Scan to PayKit checkout flow. Use it whenever you want a consistent Scan to Pay button without designing your own.

For the underlying flow it triggers, see Payments.

Adding the view via Storyboard

  1. Drag a UIView onto your storyboard
  2. Constrain it where you want the button to sit
  3. Open the Identity Inspector and set the Custom Class to MPPayByCard
  4. Wire up an @IBOutlet in your view controller
@IBOutlet weak var payByCard: MPPayByCard!

Set the delegate in viewDidLoad:

override func viewDidLoad() {
    super.viewDidLoad()
    payByCard.delegate = self
}

Adding the view programmatically

let payByCard = MPPayByCard(frame: .zero)
payByCard.translatesAutoresizingMaskIntoConstraints = false
payByCard.delegate = self
view.addSubview(payByCard)

NSLayoutConstraint.activate([
    payByCard.leadingAnchor.constraint(equalTo: view.layoutMarginsGuide.leadingAnchor),
    payByCard.trailingAnchor.constraint(equalTo: view.layoutMarginsGuide.trailingAnchor),
    payByCard.bottomAnchor.constraint(equalTo: view.layoutMarginsGuide.bottomAnchor, constant: -16),
    payByCard.heightAnchor.constraint(equalToConstant: 56)
])

Handling the tap

Adopt the MPPayByCardDelegate protocol and implement the tap callback. From there, launch the standard checkout flow:

extension CheckoutViewController: MPPayByCardDelegate, MPScanToPayDelegate {
    func didPayByCard() {
        let code      = "6799782555"
        let apiKey    = "YOUR_API_KEY"
        let system    = MPSystem.test

        let scanToPay = MPScanToPay()
        scanToPay.checkout(withCode: code,
                           apiKey:   apiKey,
                           system:   system,
                           controller: self,
                           delegate:   self)
    }
}

Result handling

The button doesn't introduce new callbacks — you handle the result exactly the way you would for a direct MPScanToPay().checkout(...) invocation. See Payments.

Styling

MPPayByCard is brand-themed and not user-customisable. You can position and size it; you can't change its label, colours, or fonts. If you need a fully custom button, call MPScanToPay().checkout(...) from your own UIButton instead.

What's next

Updated 2 days ago