Hosted Payment Fields

If you would like to build your custom checkout flow using the API, but keep your PCI compliance requirements limited to the minimal SAQ-A level, BlueSnap’s Hosted Payment Fields are the ideal solution.

Hosted Payment Fields are iframes that replace sensitive credit card input fields in your checkout page. When the shopper submits the checkout form, BlueSnap binds this payment data to a token. You can then easily process payments or save shopper details by including the token in your BlueSnap API requests.


For setup instructions, see:
Implementing Hosted Payment Fields in your checkout form
Styling the Hosted Payment Fields


  • Control the look and feel of your checkout flow, including the Hosted Payment Fields
  • Simplest level of PCI compliance: SAQ-A
  • Securely capture payment information
  • Use the Hosted Payment Fields token to complete a sale or create or update a Vaulted Shopper

How it works

These steps provide a summary of how Hosted Payment Fields work:

  1. You create a Hosted Payment Fields token for the specific checkout session, using a server-to-server API call.
  2. On the checkout form, you call BlueSnap’s Hosted Fields JavaScript file with this Hosted Payment Fields token.
  3. After the shopper completes the form and clicks “Submit”, the sensitive payment data from the Hosted Payment Fields is saved in BlueSnap’s database and bound to the Hosted Payment Fields token you provided. This includes the following fields:
  • Credit Card Number
  • Expiration Month/Year
  • CVV
  1. Once the form has been submitted, you can use the Hosted Payment Fields token to process the purchase, create a shopper, or update a shopper with the new card details provided on the checkout page.