Firstoken API Docs
  • ⚙️API Reference
    • Firstoken API
      • Tokenization As A Service
        • Simple Tokenization
        • Simple Detokenization
        • Inspect Token
        • Delete Tokens
      • Transactions
        • Create a Transaction
        • Retrieve a Transaction
        • Inspect a Transaction
        • Delete a Transaction
        • Tokenize a Transaction
      • Proxy
        • Allowed Headers
        • Actions
        • Methods
          • POST - Proxy
          • GET - Proxy
          • PUT - Proxy
          • PATCH - Proxy
          • DELETE - Proxy
        • Get Payload Hash
        • Proxy JOSE
        • Proxy WSSEC
      • Inbound Routes
        • Create an Inbound - POST
      • Payments
        • Attributes of the Request
        • Common response
        • Endpoints
          • Authorizations
          • Reversals
          • Capture
            • Capture Refunds
            • Capture Void
          • Payments
            • Payment Refunds
            • Payment Void
          • Refunds void
          • Credit
            • Credit Void
          • Get Transaction Details
        • Decision Manager
          • How it works
          • Create decision
          • Update Decision
        • Risk Payer Authentication
          • How to use it
          • 3-D Secure Flows
            • Successful Frictionless Authentication
            • Unsuccessful Frictionless Authentication
            • Attempts Processing Frictionless Authentication
            • Unavailable Frictionless Authentication
            • Rejected Frictionless Authentication
            • Authentication not available on Lookup
            • Enrollment check error
            • Time-out
            • Bypassed Authentication
            • Successful Step-Up Authentication
            • Unsuccessful Step-Up Authentication
            • Unavailable Step-Up Authentication
            • Require Method URL
        • Point of Sale Payments
          • Authorization
          • Capture
          • Payment
          • Credit
  • 📖Guides
    • Firstoken Captures Hosted Iframe
      • How Firstoken Captures works
      • Generating a JSON Web Token
      • JSON form Schema
      • Iframe Communication
    • De-scoping Components
      • How Firstoken De-scoping Components works
      • Inbound Routes Module
        • Create an Inbound Route
        • Edit an Inbound Route
        • Delete an Inbound Route
      • Webhook Module
        • Create a Webhook
        • Edit a Webhook
        • Delete a Webhook
        • Webhook events
        • How to sign Webhooks data
      • Proxy Module
        • Create a Proxy
        • Edit a Proxy
        • Delete a Proxy
    • Firstoken Captures SDK JS
      • Getting Started
      • Functions
      • Type of Elements
      • Elements Options
      • CSS Object
      • Full Example of Usage
      • SDK versions
Powered by GitBook
On this page

Was this helpful?

  1. Guides
  2. Firstoken Captures Hosted Iframe

How Firstoken Captures works

How Firstoken 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 Firstoken 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

PreviousFirstoken Captures Hosted IframeNextGenerating a JSON Web Token

Last updated 1 year ago

Was this helpful?

📖