How it works / Pricing table
Pricing table
The pricing table shows your public plans on your own website, one card per plan, with each plan's price, what it includes and a button. The button takes people to your developer portal, where they sign in and pay through Stripe Checkout, the same way they would from the portal's plan page.
<script src="https://your-app.usagerail.app/pricing.js" async></script>
<usagerail-pricing app="your-app"></usagerail-pricing>Add it to your site
- In the console, open your app's Portal page and copy the code under Pricing table. It already has your portal's address in it.
- Paste it where the plans should appear. The script can go anywhere on the page, and the
<usagerail-pricing>tag goes where the cards go.
Cards wrap into rows based on the space available, so on a phone each card gets its own row.
What it shows
Each card has the plan's name, its monthly or yearly price, how many units it includes and what happens past them, its rate limits, the trial, and the lines you entered under What's included. A prepaid plan shows the price of your cheapest credit pack. If any plan has both a monthly and a yearly price, a Monthly and Yearly switch appears above the cards.
Only plans with Show on the pricing table and portal turned on appear. After you change a plan, the table can take up to a minute to catch up.
The buttons depend on the plan:
| Plan | Button | Where it goes |
|---|---|---|
| Free | Get started, or Request access if you approve sign-ups | Your portal's sign-in page |
| Paid | Subscribe, or a trial button such as Start 14-day trial if the plan has a trial | Your portal's plan page with that plan picked, after signing in |
| Prepaid | Buy credits | The same, on the prepaid plan |
A paid plan has no button until your Stripe connection is set up, and a prepaid plan has none until a credit pack is on sale. If your portal is invite-only, free plans have no button either. Everything else about who can sign up follows your portal settings; see plans and checkout for what happens once they pay.
Look
The cards use your page's font and text color, and the brand color from your portal settings for the buttons and the switch. On a dark page they lighten that color so the buttons stay readable. To decide yourself, add theme="dark" or theme="light" to the tag. To open the table on yearly prices, add interval="year".
On the Free plan, a small Powered by UsageRail link appears under the cards of a live app. It's a normal link in your page, outside the cards. Test apps never show it, and paid plans can hide it in your portal settings.
If your site has a Content Security Policy
The script loads from your portal's address and fetches the plans from there. Allow that address in script-src and connect-src, for example https://your-app.usagerail.app, or your portal's own domain if it has one. The table's styles need no style-src change in current browsers. Older ones, such as Safari before 16.4, need inline styles allowed in style-src, or a nonce: put the same nonce in style-src and on the script tag, and the table passes it on to its styles.