# 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[​](#checkout-modal-overview "Direct link to 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)
* **Add Coupon** button - Apply discount codes
* **Order summary** - Products, quantities, and totals
* **Payment methods** - Available payment options
* **Cancel / Process Payment** buttons

## Payment Methods[​](#payment-methods "Direct link to Payment Methods")

### Available in Free Version[​](#available-in-free-version "Direct link to 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)[​](#additional-gateways-pro "Direct link to Additional Gateways (Pro)")

Pro Feature

Additional payment gateways require [WCPOS Pro](/getting-started/pro-license.md).

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](/payment/.md) for details on configuring gateways.

### Selecting a Payment Method[​](#selecting-a-payment-method "Direct link to 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

## Coupons[​](#coupons "Direct link to Coupons")

The cart includes an **Add Coupon** input above the totals (Pro only). Type the code or search by description; the coupon validates locally and appears as a removable pill. Multiple coupons stack sequentially.

See **[Applying Coupons at the Till](/coupons/applying-coupons.md)** for the full workflow — search, pills, sequential discounts, and the table of validation errors and resolutions. For coupon types, validation rules, and setup in WooCommerce, see [Coupons](/coupons/.md).

## Processing Payment[​](#processing-payment "Direct link to 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](/receipts/at-checkout.md) is shown

One payment method per order

An order is paid with a single payment method — WCPOS doesn't currently support split or partial payments (e.g. part cash, part card) across one order. Split-payment support is on the [roadmap](https://github.com/orgs/wcpos/projects/4).

## Checkout Settings (Troubleshooting)[​](#checkout-settings-troubleshooting "Direct link to 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:

![Checkout Settings in the Checkout Modal](/img/checkout-settings.png)

Checkout Settings in the Checkout Modal

![Form to disable all styles and scripts](/img/disable-styles-and-scripts.png)

Form to disable all styles and scripts

### Disable All Styles and Scripts[​](#disable-all-styles-and-scripts "Direct link to Disable All Styles and Scripts")

Nuclear Option

This is the nuclear option and should only be used for testing or in rare cases where the developer knows what they are doing. Disabling all wp\_head scripts will remove even the WooCommerce scripts necessary to expand/contract the payment gateways, potentially breaking payment functionality.

* **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[​](#disable-selected-styles "Direct link to 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[​](#disable-selected-scripts "Direct link to 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[​](#cancel "Direct link to Cancel")

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

## Related Documentation[​](#related-documentation "Direct link to Related Documentation")

[ReceiptsAfter checkout, print or email receipts](/receipts/at-checkout.md)

[Payment MethodsConfigure payment gateways](/payment/.md)

[Custom GatewaysCreate custom payment integrations](/payment/gateways/.md)