The ProcessOut mobile SDKs offer a pre-built form that you can embed in your app to allow users to scan payment cards instead of entering details manually. This feature provides a seamless user experience while enabling you to control the interface’s look and feel.

iOS

Getting Started

The card scanner requires an access to the camera to function properly. Ensure your app requests camera permissions in the Info.plist file by adding the NSCameraUsageDescription key with a user-facing description of why the camera is needed. For example:

<key>NSCameraUsageDescription</key>
<string>The camera is used to scan payment cards.</string>

🚧

Do not attempt to use card scanner without providing a camera usage description. The absence of it will cause your app to crash when accessing the camera.

To use the card scanner, obtain and set up the ProcessOut SDK in your iOS project. Follow the SDK’s setup instructions for integration details.

SwiftUI

The SDK provides the POCardScannerView , a ready-to-use SwiftUI view for card scanning. It includes a callback to handle the scanned card details or any scanning failure.

import ProcessOutUI

POCardScannerView { result in
    switch result {
    case .success(let scannedCard):
        // Handle the scanned card details
    case .failure(let failure):
        // Handle the scanning failure
    }
}

UIKit

If your app relies on UIKit, you can embed the POCardScannerView using UIHostingController into your UIKit view hierarchy. For more information, refer to Apple's documentation on UIHostingController.

import ProcessOutUI

let viewController = UIHostingController(
    rootView: POCardScannerView { result in ... }
)

Configuration

The POCardScannerView supports customization through a configuration object. The following options are available:

• Title and Description: Customize the text displayed on the screen.

• Cancel Button: Configure properties such as title, icon, and confirmation dialog.

Example usage:

let configuration = POCardScannerConfiguration(
    title: "Scan your card",
    description: "", // Removes description
    cancelButton: .init(
        icon: Image(systemName: "xmark"),
        confirmation: .init() // Adds a confirmation dialog
    )
)

POCardScannerView(configuration: configuration) { result in ... }

Styling

To further customize the appearance of the POCardScannerView, create a style instance and pass it when invoking the cardScannerStyle method.

The SDK includes a default implementation, PODefaultCardScannerStyle, that accepts following adjustments:

• Title and Description Styles: Modify font, color, and other text attributes.

• Torch Toggle Style: Adjust appearance for the flashlight toggle.

• Video Preview Styling: Customize the camera preview area.

• Card Information Styling: Update the appearance of scanned card details.

• Cancel Button Style: Adjust button appearance.

Example usage:

let style = PODefaultCardScannerStyle(
    videoPreview: .init(backgroundColor: .systemBackground, border: .clear, ...),
    cancelButton: .primary,
    ...
)

POCardScannerView { result in
    // Handle result
}
.cardScannerStyle(style)

Advanced Customization

For more extensive UI modifications, implement the POCardScannerStyle protocol directly. For example:

struct CustomCardScannerStyle: POCardScannerStyle {

    func makeBody(configuration: Configuration) -> some View {
        VStack(spacing: 24) {
            Text("Scan Card")
                .font(.headline)
                .foregroundColor(.black)
            configuration.videoPreview
                .background(Color.black)
                .clipShape(RoundedRectangle(cornerRadius: 10))
            configuration.card?.number
                .font(.body)
                .foregroundColor(.black)
            configuration.cancelButton
        }
        .padding()
        .background(backgroundColor)
    }

    var backgroundColor: Color {
        .white
    }
}

You could refer to the PODefaultCardScannerStyle implementation for additional guidance.