Velocity Developer Resources

Hosted Checkout Forms

Hosted Payments Form

Make accepting payments easier, and let us do the work for you. Our Hosted Payments Form checkout is simple to set up and secure for processing.

The first thing you will need is the HTML for the button. Multiple buttons can be placed on a page with the option to update the item name, item description, and dollar amount.

Implementation

Use the button by applying the velocity-button css class and utilizing the data attributes shown:

data-public-key: The merchant's unique identifier with the gateway. You will receive the production public key once the testing is completed and the account is approved.

data-optional-parameters: An optional field that can be used for sending a reference or description by the end user.

Note: data-invoice-no and data-description are optional fields, that portion of the code can be commented out if you do not wish to utilize it.

Button HTML

<html>
 <head>
  <script src="https://api.cert.nabcommerce.com/1.2/button.js" type="text/javascript"></script>
 </head>
 <body>
  <button 
   class="velocity-button"
    data-billing="billinginfo|bname|baddress|bcity|bstate|bzip|bcountry|bemail|bphone"
    data-shipping="shippinginfo|usebillinginfo|shname|shaddress|shcity|shstate|shzip|shcountry"
    data-public-key="x"
    data-description="Test"
    data-invoice-no="123"
    data-callback-function="onPaymentCompletion"
    data-optional-parameters="useReference"
    data-merchant-name="Your Merchant Name">
    Pay Now
  </button>
 </body>
</html>

JavaScript

<script>
function onPaymentCompletion(response){
    console.log(response)
};
</script>

Demo

The Velocity Hosted Payments Form solution allows you to take advantage of a system that is already set up. Just a few quick steps, you are ready to start processing payments.

VIEW DEMO

Direct Post Checkout

The Direct Post process includes two simple steps. The merchant's checkout page collects required payment information and the encrypted data will be sent to the Velocity servers. The Velocity server will then charge the card and return the response to the JavaScript on the merchant's checkout page.

Step 1: Payment Form

Start with an example payment form like this (note: we are using ReCaptcha to prevent fraud):

HTML

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
<script src="https://api.cert.nabcommerce.com/1.2/post.js" type="text/javascript"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body>
<div id="container">
  <div id="errors"></div>
  <form id="payment">
    <div>
      <label>Amount</label>
      <input class="" id="amount" size="30" type="text" value="10.00" />
    </div>
    <div>
      <label>Street</label>
      <input class="" id="street" size="30" type="text" value="123 N. Main St." />
    </div>
    <div>
      <label>City</label>
      <input class="" id="city" size="30" type="text" value="Denver" />
    </div>
    <div>
      <label>State</label>
      <input class="" id="state" size="30" type="text" value="CO" />
    </div>
    <div>
      <label>Zip</label>
      <input class="" id="zip" size="30" type="text" value="30329" />
    </div>
    <div>
      <label>BillingZip</label>
      <input class="" id="billingzip" size="30" type="text" value="30329" />
    </div>
    <div>
      <label>Email</label>
      <input class="" id="email" size="230" type="text" value="John.Smith@test.com" />
    </div>
    <div>
      <label>Phone</label>
      <input class="" id="phone" size="30" type="text" value="5555552749" />
    </div>
    <div>
      <label>Name</label>
      <input class="" id="name" size="130" type="text" value="John Smith" />
    </div>
    <div>
      <label>Card Type</label>
      <select id="cardtype" />
      <option value="Visa">Visa</option>
      <option value="MasterCard">MasterCard</option>
      <option value="AmericanExpress">AmericanExpress</option>
      <option value="Discover">Discover</option>
      </select>
    </div>
    <div>
      <label>Credit Card Number: </label>
      <input id="pan" type="text" maxlength="16" autocomplete="off" value="4111111111111111" autofocus />
    </div>
    <div>
      <label>CVC: </label>
      <input id="cvc" type="text" maxlength="4" autocomplete="off" value="123"/>
    </div>
    <div>
      <label>Expiry Date: </label>
      <select id="exp-mo" value="12">
        <option value="01">Jan</option>
        <option value="02">Feb</option>
        <option value="03">Mar</option>
        <option value="04">Apr</option>
        <option value="05">May</option>
        <option value="06">Jun</option>
        <option value="07">Jul</option>
        <option value="08">Aug</option>
        <option value="09">Sep</option>
        <option value="10">Oct</option>
        <option value="11">Nov</option>
        <option value="12">Dec</option>
      </select>
      <select id="exp-year" value="18">
        <option value="13">2013</option>
        <option value="14">2014</option>
        <option value="15">2015</option>
        <option value="16">2016</option>
        <option value="17">2017</option>
        <option value="18">2018</option>
        <option value="19">2019</option>
        <option value="20">2020</option>
        <option value="21">2021</option>
        <option value="22">2022</option>
      </select>
    </div>
    <div>
      <div class="g-recaptcha validate" data-sitekey="6LcCXwwUAAAAAO8617hw-277eL5cMAJ5SBsebhWk" ></div>
    </div>
    <button id="process-payment-btn" type="submit">Process Payment</button>
  </form>
</div>
</body>

Step 2: JavaScript

Collect the form info and pass it into the Velocity.tokenizeForm method with a response handler. In the response handler, look for a 200 result code indicating a success with useful response information in the response text.

JavaScript

<script type="text/javascript">
   $(document).ready(function() {
       $("#process-payment-btn").click(function() {
           var publicKey = 'x';
   
           var cardInfo = {
               CardholderName: $("#name").val(),
               CardHolderEmail: $("#email").val(),
               cardtype: $("#cardtype").val(),
               number: $("#pan").val(),
               cvc: $("#cvc").val(),
               expMonth: $("#exp-mo").val(),
               expYear: $("#exp-year").val(),
               amount: $("#amount").val(),
               PostalCode: $("#billingzip").val(),
           };
   
           var customerInfo = {
               Name: $("#name").val(),
               Street: $("#street").val(),
               PostalCode: $("#zip").val(),
               City: $("#city").val(),
               State: $("#state").val(),
               ID: '12345',
               Email: $("#email").val(),
               Phone: $("#phone").val(),
           };
   
           was merchantInfo = {
               ProductName: 'Bill',
               ProductDescription: 'Services',
               ProductQuantity: '1',
               ProductPrice: $("#amount").val(),
               CurrencyCode: 'USD',
               OrderId: '12345',
               Logo: 'http://nabvelocity.com/features/hosted-checkout/hosted-payment-form/velocity.png',
           }
   
           var captcha = grecaptcha.getResponse();
   
           Velocity.tokenizeForm(publicKey, captcha, cardInfo, customerInfo, merchantInfo, responseHandler);
           return false;
       });
   
       function responseHandler(result) {
           if (result['code'] == 200) {
               alert(result['text']);
           } else {
               for (var i in result) {
                   $('#errors').append(i + ": " + result[i] + "<br />");
               }
   
               alert($('#errors').text());
           }
       }
   });
</script>

Demo

With Velocity's Direct Post solution, merchants can easily process credit card transactions on their own website to maintain the look and feel of their brand image.

VIEW DEMO