payment-provider-framework — Claude Code skill: install
This skill guides VTEX IO payment connector work, from PPF wiring to Secure Proxy and build checks. Use it when implementing or maintaining a connector app.
npx skills add vtex/skills --skill payment-provider-framework -a claude-codeWhat payment-provider-framework does
The skill covers payment connectors built as VTEX IO apps. It explains how to wire @vtex/payment-provider, PaymentProvider, and PaymentProviderService, configure the paymentProvider builder, and validate configuration.json. It also addresses gateway retry handling, response helpers, PSP integration checks, and vtex link debugging.
For card authorization, it uses SecureExternalClient with the secureProxyUrl supplied by Create Payment. Later actions such as capture, cancellation, and refund should call the PSP directly through ExternalClient, credentials, and outbound-access policies. The skill also covers IOContext access and checkout testing through affiliations and workspaces.
Builder Hub compiles with TypeScript 3.9.7 and still type-checks dependency declarations when skipLibCheck is set. Newer TypeScript syntax or incompatible .d.ts packages can therefore break the build before the connector code is checked.
What it helps with
- design a VTEX IO payment connector
- wire
PaymentProviderServiceand PPP routes - validate
configuration.jsonand thepaymentProviderbuilder - route authorization through Secure Proxy
- diagnose TypeScript 3.9.7 dependency failures
Example prompts for the agent
- Design a VTEX IO payment connector with
PaymentProviderandPaymentProviderService. - Review
configuration.jsonandmanifest.jsonfor a connector that uses Secure Proxy. - Investigate a VTEX IO build failure caused by TypeScript 3.9.7 or a dependency declaration.
How to install payment-provider-framework
1Skills CLI (Vercel)
npx skills add vtex/skills --skill payment-provider-framework -a claude-code2Manually: put the files in place
~/.claude/skills/payment-provider-framework/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/payment-provider-framework/
1Skills CLI (Vercel)
npx skills add vtex/skills --skill payment-provider-framework -a codex2Manually: put the files in place
.agents/skills/payment-provider-framework/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add vtex/skills --skill payment-provider-framework -a cursor2Manually: put the files in place
.cursor/skills/payment-provider-framework/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install vtex/skills payment-provider-framework2Manually: put the files in place
.github/skills/payment-provider-framework/SKILL.md1Skills CLI (Vercel)
npx skills add vtex/skills --skill payment-provider-framework -a gemini-cli2Platform CLI
gemini skills install https://github.com/vtex/skills --path skills/payment-provider-frameworkManually: put the files in place
.devin/skills/payment-provider-framework/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add vtex/skills --skill payment-provider-framework -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about payment-provider-framework
How do I install payment-provider-framework in Claude Code?
Run npx skills add vtex/skills --skill payment-provider-framework -a claude-code. The installed skill is then available at ~/.claude/skills/payment-provider-framework/SKILL.md.
What does payment-provider-framework do?
It supports VTEX IO payment connector work, including PPF setup, provider classes, service routes, configuration, PSP clients, Secure Proxy, and checkout testing.
What does the TypeScript 3.9.7 constraint change?
Builder Hub uses TypeScript 3.9.7 and checks declaration files from dependencies even when skipLibCheck is enabled. Syntax from newer TypeScript releases can make the build fail.