PayNow

Introduction

A hosted webstore is a complete store website that PayNow builds, hosts and serves for you. You pick or upload a template, and PayNow renders your products, cart, checkout and customer pages on a globally distributed edge network. There is no application code to write or host.

It is the quickest way to launch a store. If you would rather build your own front end, use the Storefront API together with PayNow.js instead. Both approaches are backed by the same store, products and customers.


How it works

Every hosted webstore lives at https://<slug>.paynow.store, where the slug is a unique name you choose in the Webstore section of the dashboard. You can also attach your own domain.

The appearance of the store comes from a template: a set of HTML, CSS, JavaScript, JSON and image files. Pages are written in Twig, so a template file is ordinary HTML with Twig tags where store data should appear. When a customer requests a page, PayNow picks the template file for that route, fills it with the variables for the current store, cart and customer, and returns the finished HTML.

PayNow.js is injected into every rendered page automatically, so checkout works on a hosted webstore without any setup on your side.

Templates

Templates are managed from the Webstore section of the dashboard. To get started, install one from the Template Marketplace, create a blank template, or upload an existing one as a zip archive. A webstore can hold several templates, but only one is active at a time. The rest stay available to edit and preview until you set one of them as the default.

Each template is edited in the dashboard's built-in code editor, file by file. While you work, a live preview of the template is available at its own preview URL and reloads itself whenever you save, so you can iterate without touching the live store.

Four files are the core of every template and cannot be deleted: index.html, category.html, product.html and cart.html. The full list of template files, and what each one renders, is on the Variables page.

Customising the store

There are three layers of customisation, each with its own page in this section:

  • Routes list every URL the webstore serves, the template file that renders it, and the query parameters it accepts.
  • Variables describe the data available inside templates, from the store and its products to the current customer and cart.
  • Modules are dynamic components such as payment goals, top customers and recent payments. You enable and order them in the dashboard and place them in a template with a single tag.

Templates that ship a schema.json file can expose their own options, such as colours or feature toggles, which the dashboard turns into a settings form for the store owner. Templates without a schema can still receive free-form variables defined in the dashboard.

Migrating from Tebex

Templates written for Tebex can be used with a hosted webstore by switching the template's compatibility mode to Tebex. PayNow translates Tebex file names and checkout calls to their PayNow equivalents. Not every feature maps one to one, so review the rendered store before making the template live.

Custom domains

To serve the store from your own domain, add it in the Webstore section of the dashboard and create the CNAME record the dashboard shows you at your DNS provider. If your provider offers proxying, leave it off for this record. PayNow verifies the record and issues a TLS certificate automatically. DNS changes can take up to 24 hours to propagate. Custom domains are a Pro feature.

Limits

LimitValue
Files per template250
Size per file50 MB
File typesHTML, CSS, JavaScript, JSON, PNG, JPEG, GIF, SVG, WebP
Slug3 to 36 characters: lowercase letters, digits, - and _