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

# CardPay

> Accept credit and debit card payments with CardPay.

<Info>
  This page is part of **Supported Payment Methods**. [View all payment methods →](/guides/library/supported-payment-methods)
</Info>

CardPay displays a secure card entry form where customers enter their card details. The form handles validation, formatting, and card brand detection automatically.

## Availability

CardPay is available on all browsers and devices. It appears in `checkAvailability()` results when properly configured.

| Platform         | Availability |
| ---------------- | ------------ |
| Desktop browsers | Yes          |
| Mobile browsers  | Yes          |
| iOS apps         | Yes          |
| Android apps     | Yes          |

## Requirements

CardPay requires:

* A payment gateway (PSP) account from one of our [supported payment gateways](https://orchestrasolutions.com/integrations/), configured in [Orchestra Portal](https://portal.orchestrasolutions.com/#/resource/paymentGateway)
* A CardPay eWallet account configured in [Orchestra Portal](https://portal.orchestrasolutions.com/#/resource/eWalletAccount)

```javascript theme={null}
// Server-side session creation
const session = {
  operation: 'CHARGE',
  paymentGatewayAccountId: 'your-psp-account',
  allowedeWalletAccountIds: ['your-cardpay-account'],
  allowedBrands: ['VISA', 'MASTERCARD', 'AMEX'],
  amount: 25.00,
  currencyCode: 'USD',
  countryCode: 'US',
  mode: 'LIVE'
};
```

## Button Setup

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

```javascript theme={null}
engine.payBy(
  [{ name: 'CardPay', domEntitySelector: '#card-button' }],
  handleResult,
  { color: 'Dark', text: 'Pay' }
);
```

## How It Works

1. Customer clicks the CardPay button
2. A secure popup window opens with the card entry form
3. Customer enters card number, expiry, CVV, and name
4. The form validates input in real-time
5. If 3D Secure is required, the authentication flow is handled automatically with no additional code required
6. Orchestra processes the payment through your PSP
7. On completion, the popup closes and results are returned to the client, ready to be sent to your server for validation

## Supported Operations

| Operation             | Supported | Description                    |
| --------------------- | --------- | ------------------------------ |
| `CHARGE`              | Yes       | Process payment immediately    |
| `TOKENIZE`            | Yes       | Store card for future use      |
| `CHARGE_AND_TOKENIZE` | Yes       | Process payment and store card |

## 3D Secure

3D Secure is triggered when:

* Your CardPay eWallet account is configured to require 3DS, AND
* Your PSP integration in Orchestra supports passing 3DS data (see [supported 3DS integrations](https://orchestrasolutions.com/integ-type/3d-secure/))

When both conditions are met, the library handles the entire 3DS challenge flow automatically with no additional code required.

See [3D Secure](/guides/library/3d-secure) for more details.

## Related

<CardGroup cols={2}>
  <Card title="PSP Setup" icon="building-columns" href="/guides/library/psp-setup">
    Configure payment processor credentials
  </Card>

  <Card title="Result Handling" icon="check" href="/guides/library/result-handling">
    Parse payment results
  </Card>

  <Card title="3D Secure" icon="shield-check" href="/guides/library/3d-secure">
    Authentication details
  </Card>
</CardGroup>