---
url: /zoho-payments-whmcs/features/widget-checkout.md
description: >-
  How the embedded Zoho Payments widget checkout works — from Pay Now, through
  the in-page widget, to API-verified payment and a Paid invoice.
---

# Widget checkout

Customers pay a WHMCS invoice inside an **embedded Zoho Payments widget** — no redirect, no leaving your site. WHMCS confirms the result the moment the customer finishes paying.

::: info Your server never sees card data
The widget is Zoho's secure, in-page component. Card details are collected by Zoho inside the widget — your WHMCS server never handles raw card numbers.
:::

## The checkout, step by step

| Step | What happens |
| --- | --- |
| **1. Pay Now** | Customer selects Zoho Payments and clicks **Pay Now**; WHMCS loads the widget in place using your **Widget API Key** and **Account ID** |
| **2. Widget opens** | Customer enters details and completes the payment inside the widget — nothing leaves the invoice page |
| **3. API verified** | WHMCS does not trust the on-screen result; it **verifies the payment against the Zoho API** to confirm the money was taken |
| **4. Marked Paid** | On Zoho's confirmation, WHMCS marks the invoice **Paid**, records the transaction, and stores the **processing fee** Zoho reports |

![The embedded Zoho Payments widget on an invoice](/zoho-payments-whmcs/img/zoho-payments-widget-checkout-widget.png)
*Client area → Invoice → Pay Now (embedded Zoho Payments widget)*

::: tip Widget troubleshooting
A missing or blank modal indicates an incorrect **Widget API Key** or **Account ID**. Verify both in **Setup → Payment Gateways → Zoho Payments** and inspect browser console logs.
:::

## India and US data centres

Set **Data Center** to match your Zoho account region. Mismatched regions between credentials and gateway configuration cause widget initialization and OAuth errors.

| Data Center | Zoho domain | Choose this if… |
| --- | --- | --- |
| **IN** | `.in` (India) | Your Zoho account and Developer Console are on `zoho.in` |
| **US** | `.com` (United States) | Your Zoho account and Developer Console are on `zoho.com` |

See the [Zoho OAuth setup guide](/zoho-payments-whmcs/guides/zoho-oauth) to line these up.

::: warning Test prior to going live
Enable **Test Mode** and process a test transaction. Verify the invoice updates to **Paid** and fees are recorded before switching to live mode (see [Going live guide](/zoho-payments-whmcs/guides/going-live)).
:::

## Related pages

* [Webhooks and Payment Links](/zoho-payments-whmcs/features/webhooks-and-payment-links)
* [Security](/zoho-payments-whmcs/features/security)
* [Zoho OAuth setup](/zoho-payments-whmcs/guides/zoho-oauth)
* [Configuration](/zoho-payments-whmcs/configuration)
* [Troubleshooting](/zoho-payments-whmcs/troubleshooting)