Stripe Payment Modal Vue Demo
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.
To see the Stripe modals in action, you need to create a free PaymentModal account.
- Create a PaymentModal site.
- Clone this repo
- In the project directory, run
cp .env.local.sample .env.local
VUE_APP_PAYMENT_MODAL_SITE_IDwith your PaymentModal site id.
yarnto download npm packages.
yarn startto open the Vue app in development mode.
- Open http://localhost:8080 to view it in the browser.
- Update the
src/componentsto 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.
id="pm-payment-amount"creates a modal with a Stripe payment intent using an amount.
class="pm-payment-stripeid"creates a modal with a Stripe payment intent using a Stripe price id.
data-subscription-checkout="true"creates a modal with a Stripe subscription using a Stripe price id.
You can learn more about configuring Stripe modal properties in the PaymentModal 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: