> ## Documentation Index
> Fetch the complete documentation index at: https://docs.webstorio.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Payment Gateway

> Accept one-time QRIS payments on your published Webstorio store — platform-managed or with your own Xendit key.

Collect payment at checkout on your published site. **Payment Gateway** adds QRIS (via Xendit) to **Online Store** orders. Buyers get a QR after placing an order and can track status with a private link — no login required.

**Available on:** Growth plan and above. Requires **Online Store**.

## Payment modes

| Mode | When | Where money settles | Store balance |
| - | - | - | - |
| **Webstorio payments (platform)** — default | Feature on, no custom Xendit key | Webstorio’s Xendit account | Credited on payment success; request manual payout |
| **Your own Xendit (custom)** | You paste your secret key + callback token | Your Xendit account | Not used |

Most stores can use **platform** mode so merchants never need a Xendit account.

## Step 1 — Enable the feature

1. Open your **project dashboard**.
2. Enable **Online Store**, then enable **Payment Gateway**.
3. Set the store **currency to IDR** (QRIS is Indonesia-only today).

## Step 2 — Choose how you collect payments

Open **Store → Payments**.

### Webstorio payments (default)

Checkout uses Webstorio platform. When a buyer pays:

1. The order becomes **paid**.
2. Your project **ledger** is credited for the full amount (platform fee is 0% for now).
3. Funds show under **Store → Balance**.
4. Request a **payout** with your bank details; Webstorio admin marks it paid after transfer.

### Connect your own Xendit (optional)

1. Choose **Connect your own Xendit**.
2. Paste your Xendit **secret key** (`xnd_development_…` for test, `xnd_production_…` for live).
3. Paste the **callback token** from the Xendit dashboard (required).
4. Copy the shown **webhook URL** into Xendit for Payment Request events.

Keys are encrypted at rest and are never exposed on your public site. You can switch back to Webstorio payments anytime.

## Step 3 — Checkout settings

In **Store → Settings**:

| Setting | Purpose |
| - | - |
| **Require customer details** | Turn off for guest checkouts that only need a prompt or notes |
| **Daily order limit** | Cap how many paid/pending slots you accept per day |
| **Timezone** | Day boundary for the daily limit (e.g. `Asia/Jakarta`) |
| **Fulfillment stages** | Labels buyers see while you work (e.g. `building, editing`) |
| **Payment expiry** | How long a QR stays valid |
| **Order email notifications** | On by default — emails you after QRIS succeeds |

## Step 4 — Buyer flow

1. Visitor creates an order (`createOrder`).
2. Response includes `order.trackingToken` and a `payment` object with a QR image.
3. Redirect them to a status page that calls `trackOrder(token)`.
4. When the QR expires, call `retryPayment(token)` to issue a new one.
5. After payment succeeds, update status and upload deliverables from **Store → Orders**.

For testing: with a **test** key (platform or custom), open an order in the dashboard and use **Simulate QRIS payment**.

## Balance & payouts (platform mode)

* **Store → Balance** shows available balance and ledger entries.
* Request a payout ≤ available balance with bank name, account number, and account name.
* Available balance drops when you request a payout (funds are held).
* If ops rejects a request, the hold is released back to your balance.
* Platform fee and T+N settlement holds are not applied in v1.

## For operators (platform)

Point the master Xendit **Payment Request** webhook at:

```
{NEXT_PUBLIC_BASE_URL}/api/webhook/payments/xendit
```

Verify with `XENDIT_WEBHOOK_SECRET` (same callback token as billing QRIS). Per-project webhook URLs remain for merchants on custom mode.

Ops reviews requests under **Admin → Payouts** and marks them **paid** or **rejected**.

## For developers

→ SDK methods: [Store SDK](https://docs.webstorio.com/api-reference/sdk/store.md)

CLI projects can declare:

```ts theme={"dark"}
features: {
  online_store: true,
  payment_gateway: true,
}
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.