Elements SDK

npm install @atlas/elements

<script src="https://js.atlas.co/v1/atlas.js"></script>

// Your server
const sessionRes = await fetch('https://api.atlas.co/functions/v1/create-session', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer sk_test_xxx',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    amount: 4990,
    currency: 'USD',
    merchant_reference: 'order_12345'
  })
});
const session = await sessionRes.json();
// Return client_secret to your frontend

import { Atlas } from '@atlas/elements';

Atlas.init({
  publishableKey: 'pk_test_xxx',
  environment: 'sandbox' // or 'production'
});

Atlas.mount({
  elementId: 'payment-form', // Your div id
  clientSecret: session.client_secret,
  appearance: {
    theme: 'night',
    variables: {
      colorPrimary: '#0ea5e9'
    }
  },
  onSuccess: (payment) => {
    // Payment complete! SDK called confirm-payment automatically
    console.log('Payment succeeded:', payment.id);
    window.location.href = '/success';
  },
  onError: (error) => {
    console.error('Payment failed:', error.message);
  }
});

<div id="payment-form"></div>

Atlas.mount({
  elementId: 'payment-form',
  clientSecret: session.client_secret,
  appearance: {
    theme: 'stripe', // 'stripe', 'night', 'flat', or 'none'
    variables: {
      colorPrimary: '#0ea5e9',
      colorBackground: '#ffffff',
      colorText: '#1a1a1a',
      colorDanger: '#ef4444',
      fontFamily: 'system-ui, sans-serif',
      borderRadius: '8px',
      spacingUnit: '4px'
    },
    rules: {
      '.Input': {
        border: '1px solid #e5e7eb',
        boxShadow: 'none'
      },
      '.Input:focus': {
        border: '1px solid #0ea5e9',
        boxShadow: '0 0 0 1px #0ea5e9'
      }
    }
  }
});

{
  "id": "pay_8xM2nQ4vR7kL9pYz",
  "session_id": "sess_2xK9mN7vQ3pL8wYz",
  "amount": 4990,
  "currency": "USD",
  "status": "captured",
  "payment_method_type": "card",
  "card": {
    "brand": "visa",
    "last4": "4242",
    "exp_month": 12,
    "exp_year": 2025
  }
}