Build a Checkout Form

In this tutorial, we're going to create a basic payment form and set it up to use BlueSnap's Hosted Payment Fields. This will limit your PCI compliance burden to the simplest SAQ-A level, because sensitive payment data will never hit your server.

When you're using Hosted Payment Fields, the credit card number, CVV, and expiration date are all saved directly to BlueSnap servers and associated with a token. Then you can use that token to process payments or save shopper details.

📘
If you already have a checkout page or app where shoppers can enter their payment information, you can jump ahead to charging a card.

Basic checkout form

To begin, let's look at a typical checkout form without Hosted Payment Fields:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
</head>

<body>

<form action="" method="POST" id="checkout-form">
  
  <div>
	  <label for="creditCard">Card Number</label>
	  <input type="text" name="creditCard" id="creditCard">
  </div>
 
  <div>
	  <label for="cvv">Security Code</label>
	  <input type="text" name="cvv" id="cvv">
  </div>
  
  <div>
    <label for="Expiration">Exp. (MM/YYYY)</label>
      <input type="text" name="exp-month" id="exp-month" size="2">
      <span> / </span>
      <input type="text" name="exp-year" id="exp-year" size="4">
  </div>

  <button type="submit" id="submit-button">Buy Now</button>
  
</form>
</body>

</html>

The input fields in this sample include the basic required information that you typically have to provide to BlueSnap's API in order to process a credit card payment.

However, if you have the shopper's sensitive credit card data sent directly to your server, you will be responsible for a high PCI compliance level, which most merchants prefer to avoid.

Therefore you likely want to use Hosted Payment Fields, as we will describe in this tutorial.

If you’re setting up a new shopper, we recommend that you add a shopper approval box to your checkout page so they have the opportunity to provide their consent to store their payment details; for example:

For more information, see Card on File.

Implementing Hosted Payment Fields

Follow the steps here to implement Hosted Payment Fields in your checkout form.

Next: Start processing payments

Now that you have a way to collect shopper payment information and get it to your server, you can jump right into processing your first payments. Refer to Charge a card (Payment API).