# Advanced Topics

Poynt Collect brings a series of essential features and functions that are critical to ensure an ideal performance. However, there are multiple advanced actions that developers can opt to include in their code.

NOTE

We are constantly working to add new updates and features to Poynt Collect, stay tuned to find out more about this payment processing solution and the new upgrades we are working on.

# Methods

A method is a specific block of code that only runs when you call it. Poynt Collect Methods are used to perform certain actions, and they are also known as functions. Below is the primary method for Poynt Collect.

# collect.mount

collect.mount(domElementId, document, options);
  • domElementId (string): This string is referencing the DOM element where the payment form is added by Poynt.

  • document: This is a constant element within the JS code.

  • options (object): These are the options for the customization of the payment form

Example:

const options = {
  iFrame: {
    width: "500px",
    height: "400px",
    border: "1px",
    borderRadius: "4px",
    boxShadow: "0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08)"
  },
  style: {
    theme: "default" // theme: "customer", (alternative default theme)
  },
  displayComponents: {
    firstName: false, // toggle these to true if you wish to show the forms
    lastName: false,
    emailAddress: false,
    submitButton: false,
    showEndingPage: true // controls ending page,
    labels: false
  },
  fields: {
    emailAddress: customerEmail,
    firstName: firstName,
    lastName: lastName
  },
  additionalFieldsToValidate: ["firstName", "lastName", "zip"] // fields to validate
}

# Customized CSS

The CSS style of the form includes a default design. However, we have created the possibility to include custom CSS values. Below is an example of the elements you can configure.

TIP

Poynt collect uses a library called react-payment-inputs found here: https://github.com/medipass/react-payment-inputs#styles (opens new window)

const options = {
  amount: 2000,
  customCSS: {
    iFrame: {
      width: "397px",
      height: "150px",
      border: "0"
    },
    fieldWrapper: {
      base: `margin-bottom: 1rem;`
    },
    inputWrapper: {
      base: `border-color: green;`,
      errored: `border-color: maroon;`,
      focused: ` border-color: unset; box-shadow: unset; outline: 1px solid blue; outline-offset: 0px;`
    },
    input: {
      base: `color: green;`,
      errored: `color: maroon;`,
      cardNumber: ` font-family: Roboto, Open Sans, Segoe UI, sans-serif; width: 17rem;`,
      expiryDate: `font-family: Roboto, Open Sans, Segoe UI, sans-serif; text-transform: uppercase; width: 5rem;`,
      cvc: `font-family: Roboto, Open Sans, Segoe UI, sans-serif; width: 3rem;`
    },
    errorText: {
      base: `color: maroon;position: absolute;margin-top: 60px;margin-left: 5px;font-family: Roboto, Open Sans, Segoe UI, sans-serif;`
    }
  }
}
Last Updated: 5/10/2022, 10:14:16 AM