Delay Pay - Configuration

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

1. Create HTML elements on your payment page.
2. Link our JavaScript library to your payment page.
3. Add your credentials to the library.
4. Call the UI form and create the pay fields.
5. Add a button for Delay Pay.
6. Customize the pay fields on your page.
7. Handle callback function responses.

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

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

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

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

<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’ : “QwAnDXXXXXXXXXXXXXXXXXXXXXXETHqV”
  ‘X-GP-Environment’ : “test”,
  'enableAutocomplete': true
});

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

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

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

<button type="button" id="paymentRequestLoanButton" style="color:green">{Name of button}</button>

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

const paymentRequestACFForm = GlobalPayments.acf.acfform(
  "#paymentRequestLoanButton",
  { merchant_key: <YOURMERCHANTKEY> },
  {
    loan: {
      country_code: "840",
      language: "en-US",
      amount: "250",
      currency_code: "840",
    },
  },
  { customer: { title: "MR", first_name: "john", last_name: "sam" } },
  {
    styleOptions: {
      "#iframe": {
        position: "fixed",
        top: "0",
        left: "0",
        "border-style": "none",
        width: "100vw",
        height: "100vh",
      },
    },
  }
);
paymentRequestACFForm.on("gpi-acf-success", (resp) => {
  console.log("ACF response token is here", resp);
});
paymentRequestACFForm.on("gpi-acf-error", (resp) => {
  console.log("ACF error response is here", resp);
});
paymentRequestACFForm.on("error", (resp) => {
  console.log("payment api error is here", resp);
});

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

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

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

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.

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 backend, process with our gateway
  const form = document.getElementById(“payment-form”);
  form.appendChild(child);
  form.submit;
}

Error

The gateway returns a token-error if the customer submits the form before they complete all the pay 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

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

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

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

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

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.

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