Components Library

x402 Studio offers ready-to-use payment components you can embed directly into your website.

Available Components

Subscription Modal

Complete subscription flow with pricing tiers

Best for: SaaS, premium content

Pay-As-You-Go

Single payment button for one-time purchases

Best for: Digital downloads, API access

Payment Cards

Beautiful cards with integrated payment

Best for: E-commerce, marketplaces

Crowdfunding

Progress bar with contribution levels

Best for: Project funding, donations

Buy Me a Coffee

Simple tip jar for supporters

Best for: Creator support, tips

Using Components

Step 1: Browse Components

Visit /components to see all available options with live previews.

Step 2: Create in Dashboard

Go to Dashboard → Components → New and configure your component.

Step 3: Get Embed Code

After saving, you'll get an embed code:

<iframe
  src="https://studio.x402layer.cc/embed/your-component-slug"
  width="100%"
  height="400"
  frameborder="0"
></iframe>

Customization

Each component supports:

  • Colors – Match your brand
  • Copy – Custom button text and descriptions
  • Currency – Display in USDC or USD equivalent
  • Chain badges – Show Base/Solana logos