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.

Hosted Fields - Guide

Process transactions with Hosted Fields

These solutions are available in US and Canada only. For all other regions, please contact us for support.

To start processing a sale transaction, complete the following steps in order.

1. Call the UI form and create the payment fields

The UI form needs to be rendered with the input fields within the elements created. Call the GlobalPayments.ui.form and create the payment fields. Each field must target the HTML elements you created as outlined in our configuration guide.

You can add optional fields and customize your fields at this step. For more information about customization, see customizing payment fields on your page.

var cardForm = GlobalPayments.ui.form ( {
  fields : {
    "card-number" : {
      target : "#card-number",	
      placeholder :  "•••• •••• •••• ••••"
    },
    "card-expiration" : {
      target : "#card-expiration",
      placeholder : “MM / YYYY”
    },
    "card-cvv" : {
      target : "#card-cvv",
      placeholder : "•••"
    },
    "submit" : {
      target : "#submit",
      text : "Submit"
    }
  },

  styles : {
    // your styles
  }
});

2. Create the temporary token

Once the JavaScript is successful in initializing the Hosted Fields, the input fields are rendered on your payment form. When the cardholder enters their card details and submits the form, a temporary token is returned.

The example below shows how to append a payment token as a hidden field and pass it to the server-side to process a transaction. However, you can also pass the token asynchronously to the server-side.

cardForm.on("token-success", (resp)=>{
  // add a payment token to form as a hidden input
  const token = document.createElement("input");
  token.type = "hidden";
  token.name = "temporary_token";
  token.value = "resp.temporary_token";

  // submit temporary_token to server-side, process with our gateway
  const form = document.getElementById("payment-form");
  form.appendChild(child);
  form.submit;
});

3. Process a sale

To process a Sale using our REST API, instead of submitting the customer’s card information in the request, you can simply include the temporary token. This single-use token expires after 30 minutes. You can also assign a reference number to the payment transaction to help reconcile it later.

Instead of processing a sale (auto-capture), you can choose to process an authorization (delayed-capture). For more details, see our API Reference.

To process a follow-on transaction that links to the original transaction, you can include the 'reference_id' or the 'creditsale_id' as part of the endpoint URL. If you want to save the customer's card details to use for future transactions, you must include the 'create_token' field in your request.

Sample request

Important: For authentication, you must include the required headers in each request. For more information, please refer to Authenticating Your Requests.

Endpoints

Environment	HTTP Method	URL
Sandbox	POST	https://api.pit.paygateway.com/transactions/creditsales
Production	POST	https://api.paygateway.com/transactions/creditsales

Content-Type: application/json
Authorization: AuthToken {AuthTokenV2}
X-GP-Request-Id: {request_id}
X-GP-Version: 2021-04-08
X-GP-Api-Key: {SERVER-SIDE API Key}
X-GP-Partner-App-Name: {Name of integrating application}
{
    "reference_id": "XAZR863990",
    "card": {
        "temporary_token": "111xx111-x11x-1xx1-1111-x11x1111x11x"
    },
    "customer": {
        "billing_address": {
            "line1": "123 Test Ave",
            "postal_code": "55555"
        }
    },
    "payment": {
        "amount": "9.57",
        "currency_code": "840"        
    },
    "transaction": {
        "country_code": "840",
        "processing_indicators": {
            "create_token": true,
            "address_verification_service": true,
        }
    }
}

Sample response

{
    "creditsale_id": "000000084344",
    "status": "approved",
    "approval_code": "343390",
    "avs_response": "full_match",
    "avs_response_description": "Match - Street Address, Match - Postal Code",
    "processor_response": "DEVELOPMENT APPROVAL",
    "card": {
        "masked_card_number": "476173XXXXXX0010",
        "cardholder_name": "test name",
        "expiry_month": "12",
        "expiry_year": "35",
        "type": "visa"
    },
    "payment": {
        "amount": "9.57",
        "currency_code": "840",
        "type": "credit"
    },
    "transaction": {
        "batch_amount": "26.81",
        "batch_number": "000060",
        "entry_type": "keyed",
        "language": "en-US"
    },
    "links": [
        {
            "creditsale_id": [
                {
                    "href": "https://api.pit.paygateway.com/transactions/creditsales/000000084344",
                    "relation": "self",
                    "method": "GET",
                    "description": "Use this endpoint to retrieve a sales transaction."
                },
                {
                    "href": "https://api.pit.paygateway.com/transactions/creditsales/000000084344",
                    "relation": "self",
                    "method": "PATCH",
                    "description": "Use this endpoint to update the amount or other values of a previous sales transaction."
                },
                {
                    "href": "https://api.pit.paygateway.com/transactions/creditsales/000000084344/voids",
                    "relation": "void",
                    "method": "PUT",
                    "description": "Use this endpoint to void a previous sales transaction."
                },
                {
                    "href": "https://api.pit.paygateway.com/transactions/creditsales/000000084344/returns",
                    "relation": "return",
                    "method": "POST",
                    "description": "Use this endpoint to create a returns transaction associated with a previous sales transaction."
                }
            ]
        },
        {
            "reference_id": [
                {
                    "href": "https://api.pit.paygateway.com/transactions/creditsales/reference_id/XAZR863990",
                    "relation": "self",
                    "method": "GET",
                    "description": "Use this endpoint to retreive a previous sales transaction using reference id."
                },
                {
                    "href": "https://api.pit.paygateway.com/transactions/creditsales/reference_id/XAZR863990",
                    "relation": "self",
                    "method": "PATCH",
                    "description": "Use this endpoint to update the amount or other values of a previous sales transaction using reference id."
                },
                {
                    "href": "https://api.pit.paygateway.com/transactions/creditsales/reference_id/XAZR863990",
                    "relation": "void",
                    "method": "PUT",
                    "description": "Use this endpoint to void a previous sales transaction using reference id."
                },
                {
                    "href": "https://api.pit.paygateway.com/transactions/creditsales/reference_id/XAZR863990/returns",
                    "relation": "return",
                    "method": "POST",
                    "description": "Use this endpoint to create a returns transaction associated with a previous sales using reference id."
                }
            ]
        }
    ],
    "reference_id": "XAZR863990"
}

Test and expand your integration

Manage Payments

Follow-on transactions

Tokenization

Tokenize card details

Apple Pay

Apple Pay integration

Google Pay

Google Pay integration

Delay Pay (BNPL)

Delay Pay integration

API Reference

Direct API reference

Hosted Fields - Guide | Global Payments