How to Create a Custom Checkout Page with Hosted Payment Fields

Written by: Scott Ring

You always need to put your best foot forward and present the perfect image to your shoppers in order to demonstrate that you are a top notch merchant. In order to achieve this, many merchants choose to integrate to a payment processor via an API so that that they can build a fully customized checkout experience, rather than using an out-of-the-box solution.

 

The drawback to this, of course, is that it usually means that you will have a higher PCI compliance burden because you are dealing directly with sensitive payment information like credit card numbers.

 

That’s why BlueSnap is introducing Hosted Payment Fields, which enable you to build your own custom checkout flow using our API, while reducing your PCI compliance requirements from SAQ-AEP to the simpler SAQ-A level.

 

Hosted Payment Fields are small, transparent iFrames that replace the sensitive credit card inputs in your checkout form. These iframes securely handle the collection of the shopper’s sensitive credit card data directly on BlueSnap’s server, so that this data never reaches your environment. When your shopper completes entering their payment data, BlueSnap binds the payment data to a single use token that will be used as part of the payment authorization. You can also save the shopper details in BlueSnap by including the token in your API requests.

 

 

How Hosted Payment Fields Work

  1. Begin with your own checkout design and flow. The hosted fields can be customized to match the overall design of your checkout page
  2. Next, create a Hosted Fields token for the specific checkout session, using a server-to-server API call.
  3. On your checkout form, make a call to BlueSnap’s Hosted Fields JavaScript file with this Hosted Fields token.
  4. After the shopper completes the form and clicks “Submit”, the sensitive payment data from the Hosted Fields is saved in BlueSnap’s database and bound to the Hosted Fields token you provided. This includes the following fields:
    • Credit Card Number
    • Expiration Month/Year
    • CVV

 

hosted payment fields bluesnap 2

 

And that’s it! Since the capture of the this sensitive credit card data occurs on our BlueSnap servers and not your own, you qualify for the simple SAQ-A requirements, while maintaining the preferred design and image you want to present to your shoppers.

 

Have questions about Hosted Payment Fields? Check out our documentation or reach out to one of our team members today:

Increase conversion rates up to 40%

Learn how your business can convert and protect more revenue.

Talk to a Conversion Consultant Today