Screen breakdown

The Web checkout screen is broken down into customisable components. These components are grouped within the framework to logically match where they appear on the screen:

Items

• CheckoutWebViewController.navigationBar: The area of the screen that contains the navigation items.

  • NavigationBar.leftBarButtonItem: This is the button your customer can use to dismiss the checkout. If your customer hasn’t finished the checkout and taps this button, they see a prompt with an alert to confirm they want to leave the screen.
  • NavigationItem.titleView: This title view shows your logo by default.
  • CheckoutWebViewController.ProgressView: This component appears on the navigation bar. It shows the progress of the web site that is currently loading in the webview.

• CheckoutWebViewController.webview: This is the main webview in the checkout screen. It loads the web checkout page and is responsible for displaying to pages across the checkout flow.

Architecture of the web checkout screen

Store

The generic ReSwift Store instance is constrained to CheckoutState. The Store takes in a reducer, a state and a middleware.

Reducer

The CheckoutReducerType encapsulates a Reducer function that reduces (modifies) the CheckoutState based on the Action received and the current CheckoutState.

State

The CheckoutState struct encapsulates all the state information required to present the Web checkout screen. The state that the view is in, checkout journey state and the data required to load the Web checkout screen.

Checkout analytics middleware

The CheckoutAnalyticsMiddleware provides the functionality to trigger analytics events depending on the actions that are dispatched.

The middleware intercepts all the actions that are triggered by the subscriber.

Actions

There are three broad types of Actions that the checkout reducers can handle:

• Common Actions for any type of web checkout.
• Actions just for bridge web checkout type.
• Actions just for parse web checkout type.

End points supported

We currently support two different end points depending on the product storage used in your version of the app. Talk to your Poq contact for more information about the following:

By default, the web checkout uses .cartTransfer.

To change this, you should inject the WebCheckoutApiType in the Web Checkout builder.