@zatlas/card-capture

Official Zatlas SDK for secure, PCI-compliant credit card capture.

Full documentation: developers.zatlas.com/credit-card-sdk

Features

• PCI DSS SAQ A Compliant — Card data never touches your servers
• Full Checkout Flow — Card capture, installments (MSI), 3D Secure, decline handling
• Tokenization — Save cards for scheduled, recurring, or deferred charges
• React + Vanilla JS — Works with any framework
• Theming — Fully customizable appearance
• Localization — es-MX, es-ES, en-US, en-GB, pt-BR
• TypeScript — Complete type definitions included

Install

npm install @zatlas/card-capture

Quick Start

<div id="card-element"></div>

<script type="module">
import { ZatlasCardCapture } from '@zatlas/card-capture';

const zatlas = new ZatlasCardCapture({
  publishableKey: 'pk_sandbox_your_key',
  locale: 'es-MX',
});

const card = zatlas.create('card', { mode: 'checkout' });
card.mount('#card-element');

card.on('cta_clicked', async () => {
  const { accessToken } = await fetch('/api/payment-token').then(r => r.json());

  const { payment, error } = await zatlas.checkout({
    accessToken,
    amount: 12000,
    currency: 'mxn',
    reservationId: 'RES-123',
  });

  if (payment) {
    window.location.href = `/success?id=${payment.id}`;
  }
});
</script>

Documentation

For complete guides, API reference, theming, test cards, and more:

developers.zatlas.com/credit-card-sdk