` with the class `container` , you can modify or add styles to the div by adding the property `container` inside the object `styles`.
```javascript
const params ={
...
"styles":{
"container":{
"backgroundColor":"blue"
}
}
}
```
Inside the `container` object you can modify any other attribute.
#### Spinner
In order to modify the style of the spinner loader that is shown when the form page is loading, you need to add the property `spinner` inside the object `styles`.
```javascript
const params ={
...
"styles":{
"spinner":{
"borderTopColor":"green"
}
}
}
```
Inside the `spinner` object you can modify any other attribute.
#### Buttons
The library has two different buttons: "Continue" shown when choosing a payment method and to confirm the transaction and "Go Back", used to go the Payment Methods page again.
In order to modify the "Continue" button, you need to add the property `continueBtn` inside the object `styles` and to modify the "Go Back" button use the property `backBtn`.
```javascript
const params ={
...
"styles":{
"continueBtn":{
"backgroundColor":"green",
":hover":{
"backgroundColor":"blue"
}
},
"backBtn":{
"color":"red",
"border":"1px solid red"
}
}
}
```
Inside the buttons properties object you can modify any other attribute.
#### Grid View
The library has different properties you can use to modify the style of the Payment Methods Grid View:
* `gridItemBox` allows to customize the container of each payment method
* `gridItemCheckIcon` allows to customize how the payment method looks like when it was selected by the customer
* `gtidItemLabel` allows to customize the label of each payment method
```javascript
const params ={
...
"styles":{
"gridItemBox":{
"width":"170px",
"height":"170px",
"backgroundColor":"red",
":hover":{
"backgroundColor":"green"
}
},
"gridItemCheckIcon":{
"color":"green",
"borderColor":"blue",
"background":"yellow"
},
"gridItemLabel":{
"color":"violet"
}
}
}
```
Inside the grids objects you can modify any other attribute.
#### Title
The library has two titles you can personalize:
* `stepsItems` allows to change the style of all the titles
* `stepsItemsActive` allows to change the style of the active title
```javascript
const params ={
...
"styles":{
"stepsItems":{
"color":"orange",
"backgroundColor":"green"
},
"stepsItemActive":{
"color":"violet",
":after":{
"content":"''",
"display":"block",
"height":"3px",
"position":"absolute",
"left":0,
"right":0,
"bottom":0,
"backgroundColor":"yellow"
}
}
}
}
```
#### Inputs
In order to modify the input forms, you have the following properties available:
* `inputContainer`
* `inputText`
* `inputErrorLabel`
* `inputErrorIcon`
```javascript
const params ={
...
"styles":{
"inputErrorIcon":{
"color":"red"
}
}
}
```
#### Selects
If you want to modify the selects that will be used to render the form and the select of the payment method you can modify the following properties:
* `inputSelect`
* `inputSelectOption`
```javascript
const params ={
...
"inputSelect":{
"background":"lightBlue",
"&:hover":{
"borderColor":"red"
}
},
"inputSelectOption":{
"background":"red",
"&:hover":{
"borderColor":"green"
}
}
}
```
## 4. Initialize directa24.js
As soon as you have all the required parameters, we will invoke the `init` function to create and render the payment page.
```markup
```
The `init` function is composed by the following parameters:
```javascript
public init(
formId: HTMLElement,
displayType: FIELD_TYPE,
paymentMethod?: string,
loadPaymentForm?: boolean
)
```
### Parameters description
#### formId
Name of the HTML element where the library directa24.js has to render the payment page.
#### displayType
It specifies how the payment methods will be shown. It can either be in `COMBO` format or in `GRID` format. If an invalid value is sent, it defaults to GRID.
```javascript
export enum FIELD_TYPE {
COMBO = 'combo',
GRID = 'grid',
}
```
#### paymentMethod
The library allows you to specify the Payment Method. That way we won't ask the customer for the Payment Method again.
If the payment method is sent and it is invalid or you don't have it enabled, we will show the customer all the payment methods so they can choose one.
You can use the [Payment Methods API](https://docs.pandablue.com/api-documentation/deposits-api/endpoints/payment-methods-endpoint) to determine which payment methods you have enabled. Also check the [Payment Methods](https://docs.pandablue.com/api-documentation/deposits-api/payment-methods#payment-methods) section for the codes, logos and more.
#### loadPaymentForm
The `loadPaymentForm` parameter, is an optional and boolean value `[true, false]` that specifies whether the payment method specified can or can't be changed by the customer.
If `true`, the user will be redirected straight to the page to complete the payment details. If `false`, the customer will be prompted to select a payment method, with the payment method specified pre-selected by default.
It not sent or an invalid value is sent, we will default to `false`.
## 5. Send the payment info to your server
Once the user has successfully went through the "payment method" selection page and the "Details" page and clicks on "Confirm", we will send to the url specified as part of the cashier invokation a POST in form-data with the details collected.
You will need to use those details to create a deposit request by using our [Deposits API to create the payment link.](https://docs.pandablue.com/api-documentation/deposits-api)
## Working Code Example
Find below a working code example:
{% embed url="" %}
Directa24 GIT Repository - Example cashier with the Javascript library
{% endembed %}
As you can see, the directa24.js file is loaded directly from the header of the HTML file, the script tag contains the request to the library, and the payment form is rendered inside the `
` with id 'main'.
```markup
Directa24 Payment Form
```