Card Payments

Accepting credit and debit cards is fundamental for eCommerce and other businesses interested in expanding their customer base, increasing their sales potential. You can learn how to set that up here. 

When you get into the Sandbox, you’ll find a Tokenization Demo for JSFiddle examples. For a more in-depth guide to card payments see our full SDK documentation. You can also view our open source library on GitHub.

Basic HTML payment form

<form id="payment-form" action="/Payment/Charge" method="get">
  <!-- Other input fields to capture relevant data -->
  <label for="billing_zip">Billing Zip Code</label>
  <input id="billing_zip" name="billing_zip" value="47150" type="tel" />

  <!-- Target for the credit card form -->
  <div id="credit-card"></div>
</form>

Integrating tokenization into your form

Heartland tokenization uses the public API key to identify you and your target environment (for example, Certification, Production, etc.). So, when moving your application from the testing/certification environment to production, you need to update this in your code.

When the consumer submits the form, the payment_token field is updated to contain a single-use payment token. This token can be used to make a payment and request a multi-use token.

Validation

Our iframe-based input fields include built-in validation features to improve data accuracy and user experience during checkout.

• All fields restrict input to numeric characters only. This prevents common errors caused by entering letters or symbols.
• Each field automatically applies a CSS class of .valid or .invalid based on the input state, allowing you to distinctly style valid and invalid fields.
• The card number field also applies a .card-type-{brand} class (e.g., .card-type-visa), enabling you to display the appropriate card brand logo as a visual cue.

These classes can provide real-time feedback, highlight input issues, and guide users through form completion.

Once the consumer has entered their card information and submitted the payment form, the next step is to charge the token. In this step, you’ll configure the server-side SDK to collect the necessary data.

Configure authentication

Prepare to charge a card token

With the CreditCardData and Address objects initialized, you can use them to charge the consumer’s card. The Heartland server-side SDKs expose the payment method directly on payment objects such as CreditCardData.

Charge a card token

Declines and general errors can occur during processing. The server-side SDKs throw exceptions when the issuing bank declines a transaction or the input data fails validation. To handle these cases, wrap your charge request in a try/catch function.

Refer to the Error Handling section for details on exception types and how to identify the root cause of errors.

Exception handling