> ## 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.

# Live Demos

> Working demo pages that show PCI Booking flows end to end: the card entry form with 3D Secure and a charge, and the Payments Library.

These demo pages run against a PCI Booking sandbox account, so you can see each flow working before you write any code. Use the [test cards](/getting-started/testing-and-going-live#test-cards), not a real card.

<Warning>
  The demos are built to be explored, not copied as they are. They call the PCI Booking API from the browser so that everything is visible in one page. In your integration, keep your API key on your server and make those calls from there. The [complete checkout example](/use-cases/example-checkout-page-3ds) shows the same flow split correctly between your page and your server.
</Warning>

## Card Entry Form with 3D Secure and a Charge

A hotel checkout page. The guest enters a card in the [hosted card entry form](/capture-cards/hosted-card-entry-form), completes 3D Secure, and the booking is charged through the [Universal Payment Gateway](/use-tokens/universal-payment-gateway).

[Open the demo](https://demo.pcibooking.net/demos/pci-shield-iframe.html)

What to try:

* Pick a 3D Secure test card from the dropdown, select **Complete Booking**, and enter the success OTP shown on [Testing and Going Live](/getting-started/testing-and-going-live#3d-secure-test-cards).
* Open your browser's developer console to watch the [postMessage events](/capture-cards/postmessage-notifications) the form sends to the page.
* Scroll down to the log to see the charge request and the gateway's response.

Demo-only parts: the test card dropdown, the 3D Secure on/off switch, and the debug log. Your checkout page needs none of them.

Related guides: [Hosted Card Entry Form](/capture-cards/hosted-card-entry-form), [PSD2 and 3D Secure](/use-cases/comply-with-psd2), [Collect and Charge a Card](/use-cases/capture-and-charge), [complete checkout example](/use-cases/example-checkout-page-3ds).

## Payments Library

A hotel booking paid with the [Payments Library](/payments-library/overview): Apple Pay, Google Pay, PayPal and card buttons rendered by one library on your page.

[Open the demo](https://demo.pcibooking.net/demos/pci-shield-library.html)

Apple Pay and Google Pay buttons appear only on a device and browser that support them.

Related guides: [Payments Library Setup](/payments-library/setup), [Supported Payment Methods](/payments-library/supported-methods).

## System Status

The live status of PCI Booking's services. See [System Status](/support/system-status).

## Related

* [Quickstart](/start-here/quickstart). The same capture and charge flow, step by step.
* [Testing and Going Live](/getting-started/testing-and-going-live). Test cards and the difference between sandbox and live accounts.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.