Quick Start

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

Concept	Description
Sessions	A session represents a payment intent. Create one server-side, confirm it client-side.
Client Secret	A short-lived token that authorizes the frontend to complete a specific payment.
Webhooks	Server-to-server notifications for payment events. Essential for order fulfillment.
PCI Compliance	Card data is handled by Atlas. Your servers never see raw card numbers.

Next Steps

Authentication - Learn about API keys and security
Elements SDK - Deep dive into the frontend SDK
Webhooks - Set up server-side event handling

Getting Started

Payments

UI Components

Billing

Data & Security

Mobile

Developer

Integration Steps

1. Install the SDK

2. Create a Payment Session

3. Mount the Payment Form

4. Handle Webhooks

Key Concepts

Next Steps

​Integration Steps

​1. Install the SDK

​2. Create a Payment Session

​3. Mount the Payment Form

​4. Handle Webhooks

​Key Concepts

​Next Steps

Integration Steps

1. Install the SDK

2. Create a Payment Session

3. Mount the Payment Form

4. Handle Webhooks

Key Concepts

Next Steps