Skip to main content
Version: 1.x

Checkout

When you're ready to complete a sale, click the Checkout button to open the checkout modal. This is where you process payment and complete the order.

Checkout Modal Overview​

The checkout modal displays:

  • Order number - The WooCommerce order ID
  • Amount to Pay - Total amount due
  • Checkout Settings button - Troubleshoot display issues
  • Cashier - Who is processing the order
  • Customer - The customer for this order (clickable link)
  • Coupon code field - Apply discount codes
  • Order summary - Products, quantities, and totals
  • Payment methods - Available payment options
  • Cancel / Process Payment buttons

Payment Methods​

Available in Free Version​

The free version of WCPOS includes two payment gateways:

  • Cash - With amount tendered and change calculator
  • Card - For external card terminals

Additional Gateways (Pro)​

Pro Feature

Additional payment gateways require WCPOS Pro.

With Pro, you can enable:

  • Stripe Terminal - Direct integration with Stripe card readers
  • SumUp Terminal - Integration with SumUp card readers
  • Custom Gateways - Create your own payment integrations

See Payment for details on configuring gateways.

Selecting a Payment Method​

Click on a payment method to select it. The form updates to show relevant fields:

Cash:

  • Amount Tendered - Enter the amount the customer gives you
  • Change - Automatically calculated change to return

Card:

  • Process payment on your external card terminal
  • Click Process Payment to complete

Coupon Codes​

To apply a discount:

  1. Enter the coupon code in the field
  2. Click Apply coupon
  3. The discount appears in the order summary

Coupons must be configured in WooCommerce (WP Admin > Marketing > Coupons).

Processing Payment​

  1. Select a payment method
  2. For cash, enter the amount tendered
  3. Click Process Payment
  4. The order is completed and the receipt is shown

Checkout Settings (Troubleshooting)​

The checkout modal uses an iframe/webview to display the WooCommerce Order Pay page. This leverages WooCommerce's existing payment infrastructure, meaning any payment gateway that works with WooCommerce should work in the POS.

However, theme and plugin scripts can sometimes interfere. Click Checkout Settings to troubleshoot:

Disable All Styles and Scripts​

  • Disable wp_head - Removes all scripts/styles from the WordPress header
  • Disable wp_footer - Removes all scripts/styles from the WordPress footer

Disable Selected Styles​

Selectively disable CSS that may cause display issues:

  • wp-emoji-styles
  • wp-block-library
  • classic-theme-styles
  • woocommerce-layout
  • woocommerce-smallscreen
  • woocommerce-general
  • etc.

Disable Selected Scripts​

Selectively disable JavaScript that may interfere with payment gateways:

  • wc-add-to-cart
  • selectWoo
  • wc-checkout
  • woocommerce
  • html5shiv
  • etc.
tip

If a payment gateway doesn't display correctly:

  1. Try disabling theme styles first
  2. Then try disabling WooCommerce scripts that aren't needed
  3. Be careful not to disable scripts required by your payment gateway

Cancel​

Click Cancel to close the checkout modal without completing the order. The order remains as an open cart.