Gathering detailed insights and metrics for ngx-stripe
Gathering detailed insights and metrics for ngx-stripe
Gathering detailed insights and metrics for ngx-stripe
Gathering detailed insights and metrics for ngx-stripe
@nomadreservations/ngx-stripe
@angular wrapper for StripeJS
@alexandru-paun/ngx-stripe
An Angular 6+ wrapper for StripeJS elements
ngx-stripe-checkout
With ngx-stripe-checkout you can integrate stripe checkout in angular.
ngx-stripe-sca
[](https://www.npmjs.com/package/ngx-stripe-sca) [](https://www.npmjs.com/package/ngx-stripe-sca)
npm install ngx-stripe
Typescript
Module System
Node Version
NPM Version
TypeScript (66.77%)
HTML (32.6%)
JavaScript (0.36%)
CSS (0.26%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
234 Stars
215 Commits
78 Forks
13 Watchers
22 Branches
20 Contributors
Updated on Jul 07, 2025
Latest Version
20.7.0
Package Id
ngx-stripe@20.7.0
Unpacked Size
660.75 kB
Size
94.27 kB
File Count
10
NPM Version
10.9.2
Node Version
22.13.1
Published on
May 28, 2025
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
1
3
Collect Payments with Stripe: The Angular Way
Ngx Stripe is a comprehensive library designed for seamless integration of Stripe Elements
and payment processing capabilities into Angular applications. Leveraging the powerful features of StripeJS
, Ngx Stripe simplifies building robust, secure, and scalable payment solutions.
Use Elements with any Stripe product to collect online payments. For the right integration path for your business, explore the Stripe Docs
.
Learn how to use ngx-stripe
on the new docs site 🤓
We would like to inform you that we have updated the library to support Stripe V4 from version 18.1.0 onwards. This is a major version upgrade, but it's not a significant change and should not cause any issues.
We are keeping the library versioning in line with Angular majors, which upgrade more often than Stripe, and as a result, we are deviating from the semver standard. We believe this approach will provide a better experience in the long run.
We would like to apologize for any inconvenience this may cause you.
Active Versions
To install the last active version:
1$ npm install ngx-stripe @stripe/stripe-js
To install a specific version for an older Angular major, use the LTS npm tags or check the table below to pick the right version. For example, for v8:
1$ npm install ngx-stripe@v14-lts @stripe/stripe-js
Choose the version corresponding to your Angular version:
Angular | ngx-stripe |
---|---|
19 | 19.x+ |
18 | 18.x+ |
17 | 17.x+ |
16 | 16.x+ |
15 | 15.x+ |
14 | 14.x+ |
13 | 13.x+ |
12 | 12.x+ |
11 | 11.x+ |
10 | 10.x+ |
9 | v9-lts / 9.4.0 |
8 | v8-lts / 8.2.0 |
Most of the documentation has been moved to the new docs site. Only a very basic example is left here:
We start by adding the providers to our app:
1import { provideNgxStripe } from 'ngx-stripe'; 2 3bootstrapApplication(AppComponent, { 4 providers: [ 5 // ... rest of your providers 6 provideNgxStripe() 7 ] 8});
Or if you're still using modules:
Import the NgxStripeModule
into your application:
1import { BrowserModule } from '@angular/platform-browser'; 2import { NgModule } from '@angular/core'; 3 4import { AppComponent } from './app.component'; 5 6// Import the library 7import { BrowserModule } from '@angular/platform-browser'; 8import { NgModule } from '@angular/core'; 9 10import { AppComponent } from './app.component'; 11 12// Import the library 13import { NgxStripeModule } from 'ngx-stripe'; 14 15@NgModule({ 16 declarations: [AppComponent], 17 imports: [ 18 BrowserModule, 19 // ... rest of your imports 20 NgxStripeModule.forRoot(), 21 ], 22 providers: [], 23 bootstrap: [AppComponent] 24}) 25export class AppModule {} 26
Once the module has been imported, you can collect credit card details using the ngx-stripe-card component.
Then you can use the Stripe Service, which is basically an Observable wrapper around the stripejs object, to use that information. In this example, we use it to create a token, but it can be used to confirm a Payment Intent, Setup Intent, etc...
Please check the docs site to see a complete set of Stripe Element Components available and the full API of the Stripe Service.
1<div [formGroup]="paymentElementForm"> 2 <mat-form-field appearance="fill"> 3 <input matInput placeholder="name" formControlName="name" /> 4 </mat-form-field> 5 <mat-form-field appearance="fill"> 6 <input matInput placeholder="Email" type="email" formControlName="email" /> 7 </mat-form-field> 8 <mat-form-field appearance="fill"> 9 <input matInput placeholder="Address" formControlName="address" /> 10 </mat-form-field> 11 <mat-form-field appearance="fill"> 12 <input matInput placeholder="ZIP Code" formControlName="zipcode" /> 13 </mat-form-field> 14 <mat-form-field appearance="fill"> 15 <input matInput placeholder="city" formControlName="city" /> 16 </mat-form-field> 17 @if (elementsOptions.clientSecret) { 18 <ngx-stripe-elements 19 [stripe]="stripe" 20 [elementsOptions]="elementsOptions" 21 > 22 <ngx-stripe-payment [options]="paymentElementOptions" /> 23 </ngx-stripe-elements> 24 } 25 <button (click)="pay()">PAY</button> 26</div>
1import { Component, inject, signal, ViewChild } from '@angular/core'; 2import { UntypedFormBuilder, Validators } from '@angular/forms'; 3 4import { MatInputModule } from '@angular/material/input'; 5 6import { 7 injectStripe, 8 StripePaymentElementComponent 9} from 'ngx-stripe'; 10import { 11 StripeElementsOptions, 12 StripePaymentElementOptions 13} from '@stripe/stripe-js'; 14 15@Component({ 16 selector: 'ngstr-checkout-form', 17 templateUrl: './payment-element.component.html', 18 standalone: true, 19 imports: [ 20 ReactiveFormsModule, 21 MatInputModule, 22 StripePaymentElementComponent 23 ] 24}) 25export class CheckoutFormComponent { 26 @ViewChild(StripePaymentElementComponent) 27 paymentElement!: StripePaymentElementComponent; 28 29 private readonly fb = inject(UntypedFormBuilder); 30 31 paymentElementForm = this.fb.group({ 32 name: ['John Doe', [Validators.required]], 33 email: ['support@ngx-stripe.dev', [Validators.required]], 34 address: [''], 35 zipcode: [''], 36 city: [''], 37 amount: [2500, [Validators.required, Validators.pattern(/\d+/)]] 38 }); 39 40 elementsOptions: StripeElementsOptions = { 41 locale: 'en', 42 client: '{{YOUR_CLIENT_SECRET}}' 43 appearance: { 44 theme: 'flat' 45 } 46 }; 47 48 paymentElementOptions: StripePaymentElementOptions = { 49 layout: { 50 type: 'tabs', 51 defaultCollapsed: false, 52 radios: false, 53 spacedAccordionItems: false 54 } 55 }; 56 57 // Replace with your own public key 58 stripe = injectStripe({{YOUR_PUBLIC_KEY}}); 59 paying = signal(false); 60 61 pay() { 62 if (this.paying() || this.paymentElementForm.invalid) return; 63 this.paying.set(true); 64 65 const { 66 name, 67 email, 68 address, 69 zipcode, 70 city 71 } = this.checkoutForm.getRawValue(); 72 73 this.stripe 74 .confirmPayment({ 75 elements: this.paymentElement.elements, 76 confirmParams: { 77 payment_method_data: { 78 billing_details: { 79 name: name as string, 80 email: email as string, 81 address: { 82 line1: address as string, 83 postal_code: zipcode as string, 84 city: city as string 85 } 86 } 87 } 88 }, 89 redirect: 'if_required' 90 }) 91 .subscribe(result => { 92 this.paying.set(false); 93 if (result.error) { 94 // Show error to your customer (e.g., insufficient funds) 95 alert({ success: false, error: result.error.message }); 96 } else { 97 // The payment has been processed! 98 if (result.paymentIntent.status === 'succeeded') { 99 // Show a success message to your customer 100 alert({ success: true }); 101 } 102 } 103 }); 104 } 105}
ngx-stripe
is an MIT-licensed open source project. You can now become a sponsor with GitHub Sponsors.
We've been bringing ngx-stripe
to the world for over 6 years and are excited to be able to start dedicating some real resources to the project.
Your sponsorship helps us keep a team of maintainers actively working to improve ngx-stripe
and ensure it stays up-to-date with the latest Stripe changes. If you're using ngx-stripe
in a commercial capacity and have the ability to start a sponsorship, we'd greatly appreciate the contribution.
MIT © Ricardo Sánchez Gregorio
No vulnerabilities found.
Reason
9 commit(s) and 4 issue activity found in the last 90 days -- score normalized to 10
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
3 existing vulnerabilities detected
Details
Reason
Found 4/28 approved changesets -- score normalized to 1
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Score
Last Scanned on 2025-06-30
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More