This example uses:
- Next.js
- react-stripe-js for Stripe Elements
- The Hyper API (docs)
Once you have access to the environment variables you'll need from the Hyper dashboard, deploy the example using Vercel:
- Customizable interface using Bootstrap
- Scalable purchase page that fetches the latest release with a given password from the Hyper API.
- Card input using Stripe Elements
- Success, Out of Stock, and Password page templates
Copy the .env.local.example
file into a file named .env.local
in the root directory of this project:
cp .env.local.example .env.local
You will need a Hyper account (register) to run this sample. Once you have an account, go to the
developer dashboard to retrieve your API keys. You'll also need your Stripe publishable key,
which you can find in the Stripe dashboard. Once you have your API keys,
add them to the .env.local
file.
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=<replace-with-your-stripe-publishable-key>
NEXT_PUBLIC_HYPER_PUBLISHABLE_KEY=<replace-with-your-hyper-publishable-key>
HYPER_SECRET_KEY=<replace-with-your-hyper-secret-key>
Now install the dependencies and start the development server.
npm install
npm run dev
# or
yarn
yarn dev