Hosted Controls Demo Builder

This demo builder will allow you to play around with most of the settings for Hosted Controls to be able to build your own demo to match your application needs

Setup
Payor Info














Amount Info (Ignored if doing Token Only operation)
Additional Options


Note: Not a complete list, just a sample

Note: Not a complete list, just a sample

Language Preference Information

Hosted Payments uses the Language Preference Tag for localization. It will default to "en-US" if not provided or an unsupported culture code is provided. The only supported culture codes are:

  • en-US - English (US)
  • en-CA - English (Canada)
  • fr-CA - French (Canada)

Hosted Payments determines the appropriate localization based on the Language Preference Rule:

  • 0 - Default/Not Provided. Content is localized to en-US
  • 1 - Fallback to Language Preference Tag if no valid Accept-Language is provided. If the Language Preference Tag is also invalid, use en-US
  • 2 - Force use of the Language Preference Tag. If no valid tag is provided, use en-US for localization.
Custom Merchant Authorization Information (Optional)

To test the demo builder with an alternative merchant, enter the authorization details below. Leaving any field blank will default the transaction to the demo merchant.

Auto Populate
Instructions

This page allows you to configure demo pages to match the use case for your application.

Setup

First confirm your Javascript version. If you are doing a new integration you should always choose the latest version, otherwise select the version that matches your implementation. Next select the operation and payment source, then select the appropriate authorization method. Card Entry Context for Credit, or ACH Authorization Type for ACH

Payor Information

Next fill in the Payor information panel. If you want to simulate having payor information already provided by your system, go ahead and enter it here. If you leave it blank it will be expected to be entered on the demo page. Use the check boxes to show whether these fields will show on the Demo Host page.

Note: Only the Name on Account and Zip code are required for Hosted Payments, the other fields are optional.

Amounts

Next you have the Amount information panel. Hosted Payments supports a single payment amount or a subtotal with tax and total. If you want to have a tip amount then you will need to perform an authorization and then add the tip with the "Capture" method in the API

Note that amounts are ignored if doing a Token Only operation

Additional Options

  • Customer ID - Pass in your customer identifier to assist with tracking
  • Card Number Input Placeholder - Add custom placeholder text to the CardNumber input control
  • Expiration Month Input Placeholder - Add custom placeholder text to the Expiration Month input control
  • Expiration Year Input Placeholder - Add custom placeholder text to the Expiration Year input control
  • CVV Input Placeholder - Add custom placeholder text to the CVV input control
  • Account Number Input Placeholder - Add custom placeholder text to the Account Number (ACH) input control
  • Routing Number Input Placeholder - Add custom placeholder text to the Routing Number (ACH) input control
  • Account Type Input Placeholder - Add custom placeholder text to the Account Type (ACH) input control
  • Include Token - When performing a payment or authorization, this option will allow you to ALSO get a token back
  • Disable Duplicate Detection - Disables the duplicate detection for this transaction
  • Auto Void if not Captured time - Set a number of minutes before the authorization gets auto voided