Stripe Payment Modal Plain HTML Demo
This sample project shows how to implement Stripe payments & subscriptions within a modal dialog using Payment Modal and plain old HTML.
See a hosted version of this plain HTML demo project here.
The hosted demo is running in Stripe test mode. Use
4242424242424242 as a test card number with any CVC + future expiration date.
This is a site written in simple HTML and CSS.
To see the Stripe modals in action, you need to create a free Payment Modal account.
- Clone this repo.
- In the project directory, open
index.htmlto view it in the browser. Copy the hostname (i.e.
- Create a new Payment Modal site, set the domain as hostname from step 2.
- Add at least one modal to your Payment Modal site with an Amount, set the HTML Selector as
- Refresh your page
index.htmlin the browser and click on the "Amount Charge" button to open the modal.
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 Payment Modal account.
buttonIdcreates a modal with a Stripe payment intent using an amount.
classNamecreates a modal with a Stripe payment intent using a Stripe price id.
dataSubscriptionCheckoutcreates a modal with a Stripe subscription using a Stripe price id.
You can learn more about configuring Stripe modal properties in the Payment Modal documentation.
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: