For developers

Add “Pay with Koha” to any site.

One script tag, no build step, real x402 settlement on Avalanche Fuji testnet. Two files, two jobs. Pick whichever fits where you're dropping it.

The modal:Just the card. Slot it next to your existing pricing plans.

The section:Modal plus a “how it works” explainer, side by side. A whole page section, ready to drop in as-is.

Option 1

The modal

For slotting next to pricing plans you already have.

Live demo

Real, not a mockup: it calls this site's own /api/pay. You'll need a browser wallet (Core or MetaMask) on Avalanche Fuji to actually pay.

Download suiteas-pay.js

Drop it in

<div
  data-suiteas-pay
  data-merchant="Your Product"
  data-amount="0.12"
  data-pay-url="https://your-suiteas-deploy.example/api/pay"
></div>
<script src="https://your-suiteas-deploy.example/widget/suiteas-pay.js"></script>

data-merchant*

Name shown in the modal, e.g. "PropertyUp".

data-pay-url*

Full URL to a Suiteas /api/pay endpoint. On someone else's site this must be the absolute deployed URL. Same-origin "/api/pay" only works when the widget is hosted on this app itself.

data-amount

Starting amount in USD, e.g. "0.12". Visitors can edit it down to $0.001. Defaults to $0.01.

data-merchant-logo

Logo URL shown next to the merchant name. Falls back to a monogram if omitted.

data-coin-name

Ticker shown next to the amount. Defaults to "dNZD".

* required

Option 2

The section

A whole payment section: the modal on the left, a “how it works” explainer on the right, black background. Drop it straight into a page, no pricing plans required.

Live demo

Same real widget as Option 1, same /api/pay. Just the full-section layout.

Download suiteas-pay-section.js

Drop it in

<div
  data-suiteas-pay-section
  data-merchant="Your Product"
  data-amount="0.12"
  data-pay-url="https://your-suiteas-deploy.example/api/pay"
  data-title="Pay with Koha."
></div>
<script src="https://your-suiteas-deploy.example/widget/suiteas-pay-section.js"></script>

Extra variables

Everything from Option 1 works here too, plus:

data-title

Section heading next to the "how it works" steps. Defaults to "Pay with Koha."

data-subtitle

Optional line under the heading.

Already in React?

Skip the script tag and import SuiteasPayModal or SuiteasPaySection directly from the Modal Paywall/export package instead. Same components, same real settlement, full control over props and styling.