Hosted Fields - Configuration

To add Hosted Fields to your payment page, complete the following steps in order.

For each payment field you add to your payment page, create an HTML element with a unique ID. Include the following HTML elements.

<div id="card-number"></div>
<div id="card-expiration"></div>
<div id="card-cvv"></div>
<div id="submit"></div>

In the header of your page, include the following JavaScript tag. The JavaScript is hosted in our secure PCI environment.

<script src="https://js.paygateway.com/secure_payment/v1/globalpayments.js"></script>

Add the following fields to the Global Payments library.

GlobalPayments.configure( {
  'X-GP-Api-Key' : "<YOUR CLIENT-SIDE API KEY>",
  'X-GP-Environment' : "test", // test or prod
  'enableAutocomplete': true // true or false
});

To match your branding, you can customize the payment fields on your page by updating the styles object. The following example changes the appearance of the button that the customer uses to submit the form.

Code example

styles: {
  "button" : { 
    "color": "#9c9c9c", 
    "pointer-events": "none", 
    "cursor": "not-allowed" 
  }
}

Hosted Fields supports callback functions as part of the GlobalPayments.ui.form.on. When the customer submits the form, Hosted Fields returns one of the following responses:

• 'success'
• 'error'
• 'card number validation'
• 'card expiration validation'
• 'card verification value'

Success

Hosted Fields returns a 'token-success' response when a customer successfully completes and submits the payment fields. This response includes a 'temporary_token' that you need to submit to the REST API for a sale transaction request. For more details, see Step 2 create a temporary token in our guide for requesting a sale.

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;
});

Error

Hosted Fields returns a 'token-error' if the customer submits the form before they complete all the payment fields.

cardForm.on("token-error", (resp) => { 
  // show error to the consumer 
}); 

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

GlobalPayments.on("error", (error) => { 
  console.error(error); 
});

Card number validation

Hosted Fields runs a Luhn/Mod-10 validation on the card number the customer enters in the payment fields and returns one of the following validation responses:

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

cardForm.on("card-number-test", (resp) => {
  // resp.valid will be "true" or "false"
});

Card expiration validation

Hosted Fields validates the card expiration date that the customer enters in the payment fields and returns one of the following validation responses:

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

cardForm.on("card-expiration-test", (resp) => {
  // resp.valid will be "true" or "false"
});

Card Verification Value validation

Hosted Fields validates the length of the Card Verification Value (CVV) that the customer enters in the payment fields and returns one of the following validation responses:

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

cardForm.on("card-cvv-test", (resp) => {
  // resp.valid will be "true" or "false"
});

To get started processing a sale transaction, follow the steps in our guide.