ngx-stripe skill
A skill for an agent wiring Stripe Elements into Angular with ngx-stripe: providers, the service, components and picking a version
- 244 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- Consists of agent instructions and runs nothing itself
- Guides the agent's edits to payment code, so check the result in Stripe test mode with a pk_test key
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/ngx-stripeDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- Consists of agent instructions and runs nothing itself
- Guides the agent's edits to payment code, so check the result in Stripe test mode with a pk_test key
This is third-party code. Review the repository files before installing.
What it does
The skill teaches an agent to wire Stripe payments into an Angular app with the ngx-stripe library. The library itself is a typed wrapper around Stripe.js with Stripe Elements components. Stripe.js supplies types and payment-field UI; check Stripe documentation for the obligations of your integration. The instructions collect the integration rules. Stripe is registered through `provideNgxStripe('pk_…')` in `appConfig.providers`, then a component calls `injectStripe()`. `NgxStripeModule.forRoot()` is kept only for NgModule apps. Service methods return Observables for consuming results through subscriptions or conversion. Elements components go inside `<ngx-stripe-elements>`, and split card fields are wrapped in `ngx-stripe-card-group`. A separate rule covers `clientSecret`: it is set before the parent Elements instance is created, because a nested instance cannot be updated later. The library version is built as `{Angular major}.{Stripe.js major}.{patch}`, for example 22.10.x for Angular 22 and Stripe.js v10. On Stripe.js v10 the skill swaps the payment request button for Express Checkout or the Payment Element.
Who it is for. For Angular developers who accept payments through Stripe Elements and hand setup or migration of the integration to an agent.
Good fit when
- You need to add payments to an Angular app and wire up the Payment Element with a `clientSecret` from a PaymentIntent
- You need to pick an ngx-stripe version for your Angular major and Stripe.js train, for example 21.9.x or 20.10.x
- You are moving a project from `NgxStripeModule.forRoot()` to `provideNgxStripe` and `injectStripe()`
- An agent mixes up Observables and Promises in service calls and places Elements components without a parent container
- You are adding Express Checkout in place of the removed payment request button on Stripe.js v10
Not a fit when
- You are developing the ngx-stripe library itself: the skill is written for people who use it
- The app is not built on Angular: the components and providers fit only that framework
- You need the server side: creating a PaymentIntent and keeping secret keys are outside the skill, and the browser may hold only publishable `pk_` keys
- You need guidance on field styling and validation rules: Stripe.js owns those, and the skill points to Stripe's docs
Example request
Set up ngx-stripe in my Angular 21 app and build a checkout page with the Payment Element using a clientSecret from our backendLimitations
The skill covers client-side Angular integration. Prepare your Stripe account and backend separately: PaymentIntent and clientSecret come from your server. The browser may use a publishable key; secret API keys must stay on the backend. Stripe charges under its own terms, independently of the library’s MIT license.
Choose ngx-stripe to match Angular and Stripe.js. On October 31, 2026, version 22.10.2 requires Angular 22 and Stripe.js 10; installing latest into an older project may break dependencies. Test payment-code changes in Stripe test mode first.
How to disable. Delete the `ngx-stripe` folder from your agent's skills directory. `npm uninstall ngx-stripe` removes the library from the project.
FAQ
How do I install the ngx-stripe skill into an agent?
Run `npx skills add richnologies/ngx-stripe`. The skill follows the Agent Skill format with a SKILL.md file and fits any editor that supports it.
How do I connect Stripe to Angular with ngx-stripe?
First check the project’s Angular and Stripe.js versions and choose a compatible ngx-stripe release from the README table. Install those package versions, register `provideNgxStripe` with a publishable key in `appConfig.providers`, and call `injectStripe()` in the component. Place the Payment Element inside `ngx-stripe-elements`.
Which ngx-stripe version fits my Angular version?
The number is built from the Angular major, the Stripe.js major and a patch. Angular 22 with Stripe.js v10 takes 22.10.x, and Angular 21 with Stripe.js v9 needs 21.9.x. The README has the lane table, and older lanes have npm dist-tags such as v22-dahlia.
Why can't ngx-stripe methods be used as Promises?
The service interface returns an Observable. Consume the result with a subscription or convert it to a Promise. This does not make every call lazy: the library may already create the underlying Promise before subscription.
When should clientSecret be set for the Payment Element?
Before the parent `ngx-stripe-elements` is created. A nested instance cannot be updated later, so the template is wrapped in a condition that waits for the value.
Discussion
No questions or reviews yet.
Related
SkillsOfficial Angular team skills: code generation with current practices, signals, forms, SSR and new app setup
A skill and MCP server for the spartan/ui Angular library: the agent installs components and blocks from current docs.
The skill teaches an agent to build an AI agent chat from 26 Agent Elements components: tool cards, input bar, streaming
31 skills teach a coding agent to build diagram editors and workflow builders on ngDiagram for Angular and dodge the usual bugs
Nuxt UI v4 skill: an agent builds Vue and Nuxt interfaces, picks components, sets up the theme and lays out forms and dashboards
Official NVIDIA skill: the agent builds interfaces from web components and design tokens, with CLI and MCP supplying the API.
README in short
The instructions distinguish Angular wrapper behavior from Stripe.js itself. For Elements styling and method options, the skill points to Stripe documentation instead of duplicating it in local rules.
README badge
Original SKILL.md
---
name: ngx-stripe
description: >-
Integrate ngx-stripe in an Angular application: provideNgxStripe,
injectStripe, StripeService Observables, and ngx-stripe-* Elements.
Use when adding payments to an app, installing ngx-stripe, wrapping Stripe
Elements, Payment Element, Express Checkout, or picking an ngx-stripe version
lane. Do not use when maintaining the ngx-stripe library itself.
---
# ngx-stripe (consumer)
ngx-stripe wraps Stripe.js for Angular. It does **not** own types, Element UI, payment methods, or PCI.
This is an [Agent Skill](https://agentskills.io) (`SKILL.md`). Install from GitHub into any editor that supports the format:
```bash
npx skills add richnologies/ngx-stripe
```
- Types: `@stripe/stripe-js` only. Do not invent parallel interfaces.
- Install: `npm install ngx-stripe @stripe/stripe-js`
- Version: `{angularMajor}.{stripeJsMajor}.{patch}` — e.g. `22.10.x` is Angular 22 + Stripe.js v10 (endive CDN).
- Setup: `provideNgxStripe('pk_…')` in `appConfig.providers`, then `injectStripe()`. Keep `NgxStripeModule.forRoot()` only for existing NgModule apps.
- Service methods return **Observables** (`from(stripe.method()).pipe(first())`). Subscribe or convert; do not treat them as Promises.
- Elements: put hosts inside `<ngx-stripe-elements [stripe]="stripe" [elementsOptions]="elementsOptions">`. Implicit `[stripe]` on the child is deprecated.
- Split Card (`ngx-stripe-card-number` / `expiry` / `cvc`) must be wrapped in `ngx-stripe-card-group`.
## clientSecret
If the Element needs an Intent, set `elementsOptions.clientSecret` **before** the parent Elements instance is created. Nested Elements cannot update `clientSecret` later.
```html
@if (elementsOptions.clientSecret) {
<ngx-stripe-elements [stripe]="stripe" [elementsOptions]="elementsOptions">
<ngx-stripe-payment />
</ngx-stripe-elements>
}
```
Payment Element also has `doNotCreateUntilClientSecretIsSet` for the implicit (no parent) path.
## Ownership
| ngx-stripe | Stripe.js |
| --- | --- |
| DI, CDN loader, Observables, host components | Appearance, options, validation copy, payment methods |
Link Stripe docs for styling/options. Link ngx-stripe docs for selectors and Angular lifecycle.
## Do not
- Use `ngx-stripe-payment-request-button` on Stripe.js v10 / ngx-stripe `*.10` (removed; use Express Checkout or Payment Element, or stay on a dahlia lane). Old URLs: https://ngx-stripe.dev/docs/payment-request-button
- Duplicate Stripe types inside the app.
- Call `elements.update({ clientSecret })` on an already-created nested Elements group.
## Resources
- Docs: https://ngx-stripe.dev
- Machine index: https://ngx-stripe.dev/llms.txt