Usage
How to ask the agent for an integration, and what it will ask you before writing code.
With the plugin installed, ask your agent for the integration — via the skill command or in natural language.
Invoke the plugin
With the skill command (Claude):
/tonder-web-sdk-integrator Add embedded card payment to this checkout. Keep the existing amount input and deposit button.Or in natural language:
Use the Tonder Web SDK plugin to add embedded card payments to this checkout. Keep the existing amount input and deposit button.More examples:
Use Tonder Web SDK to add saved-card payments to this React checkout.Use Tonder Web SDK to add card enrollment to this Angular account settings page.Use Tonder Web SDK to add payment methods and SafetyPay bank selection to this HTML checkout.What to expect
The plugin doesn't edit blindly: it inspects your project first and then asks you anything it can't infer with certainty, one decision at a time:
| Decision | Options |
|---|---|
| Framework | HTML/static · React · Angular (if ambiguous, it asks you to confirm) |
| Target page/component | Where the checkout goes, when several candidates exist |
| Payment flow | Card payment · Enrollment · Saved cards · Payment methods · SafetyPay banks |
| Presentation mode | embedded (SDK modal/iframe inside your page) · redirect (navigates to the hosted step and returns to your return_url) |
| SDK loading | cdn (browser script) · npm (package via your bundler) |
| UX | Tonder's default configuration · custom options (styles, callbacks, idempotency_key, metadata) |
With the decisions made, it implements only the selected flow, validates that your code never collects raw card data, and closes with the changed files, the validation run, and setup notes.
PCI safety. Generated integrations never collect raw PAN, CVV, or expiration data in merchant-owned inputs — always the secure fields rendered by the Tonder SDK.
The tonder-docs MCP
The plugin bundles a local MCP server the agent uses as its only documentation source. It serves versioned snapshots of the public Web SDK README.
Tools
| Tool | What it returns |
|---|---|
get_integration_recipe | The integration recipe for the chosen framework, flow, and presentation mode |
get_sdk_api_reference | Method signatures, payloads, CDN/npm setup, and customization details |
get_error_reference | The SDK error reference for handling and explanation |
get_payment_status_reference | The payment status reference |
Prompts
| Prompt | Purpose |
|---|---|
integrate-web-sdk-card-payment | Guides the card payment integration |
integrate-web-sdk-saved-cards | Guides the saved-cards integration |
MCP boundaries. tonder-docs does not process payments, store credentials, or access
merchant customer data — it only serves documentation.
After the integration
The plugin reminds you when it finishes, but this is your operational checklist:
- Configure your Tonder public API key (see Authentication).
- Keep the
idempotency_keystable per checkout attempt so retries are safe. - Configure your webhooks in the dashboard before fulfilling orders (see Webhooks).
- Update the environment/CDN values when moving from sandbox to production (see Environments).