---
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

When a customer pays a WHMCS invoice with Zoho Payments, they never leave your site. Instead of a
redirect to an external page, the payment options open in an **embedded Zoho Payments widget**
right on the invoice. This keeps the checkout fast and on-brand, and it lets WHMCS confirm the
result the moment the customer finishes paying.

This page walks you through what the customer sees, what happens behind the scenes, and how the
two supported Zoho data centres fit in.

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

## The checkout, step by step

### 1. The customer clicks Pay Now

On their invoice, the customer selects Zoho Payments and clicks **Pay Now**. WHMCS loads the
embedded widget in place, using your **Widget API Key** and **Account ID** to initialise it for
your Zoho account.

### 2. The widget opens

The customer sees the Zoho Payments widget with the available payment options. They enter their
details and complete the payment inside the widget — nothing leaves the invoice page.

::: tip If the widget doesn't appear
A blank or missing widget almost always means the **Widget API Key** or **Account ID** is wrong or
empty. Re-check both under **Setup → Payment Gateways → Zoho Payments** and open the browser
console for clues.
:::

### 3. WHMCS verifies the payment

When the customer finishes paying, WHMCS does **not** simply trust the widget's on-screen result.
It **verifies the payment against the Zoho API** to confirm the money was actually taken. This
API check is what makes the outcome trustworthy — a tampered browser can't fake a paid invoice.

### 4. The invoice is marked Paid

Once Zoho confirms the payment, WHMCS marks the invoice **Paid**, records the transaction details,
and stores the **processing fee** Zoho reports so your accounting stays accurate.

![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)*

## India and US data centres

Zoho runs separate data centres, and your account lives in one of them. The gateway supports both:

| 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` |

Set the **Data Center** field to match where your Zoho account lives. This must be the same data
centre you used when creating your OAuth app and refresh token — mixing them causes token and
widget errors. See the [Zoho OAuth setup guide](/zoho-payments-whmcs/guides/zoho-oauth) to line
these up correctly.

::: warning Test before you go live
Turn **Test Mode** on and run a payment through the widget end-to-end before switching to live.
Confirm the invoice reaches **Paid** and the fee is recorded. When it all works, follow the
[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)