# 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.

# 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;`
    }
  }
}

# Collect JavaScript Version History

Semantic Version Change List
v2.0.1
  • Credit card form
  • ApplePay
  • GooglePay
Last Updated: 10/21/2022, 9:06:37 AM