# Hosted Fields for Branded Payment Checkouts Source: https://payneteasy.com/payment_technologies/hosted-fields _Embed secure card fields in your branded checkout. Keep raw card data out of your page and backend and process payments with a token via Payneteasy._ ## Table of contents - [How Hosted Fields Works](#how-hosted-fields-works) - [Why Use Hosted Fields?](#why-use-hosted-fields) - [Make Hosted Fields Fit Your Interface](#make-hosted-fields-fit-your-interface) - [Built to Isolate Sensitive Card Data](#built-to-isolate-sensitive-card-data) - [Add Hosted Fields to Your Existing Payment Flow](#add-hosted-fields-to-your-existing-payment-flow) - [Use Hosted Fields With 3-D Secure](#use-hosted-fields-with-3-d-secure) - [Who Hosted Fields Is For](#who-hosted-fields-is-for) - [Hosted Fields FAQ](#hosted-fields-faq) **Your checkout. Our secure card fields.** Keep payers on your own branded checkout while card details go directly to Payneteasy. Hosted Fields places secure card-number, expiry-date and CVV fields inside your existing checkout. Card details go directly to Payneteasy, while your server receives a token instead of the card number. [Hosted Fields documentation](https://doc.payneteasy.com/integration/api_use_cases/hosted_fields.html) ## How Hosted Fields Works ### 01. The Payer Enters Their Card Details Card number, expiry date and CVV appear as secure fields inside your existing checkout page. The payer enters their card details without being redirected to a separate hosted payment page. ### 02. Card Details Go Directly to Payneteasy The secure card fields send the card details directly from the payer's browser to Payneteasy. The raw card number, expiry date and CVV do not pass through your page code or backend. ### 03. Your Server Completes the Payment With a Token Payneteasy exchanges the card details for a `hostedFieldsToken`, which your checkout sends to your backend. Your server then initiates the payment through the Payneteasy payment API using the token instead of the raw card parameters. > Tokenization itself does not initiate the transaction. ## Why Use Hosted Fields? ### Keep Your Checkout and Your Design Hosted Fields sits inside your existing checkout instead of sending the payer to a separate hosted payment page. You control the surrounding layout, labels, non-card fields, checkout logic and Pay button. ### Keep Raw Card Data Out of Your Systems Card details go directly to Payneteasy through the secure card fields. Your page and backend work with a token instead of the raw card number, expiry date and CVV. ### Use the Payment API You Already Know Hosted Fields changes how card details are collected, not how your server initiates the transaction. The standard server-to-server payment request remains in place, with `hostedFieldsToken` used instead of the card parameters. ## Make Hosted Fields Fit Your Interface **The surrounding checkout remains under your control.** You decide where the card fields appear and how they fit into the rest of the form. The field containers are styled through your own CSS, while supported styles for the content inside the secure fields are configured through the Hosted Fields SDK. This lets the card-entry step sit naturally inside your checkout without giving your page access to the card values. ## Built to Isolate Sensitive Card Data - Each sensitive field — card number, expiry date and CVV — is loaded inside its own Payneteasy-hosted cross-origin iframe. - Because the field contents belong to the Payneteasy origin, your page DOM and third-party scripts running on your page cannot read the raw card values. - The resulting `hostedFieldsToken` is short-lived and single-use. The original card details cannot be reconstructed from it. - Server-side signing credentials remain on your server. The browser receives only the `ephemeralTicket` required for tokenization. ## Add Hosted Fields to Your Existing Payment Flow Hosted Fields uses the Payneteasy JavaScript SDK in the browser and the standard Payneteasy payment API on your server. [View code examples](https://doc.payneteasy.com/integration/api_use_cases/hosted_fields.html) ### 01. Server — Request an ephemeralTicket Your server requests an `ephemeralTicket` for the Endpoint used for the payment. The ticket is valid for 15 minutes and is consumed by one tokenization. Server-side signing credentials remain on your server. ### 02. Browser — Keep Raw Card Data Out of Your Systems Load the Payneteasy Hosted Fields SDK and define the containers for card number, expiry date and CVV. The SDK creates a separate Payneteasy-hosted iframe for each card field and reports when the fields are ready. ### 03. Browser — Tokenize the Card Details Payneteasy returns a `hostedFieldsToken`. The token is short-lived, single-use and valid for 5 minutes. ### 04. Server — Initiate the Payment From Your Server Send the token from your checkout to your backend. Your server uses `hostedFieldsToken` instead of the raw card parameters in a supported Payneteasy payment request. The payment request — not the tokenization step — initiates the transaction. Transaction status continues through the standard Payneteasy callback or status-request flow. ## Use Hosted Fields With 3-D Secure Hosted Fields can be used with Payneteasy payment flows that require 3-D Secure authentication. Hosted Fields handles card-data collection and tokenization. It does not replace transaction authentication or payment-status handling. When authentication is required by the bank, the payer completes the required verification with their bank and then returns to the checkout. 1. **Hosted Fields — Keep Your Checkout and Your Design.** Card-data collection and tokenization inside your checkout. 2. **If required by the bank — 3-D Secure Verification.** The payer completes the required verification with their bank. 3. **Your checkout — Return to the Checkout.** The payer returns to your checkout after verification. ## Who Hosted Fields Is For Hosted Fields handles card-data collection and tokenization. It does not replace transaction authentication or payment-status handling. ### E-Commerce and Product Teams Keep the checkout inside your own product and brand instead of redirecting payers to a separate card-entry page. ### Developers Use the Payneteasy Hosted Fields SDK for card collection while continuing to work with the standard payment API on the server. ### Security and Compliance Teams Keep card numbers, expiry dates and CVV out of your page code and backend while the payment flow works with a token. > Payneteasy is a technology platform, not a bank or payment facilitator. ## Keep Your Checkout. Leave the Card Details to Payneteasy. Add secure card fields to your existing checkout and continue processing payments through the Payneteasy payment API. [Read the docs](https://doc.payneteasy.com/integration/api_use_cases/hosted_fields.html) ## Hosted Fields FAQ ### What are Hosted Fields? Hosted Fields are secure card fields provided by Payneteasy and embedded inside your own checkout page. They let payers enter card details inside your checkout while those details go directly to Payneteasy. ### Do payers leave our site? Not to enter their card details. The card fields appear inside your own checkout page rather than on a separate hosted payment page. If 3-D Secure authentication is required later in the payment flow, the payer completes the required verification with their bank. ### Does our system receive the card number? No. The card details go directly from the Payneteasy-hosted fields to Payneteasy. Your checkout receives a token instead, which is then sent to your backend for the payment request. ### Can Hosted Fields match our design? Yes, within supported styling options. You control the surrounding checkout layout and field containers with your own CSS, while supported styles for the content inside the secure card fields are configured through the Hosted Fields SDK. ### Does Hosted Fields support 3-D Secure? Yes. When the bank requires 3-D Secure authentication, the payer completes the required verification with their bank and returns to the checkout. ### Does tokenization complete the payment? No. Tokenization exchanges the card details for a token. Your server still needs to initiate a supported Payneteasy payment request using that token. ### How long is the Hosted Fields token valid? The `hostedFieldsToken` is valid for 5 minutes and is single-use. A new payment attempt requires a new tokenization flow. ### How do developers get started? Start with the [Hosted Fields documentation](https://doc.payneteasy.com/integration/api_use_cases/hosted_fields.html) for SDK setup, `ephemeralTicket` creation, tokenization and supported payment requests. Payneteasy also provides reference integrations and code examples for multiple server stacks.