@paymentus/pixels

@paymentus/pixels is a collection of payment and billing web components built with Lit. The runtime is framework-agnostic — use the same package from React, Angular, Vue, or plain HTML/JS.

For React TypeScript apps, import @paymentus/pixels/react to get JSX intrinsic element types

Installation

npm install @paymentus/pixels

Usage (any framework)

Import the pixel entrypoint you need, then use the custom element tag in your template or JSX:

import '@paymentus/pixels/tokenization-pixel';
import '@paymentus/pixels/paymentus-base';
import '@paymentus/pixels/user-checkout';
// …other entrypoints: list-wallets, guest-checkout, user-autopay,
// list-autopay, payment-history, manage-payment, account,
// account-lookup, list-accounts

<paymentus-base authorization="YOUR_SDK_TOKEN">
  <tokenization-pixel></tokenization-pixel>
</paymentus-base>

Property and event details: Paymentus Web SDK docs.

React (with TypeScript types)

1. Install the package (same as above).
2. Import the pixel entrypoints you use.
3. Add a small ambient declaration file (e.g. react-jsx.d.ts) so TypeScript knows the custom element tags:

import type {
  CustomElements,
  CustomCssProperties,
} from '@paymentus/pixels/react';

declare module 'react' {
  namespace JSX {
    interface IntrinsicElements extends CustomElements {}
  }
  interface CSSProperties extends CustomCssProperties {}
}

Ensure that file is included by your tsconfig (for example via "include": ["src", "react-jsx.d.ts"]).

4. Use kebab-case tags with camelCase props in JSX:

import { useRef } from 'react';
import '@paymentus/pixels/paymentus-base';
import '@paymentus/pixels/user-checkout';

function Checkout() {
  return (
    <paymentus-base authorization="YOUR_SDK_TOKEN">
      <user-checkout-pixel
        paymentFlow="one-page"
        showCustomerInfo={true}
        paymentAccounts={[
          {
            accountNumber: '6759370',
            authToken1: '12345',
            paymentAmount: '12.12',
            paymentType: 'UTILITY',
          },
        ]}
      />
    </paymentus-base>
  );
}

CDN

For the highest PCI isolation, you can load a Paymentus-hosted CDN bundle instead of the npm package. See the developer portal for CDN URLs and setup.