UI Components

The UI Component is an instance of ViewController. It provides functionality to create your own UI to have the same application look and feel during the checkout for the best user experience.

Create UI Component

Each UI Component represents a checkout screen and encapsulates its business logic. Create a class extends UIViewController which implements the specific UI Component protocol.

We provide the detailed guidance for each available UI Component:

Card UI Component

Add UI Component to Ready-to-use UI:

Use Checkout Setting object OPPCheckoutSettings to provise an instance of your UIViewController. For example:

OPPCheckoutSettings *checkoutSettings = [[OPPCheckoutSettings alloc] init];
[checkoutSettings customController:OPPViewControllerCardDetails withUiController:[MyCustomCardDetailsViewController alloc] initWithNibName:@"MyCustomCardDetailsViewController" bundle:nil];

let checkoutSettings = OPPCheckoutSettings()
checkoutSettings.customController(OPPViewController.cardDetails, withUiController: MyCustomCardDetailsViewController.init(nibName: "MyCustomCardDetailsViewController", bundle: nil))

The UI Components it is a Ready-to-Use UI extension. It provides functionality to create your own UI to have the same application look and feel during the checkout for the best user experience.

Create UI Component

Each UI Component represents a checkout screen and encapsulates its business logic. Create a class extends androidx.fragment.app.Fragment which implements the specific UI Component interface.

We provide the detailed guidance for each available UI Component:

Setup UI Components configuration

To use your UI Components create the UiComponentsConfig and set it in the CheckoutSettings. For example:

UiComponentsConfig uiComponentsConfig = new UiComponentsConfig.Builder()
        .setProcessingUiComponentClass(ProcessingUiComponentFragment.class)
        .setPaymentMethodSelectionUiComponentClass(PaymentMethodSelectionUiComponentFragment.class)
        .setCardUiComponentClass(CardUiComponenttFragment.class)
        .build();

checkoutSettings.setUiComponentsConfig(uiComponentsConfig);

val uiComponentsConfig = UiComponentsConfig.Builder()
    .setProcessingUiComponentClass(ProcessingUiComponentFragment::class.java)
    .setPaymentMethodSelectionUiComponentClass(PaymentMethodSelectionUiComponentFragment::class.java)
    .setCardUiComponentClass(CardUiComponentFragment::class.java)
    .build()

checkoutSettings.uiComponentsConfig = uiComponentsConfig

The default UI will be used, if the UI Component is not set for the screen. For example you can provide the UI Components only for payment methods you use for checkout.