> ## Documentation Index
> Fetch the complete documentation index at: https://docs.useaxra.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Pay.js

> Embed secure, PCI-scoped card input fields directly in your payment form

## Installation

```bash theme={null}
npm install @useaxra/pay-js
```

Or load via CDN:

```html theme={null}
<script src="https://pay.useaxra.com/sdk/axra-pay.js"></script>
```

## Quick start

```html theme={null}
<div id="card-element"></div>
<button id="pay-btn">Pay</button>

<script type="module">
  import Axra from '@useaxra/pay-js';

  const axra = Axra('pk_test_...');

  // Create an Elements session (server-side first)
  // POST /api/v1/elements/session → { id: 'es_...' }
  const sessionId = 'es_...'; // from your server

  const elements = axra.elements({ session: sessionId });
  const card = elements.create('card');
  card.mount('#card-element');

  document.getElementById('pay-btn').addEventListener('click', async () => {
    const result = await axra.createToken(card);
    if (result.token) {
      // Send result.token.id to your server
      console.log('Token:', result.token.id);
    } else {
      console.error('Error:', result.error);
    }
  });
</script>
```

## Element types

| Type                   | Description                          | Min height |
| ---------------------- | ------------------------------------ | ---------- |
| `card`                 | Card number, expiry, CVC             | 48px       |
| `payment`              | Card + cardholder name + postal code | 120px      |
| `paymentRequestButton` | Apple Pay / Google Pay button        | 40px       |

## Configuration

```typescript theme={null}
const axra = Axra('pk_test_...', {
  elementsHost: 'https://pay.useaxra.com', // default
  apiBaseUrl: 'https://api.useaxra.com',   // default
});
```

## Server-side session creation

Before mounting Elements, create a session from your server:

```bash theme={null}
curl -X POST https://api.useaxra.com/api/v1/elements/session \
  -H "Content-Type: application/json" \
  -d '{
    "publishableKey": "pk_test_...",
    "amount": 19.99,
    "currency": "usd"
  }'
```

Response:

```json theme={null}
{
  "id": "es_abc123...",
  "expiresInSeconds": 900
}
```

## Tokenization response

```typescript theme={null}
// Success
{ token: { id: "tok_abc123..." } }

// Error
{ error: { code: "invalid_card", message: "Card number is invalid" } }
```

<Warning>
  Never send raw card numbers to your server. Always tokenize with Pay.js first, then send the token ID.
</Warning>