Hosted Fieldsanchor

Hosted Fields is a way to accept credit card payments securely using our JavaScript SDK, while staying in control of the style of your desktop and mobile website checkout UI.

Inputs for credit card data

Hosted Fields provides custom iframes for collecting certain sensitive payment fields, which are rendered as inputs directly onto your checkout page.

See the examples
Hosted fields code window
Hosted fields lock icon
Securely-hosted credit card data

Use Hosted Fields to remain eligible for SAQ A PCI compliance.

Hosted fields palette icon
Your customized look and feel

Style your checkout form according to your specific brand guidelines.

Hosted fields code icon
Card-specific form events

Check for valid credit card inputs and update your UI accordingly.

Hosted Fields and your server

Data collected using Hosted Fields is sent directly from your client to Braintree, so your customers' raw payment information never touches your server.

Braintree associates that data with a secure, one-time-use string called a payment method nonce, which is used instead.

This exchange helps safeguard your customers' card data – and helps keep your PCI compliance scope to a minimum.

Client side payment token flowDiagram demonstrating the required interaction between the client, Braintree servers and your server.

Integrate Hosted Fields

Step-by-step

  1. Set up your server with one of our server SDKs in the language of your choice.

  2. Set up your web client with our JavaScript SDK, then

    add Hosted Fields

    .

  3. Consider adding other payment methods to complete your integration.

  4. If needed, set up your iOS and Android clients using our mobile SDKs.

Want to dig deeper? Our JavaScript v3 client reference has all the details.

See the Hosted Fields reference

If you're looking for a pre-formatted form to start accepting payments on mobile and web, consider reading about the Drop-in UI, the quickest way to get set up with Braintree.