Skip to content


Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Stripe Payment Modal Next JS Demo

This sample project shows how to implement Stripe payments & subscriptions within a modal dialog using PaymentModal and create-next-app.


See a hosted version of the Next JS sample project here.

The hosted demo is running in Stripe test mode. Use 4242424242424242 as a test card number with any CVC + future expiration date.

Getting Started

This is a Next.js project bootstrapped with create-next-app.


To see the Stripe modals in action, you need to create a free PaymentModal account.

  1. Create a PaymentModal site.
  2. Clone this repo
  3. In the project directory, run cp .env.local.sample .env.local
  4. Open .env.local and update NEXT_APP_PAYMENT_MODAL_SITE_ID with your PaymentModal site id
  5. Run yarn to download npm packages
  6. Run yarn dev to open the Next app in development mode.
  7. Open http://localhost:3000 to view it in the browser.
  8. Update the products array in pages/api/index.js to use any HTML element attributes to attach click listeners to open your modals.

This sample and hosted demo project uses the following HTML element attributes, but you can use any valid HTML selector. Be sure to update the selectors in your PaymentModal account.

  • buttonId creates a modal with a Stripe payment intent using an amount.
  • className creates a modal with a Stripe payment intent using a Stripe price id.
  • dataSubscriptionCheckout creates a modal with a Stripe subscription using a Stripe price id.

Learn More

You can learn more about configuring Stripe modal properties in the PaymentModal documentation.

You can learn more about the Next app in the Next.js and create-next-app.

Get Support

If you found a bug or want to suggest a new [feature/use case/sample], please file an issue.

If you have questions, comments, or need help with the code, we're here to help:

on Twitter at @paymentmodal on Stack Overflow at the stripe-modal tag by email