For AI agents: the complete documentation index is at /llms.txt, and the full text of every page is at /llms-full.txt. Most pages are also available as Markdown by adding .md to the URL.

Configuring Your Payment Page

To add pay fields to your payment page, complete the following steps:

Create HTML elements on your payment page.
Link our JavaScript library to your payment page.
Add your credentials to the library.
Call the UI form and create the pay fields.
Customize the pay fields on your page.
Handle callback function responses.

1. Create HTML elements on your payment page

You must create an HTML element with a unique ID for each pay field you want to put on your payment page. Include the following HTML elements:

Note: You can add other HTML elements, but your integration must manage them.

2. Link our JavaScript library to your payment page

Include the following JavaScript tag in the header of your page:

3. Add your credentials to the library

Add the following fields to the Global Payments library:

Field	Definition
X-GP-Api-Key	API key we give to integrating partners to access the JavaScript library.
X-GP-Environment	Environment for your integration. The value is one of the following: • `test` - Test environment • `prod` - Production environment
enableAutocomplete	Defines whether the user can use cards they have stored in their browser. Value is one of the following: • `true` - User can use card details they have previously stored in their browser. • `false` - User must manually enter their card details.

Code Example

4. Call the UI form and create the pay fields

Call the GlobalPayments.ui.form and create the pay fields. Each pay field must target the HTML elements you created in step 1.

Note: You can add optional fields and customize your fields at this step. For more information about customization, go to step 5.

Code example

5. Customizing the pay fields on your page

You can customize the pay fields on your page to match your branding. To do this, make changes to the styles object. The following code example changes the appearance of the button that the customer uses to submit the form.

Code example

6. Handle callback function responses

The Payfields API supports callback functions as part of the GlobalPayments.ui.form.on. When the customer submits the form, the gateway returns one of the following responses:

Success
Error
Card number validation
Card expiration validation
Card verification value validation

Success

The gateway returns a token-success response when a customer successfully completes and submits the pay fields. This response includes a temporary_token that you need to submit to the gateway for transaction requests.

Error

The gateway returns a token-error if the customer submits the form before they complete all the pay fields.

Use GlobalPayments.on to attach event listeners to errors and to expose global and parent window run-time errors.

Card number validation

The gateway runs a Luhn/Mod-10 validation on the card number the customer enters in the pay fields, and returns one of the following responses for valid :

true - card number is valid
false - card number is not valid

Card expiration validation

The gateway validates the card expiration date that the customer enters in the pay fields, and return one of the following responses for valid:

true - expiration date is valid
false - expiration date is not valid

Card Verification Value validation

The gateway validates the length of the Card Verification Value (CVV) that the customer enters in the pay fields. Depending on whether the CVV is valid, the gateway returns one of the following values for valid:

true - The CVV is three or four digits long.
false - The CVV is less than three digits in length or more than four digits in length.