Checking Out

With the cart filled with items (whether or not a customer is currently linked), the user can tap Checkout and the application will enter the checkout flow. Any customer linked to cart will still be linked in checkout.

Orders may be handled offline, but the order will not actually be submitted to the server upon finishing the checkout process. Instead, the order will be kept in memory until connection can be re-established and then is sent to the server at that time. If user is not in offline mode, the order will be created in the back end and will be available in other synced devices and the Unified Commerce Admin and Fulfiller interfaces.

Close-up of the Checkout button on the cart panel

The first screen of the checkout flow is Fulfillment Types, prompting the user to select between Ship To Home and Pickup Now. Ship to Home will be selected by default and will add additional steps in checkout allowing for the delivery address to be confirmed. Pickup Now assumes that the order will be fulfilled at checkout. Note that the products in the cart MUST be configured to allow for the desired fulfillment type. This configuration is done in the Products > Shipping section of the Unified Commerce Admin UI.

Tapping Select Customer or Change Customer, depending on whether a customer is already linked, will present a popup allowing a customer to be added to the cart. For guest checkouts without a linked customer, the customer name will show as "Guest." The customer can only be changed the first time this screen is visited – if the user continues forward, will not be able to go back and edit it.

The checkout page prompting the user to select a fulfillment type

Once satisfied with the selected fulfillment type and linked customer, tap Next. The following Select Shipping Address page will be presented only if Ship to Home is the chosen fulfillment type and a customer was linked. This screen will display all known shipping addresses for the linked customer and allow the user to select or edit an existing address, or add a new address to be used as the shipping destination.

To select an address, tap the desired address. To edit an address before selection, tap the Edit button for that address. Editing an address will bring up the usual address information form withal of the information auto-filled by the current address information.

The checkout page prompting the user to select or add an address

The Add New Address button will bring up a blank address form. Being filling out this form to create a new address if needed and clear the form if needed by tapping Clear Form in the top right. Note that these address forms are scrollable and some fields are hidden initially until scrolled to.

The New Shipping Address configuration options

Tap Validate Address to select between the original and validated address formats.

Close-up of the address validation response

Presented only for Ship To Home orders, the Select Shipping Method screen will prompt the user for shipping method selection. A list of available shipping methods will be displayed and the user should click on one to select it and tap Next to move on to the next step in the checkout progress.

While the example shown on the right is a placeholder shipping method, there will usually be multiple options such as 2-day, 3-day, overnight, etc. depending on what shipping options have been configured in the Unified Commerce Admin interface.

The checkout page prompting the user to select a shipping method

For both Pickup Now and Ship to Home, the main checkout screen displays a cart summary (with the subtotal, tax, shipping, etc.) and prompts the user to select the payment method and receipt method, as well as change the pickup location if applicable. The user will not be able to proceed to the next screen until a payment method is selected. To select a payment option, tap it and it will become highlighted.

The receipt options are Print Receipt, Print Gift Receipt, and Email Receipt. If print is selected, then the app will attempt to connect to the default hardware upon placing the order. If email receipt is selected, a popup will appear prompting for the email address that the shopper would like to have their order confirmation sent to.

The checkout page prompting the user to select a payment method

The following payment methods are available through this application:

  • Cash payment is supported out of the box. Note that Unified Commerce does not support cash payments, so a cash payment made through the app is submitted as "check" type when viewed in the Admin UI.
  • Check payment is supported out of the box.
  • Credit cards can be processed with Square or Card Knox. Ensure with Kibo engineers that the build is configured with the correct card options and that the integration is configured correctly for merchant.
  • Store credit is supported out of the box. If a customer is linked to the order in checkout, store credit will be presented as an available payment option. Selecting it will display the list of available store credits for the customer and let the user select which store credit to apply to the payment.

Square Integration

Square payment requires that you also have the Square app installed. Selecting Square payment during checkout will leave Point of Sale and open the Square app to prompt for payment. On successful payment, the user will be navigated back to the Point of Sale checkout with completed payment. Through the Square app, the shopper can use any payment option supported by Square such as manual credit card entry.

Card Knox Integration

Card Knox requires payment terminals that are received directly from Card Knox. Card Knox loads certain PAX terminals with firmware for specific merchants. Selecting Card Knox payment from the application will cause the payment terminal to prompt for payment and upon success, the application will navigate to the order completion screen.

To set up Card Knox, Kibo will need to reach out to them to ensure they load payment terminals with firmware that supports the implementation's merchant information. For example, a Pax S300 is one of the devices that are known to be supported. The application connects to these payment terminals over a local network. After plugging in the terminal to power and ethernet, it should turn on and briefly display its IP address. The device's IP may also be found in the router GUI. Once the IP is known, navigate to Settings > Hardware > Add Terminal in the Point of Sale application and enter the IP address. Then, click Add Manually for the application to identify which payment terminal to connect to.

Continue with Checkout

From the order placement screen (as shown in the previous screenshot), the pickup location is displayed in the top right for applicable orders with a button to change the location. Click Change Location to select a new pickup location.

By default, the current location is set as the pickup location and is automatically selected as shown here. However, the user may change this location if the shopper wants to pick their order up elsewhere. Tap the checkbox of a different location in the list within the popup and click Done to confirm this setting.

Pop-up prompting the user to select a fulfillment location

The payment screen will differ depending on which payment method was selected, and in a case such as Square then the user may be redirected out of this screen and to a separate payment application. selected payment method. The example below shows a cash payment that is being processed directly through the Point of Sale application.

After entering whatever payment information is required for that method, tap Start Payment to proceed. At this point, Point of Sale will "submit" the order in Unified Commerce and open the cash drawer or print the receipt if requested.

The checkout page prompting the user to input payment details

After proceeding past payment, the order confirmation screen will be displayed. Here, the user can view the order number, reprint the receipt, and either navigate to the order details or return to their storefront. If the order was made from a guest checkout, the user will also be able to add a new customer account with the shopper information from this order. Upon leaving this screen, the catalog will resync if not in Offline mode.

The final order confirmation page of the checkout

An example receipt:

A receipt with order and payment details