DocsView components →
Paymentus Web SDK

Secure payment components
for web applications.

Add payment-method collection, checkout, saved payment methods, AutoPay, payment history, and account management to your application. Integrate with HTML, React, Angular, or Vue, then style each Pixel to match your design system.

View components →Read the docs
Build with the AI Editor Connect an AI coding assistant
HTMLReactAngularVue

Install with npm or load from the CDN

Components

One SDK for the
payment lifecycle.

Start with one Pixel or combine several to create a complete payment portal. Every component shares the same security model, event interface, and theming system.

01 / 05

Collect payment details
securely, on brand.

Card, bank-account, and digital-wallet information stays in Paymentus-hosted fields while customers complete a branded payment form.

Explore Tokenization Pixel →
index.html
4 lines to a live Pixel
Collect experience preview
tokenization-pixel
Card · Bank account · Digital wallet
PCI-isolated
Integration

Add a Pixel
in four lines.

Load the SDK, authorize the current session, add the component, and handle its events in your application.

1<paymentus-base2authorization="ey...">3  <tokenization-pixel></tokenization-pixel>4</paymentus-base>
✓ paymentus-base ready 36 ms
01

Load

Install the SDK with npm or load it from the CDN. Include the base SDK, your theme, and only the Pixel components you need.

02

Configure

Use component attributes and CSS custom properties to control behavior and visual styling.

03

Handle events

Respond to success, error, and lifecycle events in your application.

Theming

Built by Paymentus.
Styled by you.

Control colors, typography, spacing, corner radii, icons, density, and layout with CSS custom properties, component attributes, and ::part() hooks. Start with the included light or dark theme, or create a custom theme for your application.

  • 01 CSS custom properties (--pmt-*)
  • 02 ::part() styling hooks
  • 03 Light, dark, and custom themes
Tokenization Pixel rendered in a dark theme

Same component, your palette. The Tokenization Pixel rendered with a dark theme. No separate dark-mode implementation to maintain.

THEME LAB
N
WELCOME BACKGood morning, Olivia.
OM
AMOUNT DUE$128.46
AUTOPAYActive
NEXT PAYMENTSep 15
•••• 4242Default payment method
--pmt-primary#8469FF
Security

Keep sensitive payment data
out of your application.

Paymentus-hosted fields send card and bank-account information directly to Paymentus rather than through your host application.

Read security overview →
AI development tools

Build with the tools
your team already uses.

Generate and preview an integration in the Paymentus AI Editor, or connect your AI coding assistant to the read-only Paymentus MCP server for Pixel component contracts, authentication guidance, integration documentation, and REST API v3 schemas.

Generate and preview

AI Editor

Describe the payment experience you want. The editor builds an integration using the current Paymentus SDK, previews it in the browser, and lets you export the generated code.

  • Live previews for React and Vue
  • Restore or branch from any saved version
  • Export the generated workspace as a ZIP
Open the AI Editor →
Connect your assistant

Paymentus MCP server

The Paymentus MCP server makes Pixel component contracts, integration guides, authentication flows, and REST API v3 schemas available to the editor or AI coding assistant your team already uses.

  • Read-only tools for Pixel components and REST API v3
  • OAuth-based access over Streamable HTTP
  • Uses the same maintained documentation and schemas as Paymentus internal AI tools
CursorVS CodeClaude CodeChatGPT
Connect the MCP server →
Get started

Add the payment components your application needs

Create a consistent experience across checkout, saved payment methods, AutoPay, and account management.

View the Pixel catalog →Talk to our team