Hosted Payments Form Checkout

Hosted Payments Form Overview

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: Invoice and Description are optional fields, that portion of the code can be commented out if you do not wish to utilize it.

Code Sample

<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>

Callback Sample

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