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 https://captures.firstoken.co/ 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.

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/ for all items in this documentation.

A common Captures Iframe element without CSS style looks like this:

<iframe
    src="https://capture.firstoken.co?i=We7NzF3hUQ8lmUOy&t="eyJpc3MiOiJ0b3B0YWwuY29tIiwiZXhwIjoxNDI2NDIwODAwLCJodHRwOi8vdG9wdGFsLmNvbS9qd3RfY2xhaW1zL2lzX2FkbWluIjp0cnVlLCJjb21wYW55IjoiVG9wdGFsIiwiYXdlc29tZSI6dHJ1ZX0” style="border:none;" title="Example">
</iframe >

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:

<iframe
    src="https://capture.firstoken.co?i=We7NzF3hUQ8lmUOy&t="eyJpc3MiOiJ0b3B0YWwuY29tIiwiZXhwIjoxNDI2NDIwODAwLCJodHRwOi8vdG9wdGFsLmNvbS9qd3RfY2xhaW1zL2lzX2FkbWluIjp0cnVlLCJjb21wYW55IjoiVG9wdGFsIiwiYXdlc29tZSI6dHJ1Z X0&s=input%7Bborder-radius%3A6px%3Bmargin-bottom%3A6px%3Bpadding%3A12px%3Bborder%3A1pxsolidrgba%2850%2C50%2 C93%2C0.1%29%3Bheight%3A44px%3Bfontsize%3A16px%3Bwidth%3A100%25%3Bbackground%3Awhite%3B%7D” style="border:none;" title="Example">
</iframe>

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:

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

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