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