> For the complete documentation index, see [llms.txt](https://firstoken.gitbook.io/api-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://firstoken.gitbook.io/api-docs/guides/implementing-hosted-iframes/how-captures-works.md).
# How Captures works
### How Captures works
A Firstoken Captures iframe element can be invoked on any website just by embedding an HTML iframe tag with certain parameters specific to your account. The entire process of capturing sensitive data occurs on the client-and-server-side of Firstoken thus minimizing all risk in the capture process and ensuring the reduction of your PCIDSS scope. The capture and transmission of CHD (cardholder data) are managed by Firstoken and at no time are your client-and-server compromised.
All Firstoken Captures must be called from the base URL followed by query parameters with your account identifier, a JWT (JSON Web Token) generated on your server-side web page for maximum security, and optionally a Unicode URL string with CSS statements for full control of the styling of your HTML form.
{% hint style="info" %}
**Note**: if you are testing the service in a test environment yet you must use the URL for test purpose [https://captures.firstoken-staging.co/](https://captures.firstoken.dev/) for all items in this documentation.
{% endhint %}
A common Captures Iframe element without CSS style looks like this:
{% code overflow="wrap" %}
```html
```
{% endcode %}
Additionally, you can pass your own CSS style blocks via query params into the “-s” params within the URL Unicode form for complete control of the looks of your form. A common FirsToken Captures element with a custom style looks like this:
{% code overflow="wrap" %}
```html
```
{% endcode %}
In the above example we add a custom CSS style to change the looks of all the input fields in Firstoken Captures Iframe form. The CSS block style code passed within the URL was the below:
And the final CSS block URL Unicode transform looks like this:
input {
border-radius: 6px;
margin-bottom: 6px;
padding: 12px;
border: 1px solid rgba(50, 50, 93, 0.1);
height: 44px;
font-size: 16px;
width: 100%;
background: white;
}
The Unicode CSS code looks like this:
{% code overflow="wrap" %}
```
input%7Bborder-radius%3A6px%3Bmarginbottom%3A6px%3Bpadding%3A12px%3Bborder%3A1pxsolidrgba%2850%2C50%2C93%2C0.1%29%3Bheight%3A44px%3Bfontsize%3A16px%3Bwidth%3A100%25%3Bbackground%3Awhite%3B%7D
```
{% endcode %}
{% hint style="info" %}
Note: The maximum CSS block length included the characters used to pass the application identifier and JWT is 1024 characters. If you pass a CSS code style and the total characters exceed 1024 characters, the CSS style will not show in your form. Make sure the query params of your iframe URL source contains less than 1024 character
{% endhint %}
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://firstoken.gitbook.io/api-docs/guides/implementing-hosted-iframes/how-captures-works.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.