Easy start with BlueSnap hosted payment fields; - payment

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
Obtain the Hosted Payment Field token for the session
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>
Add the Hosted Payment Fields to your checkout form
<div data-bluesnap="ccn"></div>
<div data-bluesnap="exp"></div>
<div data-bluesnap="cvv"></div>
Add a script to initiate the Hosted Payment Fields with your Hosted Fields token
Add a script to submit credit card, expiration date and CVV data