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

Note: If you have previously integrated with the Payfields API, complete only step 5.

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.
Add a button for Delay Pay.
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. Add a button for Delay Pay

Step one: Add a button element to your payment page

Add a button element to your payment page and customize the button to match your branding.

Code example

Step two: Add JavaScript to the button element

Program the payment page to call an iFrame containing TUA's loan page. The JavaScript should contain code to handle the response from TUA.

Code example

Payload definitions

Note: If you send the customer object, it does not populate TUA's loan form. This object is optional.

Object	Parameter	Type	Size	Required?	Description
loan	amount	String	1-9	Required	Total dollar amount of the loan. The value includes two decimal places, for example, `100.00`.
currency_code	String	Explicit	Required	ISO currency code for the loan. Send one of the following values: • `840` - United States • `124` - Canada
language	String	Explicit	Optional	Language for the text that displays on your payment page and the merchant's receipts. Send one of the following values: • `en-US` - American English • `en-CA` - Canadian English • `fr-CA` - French Canadian
customer	title	String	1-10	Optional	Customer's title. Note: If the customer is a business, do not send this parameter. Send the business_name parameter.
first_name	String	1-50	Optional	Customer's first name. Note: If the customer is a business, do not send this parameter. Send the business_name parameter.
middle_name	String	1-50	Optional	Customer's middle name. Note: If the customer is a business, do not send this parameter. Send the business_name parameter.
last_name	String	1-50	Optional	Customer's last name. Note: If the customer is a business, do not send this parameter. Send the business_name parameter.
business_name	String	2-50	Optional	Name of the customer's business. Note: If the customer is not a business, send a value for each of the following parameters: title, first_name, middle_name, and last_name.
email	String	1-50	Optional	Customer's email address.
phone	String	2-50	Optional	Customer's phone number.
note	String	1-250	Optional	Note that the merchant can add about a customer.
date_of_birth	String	Explicit	Optional	Customer's date of birth in format.

contact_address object

Parameter	Type	Size	Required?	Description
line1	String	1-50	Optional	First line of the customer's address.
line2	String	1-50	Optional	Second line of the customer's address.
city	String	1-50	Optional	City of the customer's address.
po_box	String	1-255	Optional	Customer's PO box.
state	String	1-50	Optional	State or province of the customer's address.
country	String	1-50	Optional	Country of the customer's address.
postal_code	String	1-20	Optional	Postal code of the customer's address.

resp object

The resp object is passed back to the following callback functions:

gpi-acf-success
gpi-acf-error
error

gpi-acf-success

Parameters for the resp object passed to the gpi-acf-success callback function.

Object	Parameter	Type	Description
	event	String	Possible values: • success • failure
data	temporary_token	String	Temporary identifier for the card details. Our gateway generates this temporary token when the customer submits their payment details.
loan	masked_lending_broker_loan_id	String	Unique identifier for the lending broker of a loan.
	approved_amount	String	Approved amount for the transaction.
	currency_code	String	ISO currency code for the sale

gpi-acf-error

Parameters for the resp object passed to the gpi-acf-error callback function.

Object	Parameter	Type	Description
error	code	String	Text that indicates the reason why our gateway couldn't process the request.
	message	String	Text that describes the error.
	info	String	A link to our website for more information.

6. Customize 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

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

Policies

Connect

Additional Resources

Configuring Your Payment Page

1. Create HTML elements on your payment page

2. Link our JavaScript library to your payment page

3. Add your credentials to the library

Code Example

4. Call the UI form and create the pay fields

Code example

5. Add a button for Delay Pay

Step one: Add a button element to your payment page

Code example

Step two: Add JavaScript to the button element

Code example

Payload definitions

resp object

6. Customize the pay fields on your page

Code example

7. Handle callback function responses

Success

Error

Card number validation

Card expiration validation

Card Verification Value validation