# ngx-stripe > Teaches your agent to add Stripe payments to an Angular app with ngx-stripe: setup, Payment Element, Express Checkout and version lanes. ngx-stripe is an Angular library of components and services for Stripe Elements, a thin, typed wrapper around Stripe.js. This is its maintainer's own Agent Skill: it teaches your agent to wire ngx-stripe into an Angular app the way the library expects, from providers and the injected Stripe instance to the ngx-stripe-* Elements components. What it teaches your agent - Install ngx-stripe with @stripe/stripe-js and pick the version lane that matches your Angular major and Stripe.js release (22.10.x is Angular 22 with Stripe.js v10) - Register Stripe with provideNgxStripe and a publishable key, then use injectStripe; existing NgModule apps keep NgxStripeModule.forRoot - Treat the service methods as Observables to subscribe to, not Promises - Put Elements inside ngx-stripe-elements, and wrap split card fields in ngx-stripe-card-group - Set clientSecret before the Elements group is created, because nested Elements can't take it later - Find the right selector in its element map: Payment, Express Checkout, Address, Contact Details, Link, Card, IBAN, Issuing display elements and more What it steers your agent away from - The Payment Request Button on Stripe.js v10 lanes, where it was removed; Express Checkout or the Payment Element replace it - Writing parallel interfaces instead of using the types from @stripe/stripe-js - Updating clientSecret on an Elements group that already exists Good to know - Add it with npx skills add richnologies/ngx-stripe. It follows the open Agent Skills format. - It's for apps that use ngx-stripe, not for maintaining the library itself. - Appearance, payment methods, validation copy and PCI stay with Stripe.js, so the skill points your agent to Stripe's docs for those and to ngx-stripe.dev for selectors and Angular lifecycle. - Only publishable keys belong in the browser; your server creates the PaymentIntent. - A community library by Ricardo Sánchez (richnologies), not made by Stripe. - Type: Skill - Made by: richnologies - Category: Finance - Formats: Skills - Version: bc4c4f9 - Website: https://ngx-stripe.dev - Source: https://github.com/richnologies/ngx-stripe/tree/HEAD/skills/ngx-stripe - Page: https://pluginboard.ai/skills/ngx-stripe ## Works with - ChatGPT - Claude - Gemini - GitHub Copilot - Cursor - Claude Code - Codex - Antigravity - Gemini CLI - Replit - OpenClaw - OpenCode - Hermes Agent ## Install ### ChatGPT In ChatGPT: Download the ngx-stripe folder and zip it, then Plugins → Skills → Create → Upload from your computer. Business and Enterprise plans. View the folder on GitHub: https://github.com/richnologies/ngx-stripe/tree/HEAD/skills/ngx-stripe ### Claude In Claude (web or desktop): Download the ngx-stripe folder and zip the folder itself, then upload it in Customize → Skills. View the folder on GitHub: https://github.com/richnologies/ngx-stripe/tree/HEAD/skills/ngx-stripe ### Gemini In Gemini: Download the ngx-stripe folder, then at gemini.google.com click Customize → Skills → Create → Upload and pick the folder (or a .zip of it). View the folder on GitHub: https://github.com/richnologies/ngx-stripe/tree/HEAD/skills/ngx-stripe ### GitHub Copilot Run in your terminal: ```shell npx -y degit richnologies/ngx-stripe/skills/ngx-stripe ~/.copilot/skills/ngx-stripe ``` View the folder on GitHub: https://github.com/richnologies/ngx-stripe/tree/HEAD/skills/ngx-stripe ### Cursor Run in your terminal: ```shell npx -y degit richnologies/ngx-stripe/skills/ngx-stripe ~/.cursor/skills/ngx-stripe ``` View the folder on GitHub: https://github.com/richnologies/ngx-stripe/tree/HEAD/skills/ngx-stripe ### Claude Code Run in your terminal: ```shell npx -y degit richnologies/ngx-stripe/skills/ngx-stripe ~/.claude/skills/ngx-stripe ``` View the folder on GitHub: https://github.com/richnologies/ngx-stripe/tree/HEAD/skills/ngx-stripe ### Codex Run in your terminal: ```shell npx -y degit richnologies/ngx-stripe/skills/ngx-stripe ~/.agents/skills/ngx-stripe ``` View the folder on GitHub: https://github.com/richnologies/ngx-stripe/tree/HEAD/skills/ngx-stripe ### Antigravity In Antigravity: Copy the ngx-stripe folder into ~/.gemini/config/skills (Antigravity app and IDE) or ~/.gemini/antigravity-cli/skills (Antigravity CLI). View the folder on GitHub: https://github.com/richnologies/ngx-stripe/tree/HEAD/skills/ngx-stripe ### Gemini CLI Run in your terminal: ```shell npx -y degit richnologies/ngx-stripe/skills/ngx-stripe ~/.gemini/skills/ngx-stripe ``` View the folder on GitHub: https://github.com/richnologies/ngx-stripe/tree/HEAD/skills/ngx-stripe ### Replit Run in your terminal: ```shell npx -y degit richnologies/ngx-stripe/skills/ngx-stripe .agents/skills/ngx-stripe ``` View the folder on GitHub: https://github.com/richnologies/ngx-stripe/tree/HEAD/skills/ngx-stripe ### OpenClaw Run in your terminal: ```shell npx -y degit richnologies/ngx-stripe/skills/ngx-stripe ~/.openclaw/skills/ngx-stripe ``` View the folder on GitHub: https://github.com/richnologies/ngx-stripe/tree/HEAD/skills/ngx-stripe ### OpenCode Run in your terminal: ```shell npx -y degit richnologies/ngx-stripe/skills/ngx-stripe ~/.config/opencode/skills/ngx-stripe ``` View the folder on GitHub: https://github.com/richnologies/ngx-stripe/tree/HEAD/skills/ngx-stripe ### Hermes Agent Run in your terminal: ```shell npx -y degit richnologies/ngx-stripe/skills/ngx-stripe ~/.hermes/skills/ngx-stripe ``` View the folder on GitHub: https://github.com/richnologies/ngx-stripe/tree/HEAD/skills/ngx-stripe --- From Pluginboard (https://pluginboard.ai).