DEV Community

Sachin Dilshan
Sachin Dilshan

Posted on

🚀 Introducing ngxsmk-stripe: A Modern Angular Stripe Plugin

#angular #stripe #opensource #webdev

I’m excited to share my latest open-source project: ngxsmk-stripe, an Angular 17+ plugin that makes integrating Stripe payments simple, customizable, and future-proof.

💳 Why I Built This

If you’ve ever tried to integrate Stripe into an Angular app, you know it can feel a bit overwhelming. I wanted a solution that was:

  • ✅ Angular-first (built with standalone components)
  • ✅ Future-proof (compatible with Angular 17+)
  • ✅ Flexible (one-time payments + subscriptions)
  • ✅ Customizable (SCSS theming + Stripe Appearance API)
  • ✅ Developer-friendly (success/error event emitters)

That’s how ngxsmk-stripe was born!

🔑 Key Features

  • 💳 One-time payments via Stripe PaymentElement
  • 🔄 Subscription & recurring billing with SetupIntent
  • 🎨 Theme customization using SCSS + Stripe Appearance API
  • 🌍 Localization support (locale input)
  • ⚡ Standalone Angular components (no NgModule required)
  • 📤 Event emitters for handling success and error states

⚡ Quick Example

Here’s how easy it is to drop a payment form into your Angular app:

<ngxsmk-stripe-payment
  [publicKey]="publicKey"
  [clientSecret]="paymentClientSecret"
  [returnUrl]="returnUrl"
  [appearance]="appearance"
  (paymentSuccess)="onPaymentSuccess($event)"
  (paymentError)="onPaymentError($event)">
</ngxsmk-stripe-payment>
Enter fullscreen mode Exit fullscreen mode

And for subscriptions:

<ngxsmk-stripe-subscription
  [publicKey]="publicKey"
  [clientSecret]="subscriptionClientSecret"
  [returnUrl]="returnUrl"
  [appearance]="appearance"
  (subscriptionSuccess)="onSubSuccess($event)"
  (subscriptionError)="onSubError($event)">
</ngxsmk-stripe-subscription>
Enter fullscreen mode Exit fullscreen mode

🎨 Customization

  • Use SCSS variables for button styles, colors, and typography
  • Leverage Stripe’s Appearance API for advanced UI theming

📦 Installation 

npm install ngxsmk-stripe @stripe/stripe-js
Enter fullscreen mode Exit fullscreen mode

🛠 Contributing

I’d love to see the community extend this plugin with new features (like saved payment methods, invoicing tools, etc.). PRs are welcome!

Repo 👉 GitHub: ngxsmk-stripe

📜 Closing Thoughts

With ngxsmk-stripe, you can focus on building your product while handling payments securely and elegantly in Angular. I hope this saves other devs the hours I spent piecing everything together!

🚀 Try it out, give it a ⭐ on GitHub, and let me know your feedback!

Top comments (0)