Easy start with BlueSnap hosted payment fields;

Question

Hi – I'm looking for a simple script I can Copy&Paste into my website so I can start selling with BlueSnap's HPF fields. The form should include the most basic elements needed to get the token back and charge the shopper, I'm not looking for any design, just functionality.

I have the basics - but I need to see how this would look like if it was done:

<form id="checkoutForm">

          <div>
              <label>Full Name:</label>
              <input type="text" id="fullName">
          </div>

          <div>
              <label>Card Number:</label>
              <input type="text" id="cardNumber" data-bluesnap="ccn">
          </div>

          <div>
              <label>Security Code:</label>
              <input type="text" id="securityCode" data-bluesnap="cvv">
          </div>

          <div>
            <label>Expiration Date (MM/YYYY):</label>
              <input type="text" id="expirationDate" data-bluesnap="exp">
          </div>

          <button type="submit" id="buynowButton">Buy Now</button>

    </form>

Can anyone help me with that?

Answer 1

In order to implement BlueSnap Hosted Payment fields all you need to do is

plnkr simple example link

1. Obtain the Hosted Payment Field token for the session

2. Add the BlueSnap JavaScript file to your checkout form

   <script type="text/javascript" src="BLUESNAPDOMAINPATH/services/hosted-payment-fields/v2.0/bluesnap.hpf.min.js"></script>

3. Add the Hosted Payment Fields to your checkout form

   <div data-bluesnap="ccn"></div>

   <div data-bluesnap="exp"></div>

   <div data-bluesnap="cvv"></div>

4. Add a script to initiate the Hosted Payment Fields with your Hosted Fields token

5. Add a script to submit credit card, expiration date and CVV data