This sample project shows how to implement Stripe payments & subscriptions within a modal dialog using PaymentModal and Angular CLI.
See a hosted version of the Angular 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.
This project was bootstrapped with Angular CLI.
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.example .env
- Open
.env
and updateANGULAR_APP_PAYMENT_MODAL_SITE_ID
with your PaymentModal site id - Run
yarn start
to open the Angular app in development mode - Open http://localhost:4200 to view it in the browser
- Update the
app.component.html
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.data-subscription-checkout
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.
To get more help on the Angular CLI use ng help
or go check out the Angular CLI Overview and Command Reference page.
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-payment-modal tag by email