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
Securely-hosted credit card data

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

Your customized look and feel

Style your checkout form according to your specific brand guidelines.

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 flow Diagram 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, like PayPal or Venmo, 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.

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.

Still have questions?

If you can’t find an answer, contact us