The Open Payment Layer
for Web3

<!-- 402x Payment Widget -->
<script src="https://cdn.402x.io/widget.min.js"></script>

<div id="x402-payment"
     data-product="blog/premium-article"
     data-price="0.50"
     data-currency="USD"
     data-theme="dark"
     data-access="timepass:24h"></div>

<script>
  window.x402.mount('#x402-payment', {
    publicKey: 'env:PAYMENT_PUBLIC_KEY',
    onSuccess: (tx) => console.log('Payment:', tx.id),
    onError: (err) => console.error(err)
  });
  // Optional: window.x402.unmount('#x402-payment')
  // Optional: window.x402.update('#x402-payment', { price: '1.00' })
  // Accessibility & i18n supported out‑of‑the‑box
</script>

import { createClient } from '@402x/sdk';

const client = createClient({
  apiKey: process.env.PAYMENT_API_KEY,
});

async function pay() {
  const payment = await client.payments.create({
    amount: 0.5,
    currency: 'USD',
    description: 'Premium Article Access',
    productId: 'article-123',
    access: { type: 'timepass', duration: '24h' },
    metadata: { userId: 'user-456' },
  });

  console.log('Checkout URL:', payment.checkoutUrl);
  return payment;
}

pay().catch(console.error);

const res = await fetch('https://api.402x.io/v1/payments', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer ' + process.env.PAYMENT_API_KEY,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    amount: 0.5,
    currency: 'USD',
    description: 'Premium Article Access',
    productId: 'article-123',
    metadata: { userId: 'user-456' }
  })
});

if (!res.ok) throw new Error('Payment failed');
const payment = await res.json();
console.log('Payment URL:', payment.checkoutUrl);