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

# Payments Library

> Render secure card forms and payment buttons with PCI Booking's client-side JavaScript library. Apple Pay, Google Pay, 3D Secure.

The Payments Library (`@pcibooking/ewallet`) is a client-side JavaScript library that renders a card form and payment buttons in your checkout page. The cardholder enters their card details or selects a digital wallet, and the library tokenizes the card through PCI Booking. Card data never touches your servers.

## How It Works

1. Your server creates a [payment session](/api-reference/payments-library/create-session) with PCI Booking, specifying the operation type (e.g. `TOKENIZE`).
2. Your page initializes the library with the session token.
3. The library renders the card form and available payment buttons.
4. The cardholder enters their card or selects a payment method.
5. The library sends the card data directly to PCI Booking, which tokenizes it and returns a token to the library.
6. Your page receives the token via callback and sends it to your server.

```javascript theme={null}
const engine = new eWallet.Engine(sessionToken);
const methods = await engine.checkAvailability();

engine.payBy(methods, function(result) {
  if (!result) return;

  const [data, success] = engine.parseResultToken(result.token);
  if (data.clientSuccess && success) {
    // Send result.token to your server
  }
}, {
  containerSelector: '#payment-buttons'
});
```

## Tokenization-Capable Methods

The following payment methods support tokenization through the library:

| Method         | What Happens                                                                                                      |
| -------------- | ----------------------------------------------------------------------------------------------------------------- |
| **CardPay**    | Cardholder enters card details in a form rendered by the library. Card is tokenized and stored in PCI Booking.    |
| **Apple Pay**  | Cardholder authorizes via Face ID / Touch ID. The Apple Pay token is tokenized and stored in PCI Booking.         |
| **Google Pay** | Cardholder selects a card from their Google account. The Google Pay token is tokenized and stored in PCI Booking. |

Other methods (PayPal, BankPay, UPI) process charges directly without tokenization. See [Supported Payment Methods](/payments-library/supported-methods) for the full list.

## 3D Secure

3DS is handled automatically based on the payment method:

* **CardPay**. When enabled, a 3DS challenge is presented to the cardholder if required by the issuing bank. The cardholder has 5 minutes to complete the challenge. If the challenge times out, the payment is cancelled and the callback receives `undefined`. See [3DS Merchant Setup](/account-setup/3ds-merchant-setup) to configure your merchant details for the challenge screen.
* **Apple Pay and Google Pay**. 3DS authentication is handled natively by the wallet provider. No additional configuration needed.
* **PayPal, BankPay, UPI**. 3DS does not apply. Each provider handles authentication through its own flow.

For tokenization operations (`TOKENIZE`, `CHARGE_AND_TOKENIZE`, `PREAUTH_AND_TOKENIZE`), the result token includes 3DS authentication data that can be stored with the token for subsequent transactions. See [3DS Auth Management](/manage-tokens/3ds-auth-management) for details.

## Next Steps

<CardGroup cols={2}>
  <Card title="Payments Library Setup" icon="book" href="/payments-library/setup">
    Installation, configuration, and code examples.
  </Card>

  <Card title="Supported Payment Methods" icon="book" href="/payments-library/supported-methods">
    All payment methods with availability and supported operations.
  </Card>

  <Card title="Library Reference" icon="code" href="/payments-library/reference">
    Full API surface and configuration options.
  </Card>

  <Card title="Capture Cards Overview" icon="book" href="/capture-cards/overview">
    All available tokenization methods.
  </Card>
</CardGroup>