Custom checkout flow example

This example uses:

• Next.js
• react-stripe-js for Stripe Elements
• The Hyper API (docs)

Deploy your own

Once you have access to the environment variables you'll need from the Hyper dashboard, deploy the example using Vercel:

Included functionality

• 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

Required configuration

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

Authors

• @benbotvinick