Sandbox Setup

Before going live, test your integration in the Zatlas sandbox environment.

1. Get your credentials

Contact the Zatlas team to receive:

Credential	Example	Where to use
Publishable key	pk_sandbox_a1b2c3d4...	Frontend — passed to ZatlasCardCapture constructor
Client ID	3abc123def456...	Backend — OAuth2 token exchange
Client secret	secret-xyz-789...	Backend — OAuth2 token exchange (keep secret)
Token endpoint	https://cde-api-staging.zatlas.com/oauth2/token	Backend — where to request access tokens

2. Get an access token

Your server exchanges client_id + client_secret for a short-lived access token:

curl -X POST https://cde-api-staging.zatlas.com/oauth2/token \
  -H "Content-Type: application/x-www-form-urlencoded" \
  -d "grant_type=client_credentials" \
  -d "client_id=YOUR_CLIENT_ID" \
  -d "client_secret=YOUR_CLIENT_SECRET"

Response:

{
  "access_token": "eyJhbGciOi...",
  "expires_in": 3600,
  "token_type": "Bearer"
}

This single token works for both tokenization and payments — no need for separate credentials.

3. Test in your browser

1. Install the SDK: npm install @zatlas/card-capture
2. Initialize with your sandbox key: new ZatlasCardCapture({ publishableKey: 'pk_sandbox_...' })
3. Mount the card form and test with the cards below

Test cards

Scenario	Card Number	CVC	Result
Success	4242 4242 4242 4242	Any 3 digits	Payment succeeds
Mastercard	5555 5555 5555 4444	Any 3 digits	Payment succeeds
Amex	3782 822463 10005	Any 4 digits	Payment succeeds
Installments (MSI)	4000 0048 4000 0008	Any 3 digits	Shows installment picker: 3, 6, 9, 12, 18, 24 months
3D Secure	4000 0000 0000 3220	Any 3 digits	3DS challenge flow
Declined	4000 0000 0000 0002	Any 3 digits	card_declined
Insufficient funds	4000 0000 0000 9995	Any 3 digits	insufficient_funds
Expired card	4000 0000 0000 0069	Any 3 digits	expired_card
Incorrect CVC	4000 0000 0000 0127	Any 3 digits	incorrect_cvc

Use any future expiry date (e.g. 12/30).

4. Verify the integration

Walk through each step below to confirm the SDK is working end-to-end in your sandbox environment.

Checkout mode

1. Card form renders on your page
2. Guest can enter a card number, expiry, and CVC
3. Card brand is detected (Visa, Mastercard, etc.)
4. Clicking “Continuar” fires the cta_clicked event
5. checkout() with card 4242... returns { payment: { status: 'succeeded' } }
6. checkout() with card 4000...0002 returns { error: { code: 'card_declined' } }
7. Installment picker appears with card 4000 0048 4000 0008
8. Decline error is shown to the guest inside the card form

Tokenization mode

1. Clicking “Guardar metodo” fires the cta_clicked event
2. createToken() returns { token: { id: 'mth_...', card: { last4, brand } } }
3. Your server receives the mth_* token
4. Your server can create a payment via the Payments API using the token

Going to production

When sandbox testing is complete, contact the Zatlas team to receive production credentials:

Sandbox	Production
pk_sandbox_...	pk_live_...
Sandbox client_id / secret	Production client_id / secret
cde-api-staging.zatlas.com	cde-api.zatlas.com

No code changes needed — just swap the publishable key and credentials.