Skip to content

README: live demos, and clearer event key setup #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
pietechsolution wants to merge 1 commit into from
Closed

README: live demos, and clearer event key setup #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .env.example
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Event key for the event you want to sell, for example ev_9f3a.
# Your event key. It starts with ev_ and is at the top of the event's page in the dashboard (not the pk_ key).
VITE_SEATLAYER_EVENT_KEY=ev_replace_me

# Publishable key for the same account. It is safe in browser code.
Expand Down
19 changes: 14 additions & 5 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,16 @@ payment gateway. Every example is a route in one small Vite and React
application, and each one names the question it answers and links the matching
documentation page.

## Live demos

Try SeatLayer in your browser before you clone anything:
[pick a seat](https://app.seatlayer.io/demo/play/grand-theatre) · [the 3D venue](https://app.seatlayer.io/demo/play/grand-theatre?tour=3d) ·
[the chart designer](https://app.seatlayer.io/demo/designer) ·
[all live demos](https://docs.seatlayer.io/start/live-demos/).
Those demos run on a template chart with no server event behind them, so a
hold there is not real. This repository gives you real test holds and
bookings with your own test keys.

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/seatlayer/seatlayer-react-example)
[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/seatlayer/seatlayer-react-example)

Expand All @@ -22,8 +32,8 @@ npm run dev

| Variable | What it is |
| --- | --- |
| `VITE_SEATLAYER_EVENT_KEY` | The event you want to sell, for example `ev_9f3a` |
| `VITE_SEATLAYER_PUBLIC_KEY` | The publishable `pk_` key for the same account |
| `VITE_SEATLAYER_EVENT_KEY` | Your event key. It starts with `ev_` and is at the top of the event's page in the dashboard, with a Copy button |
| `VITE_SEATLAYER_PUBLIC_KEY` | Your public key (`pk_test_…` in test mode) from Developer → API keys, from the same account as the event |

Three more are optional: `VITE_SEATLAYER_EVENT_KEY_2` and
`VITE_SEATLAYER_EVENT_KEY_3` give the multiple events route real variety, and
Expand All @@ -32,8 +42,7 @@ notice instead of a chart until its keys are present, so the repository runs the
moment it is cloned.

Test mode is free, so you can run every step above before a live account exists.
Register `http://localhost:5173` as an embed origin for the key, otherwise the
chart will refuse to bootstrap. Never put a secret `sk_` key in browser code.
Never put a secret `sk_` key in browser code.

## Examples in this repo

Expand Down Expand Up @@ -204,7 +213,7 @@ import { SeatingChart } from "@seatlayer/react";

<SeatingChart
ref={chartRef}
event="ev_9f3a"
event="<YOUR_EVENT_KEY>"
publicKey="pk_test_..."
currency="USD"
onSelectionChange={setSeats}
Expand Down
Loading