Skip to main content
Accept payments in minutes. Follow these steps to integrate Atlas into your application. Card data never touches your servers - we handle PCI compliance for you.

​
Integration Steps

​
1. Install the SDK

Add @atlas/elements to your frontend application: 
npm install @atlas/elements
yarn add @atlas/elements
pnpm add @atlas/elements

​
2. Create a Payment Session

Call POST /create-session from your server with the amount, currency, and customer details. This returns a client_secret to pass to your frontend. 
curl -X POST https://api.atlas.co/functions/v1/create-session \
  -H "Authorization: Bearer sk_test_your_secret_key" \
  -H "Content-Type: application/json" \
  -d '{
    "amount": 4990,
    "currency": "USD",
    "customer": {
      "email": "[email protected]",
      "name": "John Doe"
    }
  }'

​
3. Mount the Payment Form

Use Atlas.mount() with the client_secret to render secure payment fields. Card data is tokenized client-side and never touches your servers. 
import { Atlas } from '@atlas/elements';

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

Atlas.mount({
  elementId: 'payment-form',
  clientSecret: session.client_secret,
  onSuccess: (payment) => {
    console.log('Payment succeeded:', payment.id);
    window.location.href = '/success';
  },
  onError: (error) => {
    console.error('Payment failed:', error.message);
  }
});

​
4. Handle Webhooks

Set up webhook handlers at /webhooks/atlas to receive payment events like payment.captured and payment.failed. Always verify signatures.

​
Key Concepts

ConceptDescription
SessionsA session represents a payment intent. Create one server-side, confirm it client-side.
Client SecretA short-lived token that authorizes the frontend to complete a specific payment.
WebhooksServer-to-server notifications for payment events. Essential for order fulfillment.
PCI ComplianceCard data is handled by Atlas. Your servers never see raw card numbers.

​
Next Steps