{"id":14108425,"url":"https://github.com/richnologies/ngx-stripe","last_synced_at":"2025-05-14T21:05:54.051Z","repository":{"id":37806187,"uuid":"96054452","full_name":"richnologies/ngx-stripe","owner":"richnologies","description":"Angular 6+ wrapper for StripeJS","archived":false,"fork":false,"pushed_at":"2025-02-10T17:23:43.000Z","size":3707,"stargazers_count":230,"open_issues_count":22,"forks_count":77,"subscribers_count":12,"default_branch":"main","last_synced_at":"2025-04-19T12:39:51.476Z","etag":null,"topics":["angular","payments","stripe"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/richnologies.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"richnologies","patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2017-07-02T23:31:04.000Z","updated_at":"2025-04-17T11:03:56.000Z","dependencies_parsed_at":"2024-04-10T20:40:33.713Z","dependency_job_id":"226d0f5c-ce9d-4c45-b084-b0fcf5dad176","html_url":"https://github.com/richnologies/ngx-stripe","commit_stats":{"total_commits":168,"total_committers":20,"mean_commits":8.4,"dds":0.5952380952380952,"last_synced_commit":"afe4da38bce2452474d7cc31618966ee3ba5a0d5"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/richnologies%2Fngx-stripe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/richnologies%2Fngx-stripe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/richnologies%2Fngx-stripe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/richnologies%2Fngx-stripe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/richnologies","download_url":"https://codeload.github.com/richnologies/ngx-stripe/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254227611,"owners_count":22035669,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","payments","stripe"],"created_at":"2024-08-14T10:01:26.456Z","updated_at":"2025-05-14T21:05:53.988Z","avatar_url":"https://github.com/richnologies.png","language":"TypeScript","funding_links":["https://github.com/sponsors/richnologies"],"categories":["Security and Authentication"],"sub_categories":["Payments"],"readme":"Collect Payments with Stripe: The Angular Way\n\n\u003ca href=\"https://stripe.com/partners/ngx-stripe\" target=\"_blank\"\u003e\u003cimg src=\"./docs/logos/stripe_partner_badge_verified_blurple.png\" alt=\"drawing\" width=\"98\"/\u003e\n[![version](https://img.shields.io/npm/v/ngx-stripe.svg)](https://www.npmjs.com/package/ngx-stripe)\n[![license](https://img.shields.io/npm/l/express.svg)](https://www.npmjs.com/package/ngx-stripe)\n\n\u003ch1 align=\"center\"\u003e\n  \u003cimg width=\"160\" valign=\"bottom\" src=\"./docs/logos/ngx-stripe-logo.png\"\u003e\n\u003c/h1\u003e\n\nNgx Stripe is a comprehensive library designed for seamless integration of [`Stripe Elements`](https://stripe.com/docs/stripe-js) and payment processing capabilities into Angular applications. Leveraging the powerful features of [`StripeJS`](https://stripe.com/docs/js), Ngx Stripe simplifies building robust, secure, and scalable payment solutions.\n\nUse Elements with any Stripe product to collect online payments. For the right integration path for your business, explore the [`Stripe Docs`](https://stripe.com/docs/stripe-js).\n\nLearn how to use `ngx-stripe` on the **new** [docs site](https://ngx-stripe.dev/docs) 🤓\n\n## Notice (November 27, 2024)\n\nWe are pleased to announce that as of version `19.0.0`, this library now supports Stripe V5. This release introduces a **major version upgrade**, with one notable breaking change:\n\n- `StripeCustomCheckout` has been renamed to `StripeCheckout`.  \n- `StripeCustomCheckoutOptions` has been renamed to `StripeCheckoutOptions`.  \n- The method `initCustomCheckout` is now `initCheckout`.\n\nTo maintain alignment with Angular's major versioning, which evolves more frequently than Stripe, we have opted to deviate from the traditional semantic versioning (semver) standard. We believe this approach will deliver a smoother experience over time.\n\nWe apologize for any inconvenience this change may cause and appreciate your understanding.\n\n## Features\n\n- **Angular Components for Stripe Elements**: Ngx Stripe provides a set of Angular components, each corresponding to a specific Stripe Web Element. These components are designed to simplify the integration of Stripe's UI elements, ensuring a smooth and consistent user experience.\n- **Seamless Integration with StripeJS**: Aligning closely with StripeJS, Ngx Stripe ensures that you have access to the latest features and updates from Stripe, directly within your Angular application.\n- **Lazy Loading of StripeJS**: Enhance your application's performance by lazy loading the StripeJS JavaScript. This feature ensures that the StripeJS library is loaded only when needed, optimizing loading times and improving the overall user experience.\n- **Customizable and Flexible**: Customize the look and feel of your payment forms to match your application's design. Ngx Stripe components are highly flexible, allowing for extensive customization and styling.\n- **Strongly Typed for Angular Development**: Benefit from TypeScript in your payment integration. Ngx Stripe is strongly typed, making \n\n## Installation\n\n**Active Versions**\n\nTo install the last active version:\n\n```bash\n$ npm install ngx-stripe @stripe/stripe-js\n```\n\nTo 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:\n\n```bash\n$ npm install ngx-stripe@v14-lts @stripe/stripe-js\n```\n\nChoose the version corresponding to your Angular version:\n\n| Angular | ngx-stripe        |\n| ------- | ----------------- |\n| 19      | 19.x+             |\n| 18      | 18.x+             |\n| 17      | 17.x+             |\n| 16      | 16.x+             |\n| 15      | 15.x+             |\n| 14      | 14.x+             |\n| 13      | 13.x+             |\n| 12      | 12.x+             |\n| 11      | 11.x+             |\n| 10      | 10.x+             |\n| 9       | v9-lts / 9.4.0    |\n| 8       | v8-lts / 8.2.0    |\n\n---\n\n## Using the library\n\nMost of the documentation has been moved to the new [docs site](https://ngx-stripe.dev/docs). Only a very basic example is left here:\n\nWe start by adding the providers to our app:\n\n```ts\nimport { provideNgxStripe } from 'ngx-stripe';\n\nbootstrapApplication(AppComponent, {\n  providers: [\n    // ... rest of your providers\n    provideNgxStripe()\n  ]\n});\n```\n\nOr if you're still using modules:\n\nImport the `NgxStripeModule` into your application:\n\n```typescript\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\nimport { AppComponent } from './app.component';\n\n// Import the library\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\nimport { AppComponent } from './app.component';\n\n// Import the library\nimport { NgxStripeModule } from 'ngx-stripe';\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [\n    BrowserModule,\n    // ... rest of your imports\n    NgxStripeModule.forRoot(),\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule {}\n\n```\n\n## Payment Element Component\n\nOnce the module has been imported, you can collect credit card details using the ngx-stripe-card component.\n\nThen 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...\n\nPlease check the [docs site](https://ngx-stripe.dev/docs) to see a complete set of Stripe Element Components available and the full API of the Stripe Service.\n\n```xml\n\u003cdiv [formGroup]=\"paymentElementForm\"\u003e\n  \u003cmat-form-field appearance=\"fill\"\u003e\n    \u003cinput matInput placeholder=\"name\" formControlName=\"name\" /\u003e\n  \u003c/mat-form-field\u003e\n  \u003cmat-form-field appearance=\"fill\"\u003e\n    \u003cinput matInput placeholder=\"Email\" type=\"email\" formControlName=\"email\" /\u003e\n  \u003c/mat-form-field\u003e\n  \u003cmat-form-field appearance=\"fill\"\u003e\n    \u003cinput matInput placeholder=\"Address\" formControlName=\"address\" /\u003e\n  \u003c/mat-form-field\u003e\n  \u003cmat-form-field appearance=\"fill\"\u003e\n    \u003cinput matInput placeholder=\"ZIP Code\" formControlName=\"zipcode\" /\u003e\n  \u003c/mat-form-field\u003e\n  \u003cmat-form-field appearance=\"fill\"\u003e\n    \u003cinput matInput placeholder=\"city\" formControlName=\"city\" /\u003e\n  \u003c/mat-form-field\u003e\n  @if (elementsOptions.clientSecret) {\n    \u003cngx-stripe-elements\n      [stripe]=\"stripe\"\n      [elementsOptions]=\"elementsOptions\"\n    \u003e\n      \u003cngx-stripe-payment [options]=\"paymentElementOptions\" /\u003e\n    \u003c/ngx-stripe-elements\u003e\n  }\n  \u003cbutton (click)=\"pay()\"\u003ePAY\u003c/button\u003e\n\u003c/div\u003e\n```\n\n```typescript\nimport { Component, inject, signal, ViewChild } from '@angular/core';\nimport { UntypedFormBuilder, Validators } from '@angular/forms';\n\nimport { MatInputModule } from '@angular/material/input';\n\nimport {\n  injectStripe,\n  StripePaymentElementComponent\n} from 'ngx-stripe';\nimport {\n  StripeElementsOptions, \n  StripePaymentElementOptions\n} from '@stripe/stripe-js';\n\n@Component({\n  selector: 'ngstr-checkout-form',\n  templateUrl: './payment-element.component.html',\n  standalone: true,\n  imports: [\n    ReactiveFormsModule,\n    MatInputModule,\n    StripePaymentElementComponent\n  ]\n})\nexport class CheckoutFormComponent {\n  @ViewChild(StripePaymentElementComponent)\n  paymentElement!: StripePaymentElementComponent;\n\n  private readonly fb = inject(UntypedFormBuilder);\n\n  paymentElementForm = this.fb.group({\n    name: ['John Doe', [Validators.required]],\n    email: ['support@ngx-stripe.dev', [Validators.required]],\n    address: [''],\n    zipcode: [''],\n    city: [''],\n    amount: [2500, [Validators.required, Validators.pattern(/\\d+/)]]\n  });\n\n  elementsOptions: StripeElementsOptions = {\n    locale: 'en',\n    clientSecret: '{{YOUR_CLIENT_SECRET}}'\n    appearance: {\n      theme: 'flat'\n    }\n  };\n\n  paymentElementOptions: StripePaymentElementOptions = {\n    layout: {\n      type: 'tabs',\n      defaultCollapsed: false,\n      radios: false,\n      spacedAccordionItems: false\n    }\n  };\n\n  // Replace with your own public key\n  stripe = injectStripe({{YOUR_PUBLIC_KEY}});\n  paying = signal(false);\n\n  pay() {\n    if (this.paying() || this.paymentElementForm.invalid) return;\n    this.paying.set(true);\n\n    const {\n      name,\n      email,\n      address,\n      zipcode,\n      city\n    } = this.checkoutForm.getRawValue();\n\n    this.stripe\n      .confirmPayment({\n        elements: this.paymentElement.elements,\n        confirmParams: {\n          payment_method_data: {\n            billing_details: {\n              name: name as string,\n              email: email as string,\n              address: {\n                line1: address as string,\n                postal_code: zipcode as string,\n                city: city as string\n              }\n            }\n          }\n        },\n        redirect: 'if_required'\n      })\n      .subscribe(result =\u003e {\n        this.paying.set(false);\n        if (result.error) {\n          // Show error to your customer (e.g., insufficient funds)\n          alert({ success: false, error: result.error.message });\n        } else {\n          // The payment has been processed!\n          if (result.paymentIntent.status === 'succeeded') {\n            // Show a success message to your customer\n            alert({ success: true });\n          }\n        }\n      });\n  }\n}\n```\n\n## Support us\n\n`ngx-stripe` is an MIT-licensed open source project. You can now become a sponsor with [GitHub Sponsors](https://github.com/sponsors/richnologies).\n\nWe'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.\n\nYour 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.\n\n### Principal Sponsors\n\n\u003cp float=\"left\"\u003e\n  \u003ca href=\"https://stripe.com\" rel=\"nofollow noopener noreferrer\" target=\"_blank\"\u003e\n    \u003cimg src=\"./docs/logos/stripe_blurple.png\" width=\"210\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.psi-mobile.com\" rel=\"nofollow noopener noreferrer\" target=\"_blank\"\u003e\n    \u003cimg src=\"./docs/logos/psi-logo.png\" width=\"170\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## License\n\nMIT © [Ricardo Sánchez Gregorio](mailto:me@ricardosanchez.dev)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frichnologies%2Fngx-stripe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frichnologies%2Fngx-stripe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frichnologies%2Fngx-stripe/lists"}