Drop-In UI - Customization

const cardForm = GlobalPayments.creditCard.form("#credit-card-form", {
    style: "gp-default2",
    labels: {
        "card-cvv": " Security Code",
        "card-expiration": "Expiry Date",
        "card-number": "Card Number"
        "card-holder-name": "Cardholder Name",
    },
    titles: {
        "card-cvv": "Card CVV Input",
        "card-expiration": "Card Expiration Input",
        "card-number": "Card Number Input",
        "card-holder-name": "Card Holder Name Input",
        "submit": "Form Submit Button Input"
    },
    placeholders: {
        "card-cvv": "•••",
        "card-expiration": "MM / YY",
        "card-holder-name": "Cardholder Name",
        "card-number": "•••• •••• •••• ••••"
    },
   values: {
       // IT IS NOT RECOMMENDED TO PUT VALUES FOR THE FOLLOWING FIELDS
       "card-cvv": "123",
       "card-expiration": "01 / 30",
       "card-holder-name": "4242 4242 4242 4242",
       // END
       
       "card-holder-name": "John Doe",
   },
});

GlobalPayments.configure({
  accessToken: "access-token",
  apiVersion: "2021-03-22",
  env: "sandbox", // or "production"
  fieldValidation: {
    enabled: true
  }
})

const cardForm = GlobalPayments.creditCard.form('#credit-card-form',{
    style: "gp-default2",
    fields: {
      "submit": "Pay"
    }
});

const cardForm = GlobalPayments.creditCard.form("#credit-card-form", {
    style: "gp-default2",
    orderInformation: {
        enabled: false,
        merchantName: "Test Merchant Name",
        orderTotalAmount: "84.90",
        orderReference: "XXXX12345",
        currencyCode: "USD"
    }
});

// Returns an event with a validity of the card number entered.
// Return type: boolean.
cardForm.on("card-number-test", (resp) => {
  console.log("card-number-test", resp)
});

// Returns an event with a validity of the expiration date entered.
// Return type: boolean.
cardForm.on("card-expiration-test", (resp) => {
  console.log("card-expiration-test", resp)
});

// Returns an event with a validity of the CVV/CVC entered
// Return type: boolean.
cardForm.on("card-cvv-test", (resp) => {
  console.log("card-cvv-test", resp)
});

// Returns the card type entered in the Card Number field.
// Return type: String ("visa", "mastercard", "amex", "diners", "discover", "jcb", "unknown")
cardForm.on("card-type", (resp) => {
  console.log("card-type", resp)
});

// Returns a click event to indicate that the Submit button was clicked
// Return type: Event
cardForm.on("submit", "click", (resp) => {
  console.log("click", resp)
});