> ## Documentation Index
> Fetch the complete documentation index at: https://docs.alignet.com/llms.txt
> Use this file to discover all available pages before exploring further.
# 2. Integrate Flex
> Load the libraries, build the payload and mount your first payment form.
With a valid nonce, connect the payment form in three stages: load the library, build the payment payload and mount Flex.
## 1. Load CSS and JavaScript
To be used Alignet One Flex have to include the following code in the HTML from the page by environment:
```html theme={"system"} theme={"system"}
```
```html theme={"system"} theme={"system"}
```
Undetermined terms of the payment form. Include before closure ``.
Main library Alignet One Flex. Include after CSS at ``.
Be sure to first include CSS and then JS to ensure that styles are applied correctly before the form starts.
## 2. Build the payment payload
The `payload` of Flex reuses the structure of **API of Authorisation - ecommerce**with an important difference: `payment_method` at the root object but as an empty object `{}`, because the client will choose the method within the form.
Think about this step as preparing the request for `POST /charges` for Flex. What you build here will be the basis of the operation that you will end up reading at `responseCallback(response)`.
### What's preserved and what's changing
Keep `action`, `channel`, `merchant_code`, `merchant_operation_number`, `payment_method` and `payment_details`.
In Flex, `payment_method` travels as `{}` empty because the actual method resolves in the front as the user select.
### Payload structure
Expand each block to check which fields belong to each level of the object that you will send to Flex.
Contains general information about the operation and links with `payment_details`where she travels the details of the collection.
| Field | Description | Example | Type | Mandatory |
| :-------------------------- | :------------------------------------------------- | :----------------- | :----- | :-------- |
| `action` | Action to be implemented | `authorize` | String | If |
| `channel` | Channel where transaction will be run | `ecommerce` | String | If |
| `merchant_code` | Merchant identifier | Alphanumeric Chain | String | If |
| `merchant_operation_number` | Operation order number | 6 to 12 digits | String | If |
| `payment_method` | Subject matter reserved for Flex. To be sent empty | `{}` | Object | If |
| `payment_details` | Object with information about the transaction | Object | Object | If |
Gather the buyer's amount, currency and operating subobjects, billing and sending.
| Field | Description | Example | Type | Mandatory |
| :---------------------------------- | :------------------------------------------------------------------------------------------------- | :-------------------- | :--------- | :-------- |
| `payment_details.amount` | Operating cents | `1050` | String | If |
| `payment_details.currency` | Code [ISO 4217](https://www.iso.org/iso-4217-currency-codes.html) of the currency of the operation | `604` | String | If |
| `payment_details.additional_fields` | Dictionary to send custom fields and values `key:value` | `external_id:5468724` | Dictionary | NO |
| `payment_details.customer` | Object with information from the client who buys | Object | Object | NO |
| `payment_details.billing` | Object with billing information | Object | Object | If |
| `payment_details.shipping` | Object with sending information | Object | Object | NO |
Define the optional data of the client that makes the purchase useful for identification and risk context.
| Field | Description | Type | Mandatory |
| :------------------------------------------------------ | :-------------------------------------------------- | :----- | :-------- |
| `payment_details.customer.first_name` | Names | String | NO |
| `payment_details.customer.last_name` | Surname | String | NO |
| `payment_details.customer.email` | Email | String | NO |
| `payment_details.customer.phone` | Object with phone information | Object | NO |
| `payment_details.customer.phone.country_code` | Telephone Country Code | String | NO |
| `payment_details.customer.phone.subscriber` | Telephone number | String | NO |
| `payment_details.customer.identity_document` | Object with information about the identity document | Object | NO |
| `payment_details.customer.identity_document.country` | Country of document | String | NO |
| `payment_details.customer.identity_document.type` | Type of document | String | NO |
| `payment_details.customer.identity_document.identifier` | document number | String | NO |
| `payment_details.customer.location` | Object with location information | Object | NO |
| `payment_details.customer.location.line_1` | Section 1 | String | NO |
| `payment_details.customer.location.line_2` | Directorate 2 | String | NO |
| `payment_details.customer.location.city` | City | String | NO |
| `payment_details.customer.location.state` | State | String | NO |
| `payment_details.customer.location.country` | Country | String | NO |
Contains required billing data that Flex necessary to process the operation.
| Field | Description | Type | Mandatory |
| :------------------------------------------- | :------------------------------- | :----- | :-------- |
| `payment_details.billing.first_name` | Names | String | If |
| `payment_details.billing.last_name` | Surname | String | If |
| `payment_details.billing.email` | Email | String | If |
| `payment_details.billing.phone` | Object with phone information | Object | If |
| `payment_details.billing.phone.country_code` | Telephone Country Code | String | If |
| `payment_details.billing.phone.subscriber` | Telephone number | String | If |
| `payment_details.billing.location` | Object with location information | Object | If |
| `payment_details.billing.location.line_1` | Section 1 | String | If |
| `payment_details.billing.location.line_2` | Directorate 2 | String | NO |
| `payment_details.billing.location.city` | City | String | If |
| `payment_details.billing.location.state` | State | String | If |
| `payment_details.billing.location.country` | Country | String | If |
It includes sending information as soon as your business flow needs to complement the operation.
| Field | Description | Type | Mandatory |
| :-------------------------------------------- | :------------------------------- | :----- | :-------- |
| `payment_details.shipping.first_name` | Names | String | NO |
| `payment_details.shipping.last_name` | Surname | String | NO |
| `payment_details.shipping.email` | Email | String | NO |
| `payment_details.shipping.phone` | Object with phone information | Object | NO |
| `payment_details.shipping.phone.country_code` | Telephone Country Code | String | NO |
| `payment_details.shipping.phone.subscriber` | Telephone number | String | NO |
| `payment_details.shipping.location` | Object with location information | Object | NO |
| `payment_details.shipping.location.line_1` | Section 1 | String | NO |
| `payment_details.shipping.location.line_2` | Directorate 2 | String | NO |
| `payment_details.shipping.location.city` | City | String | NO |
| `payment_details.shipping.location.state` | State | String | NO |
| `payment_details.shipping.location.country` | Country | String | NO |
For S /. 10.50 you should send `1050` and `currency` Value `604` for Soles.
In Flexand the root matter should be explicitly included `payment_method: {}` but the final method has not been selected by the user.
### Full example
```javascript theme={"system"} theme={"system"}
var payload = {
"action": "authorize",
"channel": "ecommerce",
"merchant_code": "b0deb6f3-e51a-48a7-9268-f1441d46f7bd",
"merchant_operation_number": "221354",
"payment_method": {},
"payment_details": {
"amount": "7000",
"currency": "604",
"billing": {
"first_name": "Levis",
"last_name": "Silvestre",
"email": "levis.silvestre@alignet.com",
"phone": {
"country_code": "+51",
"subscriber": "958435685"
},
"location": {
"line_1": "Av. San Borja Norte 1743",
"line_2": "",
"city": "Lima",
"state": "Lima",
"country": "PE"
}
},
"shipping": {
"first_name": "Levis",
"last_name": "Silvestre",
"email": "levis.silvestre@alignet.com",
"phone": {
"country_code": "+51",
"subscriber": "958435685"
},
"location": {
"line_1": "Av. San Borja Norte 1743",
"line_2": "",
"city": "Lima",
"state": "Lima",
"country": "PE"
}
},
"customer": {
"first_name": "Levis",
"last_name": "Silvestre",
"email": "levis.silvestre@alignet.com",
"phone": {
"country_code": "+51",
"subscriber": "958435685"
},
"identity_document": {
"country": "PER",
"type": "DNI",
"identifier": "72661927"
},
"location": {
"line_1": "Av. San Borja Norte 1743",
"line_2": "",
"city": "Lima",
"state": "Lima",
"country": "PE"
}
}
}
}
```
## 3. Mount the component
with `payload` built and `nonce` and established an instance of `FlexPaymentForms` and put the form on your DOM.
You need a `nonce` Current [API Nonce](/en/virtual-payments/checkout-web/preparation) and `payload` of [Construction of payload](/en/virtual-payments/checkout-web/integrate-flex) before we continue.
### Building parameters
Expand every block to check the fields you can send to the builder.
| Field | Type | Description |
| :-------- | :------------------ | :--------------------------------------------------------------------------------------------------------------------- |
| `nonce` | Alphanumeric | Code encryption generated by backend [API Nonce](/en/virtual-payments/checkout-web/preparation). |
| `payload` | Subject matter JSON | Details of purchase and buyer prepared at [Construction of payload](/en/virtual-payments/checkout-web/integrate-flex). |
Control the general visual performance of the component.
| Field | Type | Description |
| :------------------------------- | :------ | :------------------------------------------------------------ |
| `settings.display_result_screen` | Boolean | Display the result screen at the end of the process. |
| `settings.show_close_button` | Boolean | Display the button to close the component. |
| `settings.show_border` | Boolean | It activates or deactivates the visual edge of the component. |
| `settings.show_operation_number` | Boolean | It shows the operation number inside the flow. |
Define the means of payment that Flex will show the buyer.
| Field | Type | Description |
| :------------------------- | :-------------- | :------------------------------------------------------------------------------------------------------ |
| `display_settings.methods` | Array de String | List necessary for viewing. Accept `CARD`, `YAPE`, `QR`, `BANK_TRANSFER`, `CUOTEALO` or `PAGOEFECTIVO`. |
You have to send `display_settings.methods` with the payment methods you need to visualise at Flex.
Configure available languages within form.
| Field | Type | Description |
| :---------------------- | :-------------- | :--------------------------------------------------------------- |
| `i18n.mode` | String | Language mode. For this flow it's used `multi`. |
| `i18n.default_language` | String | Undetermined language: `es` or `en`. |
| `i18n.languages` | Array de String | List of authorized languages. currently supported `es` and `en`. |
### Initiate and mount Flex
Send the `nonce`, `payload` and the configuration that your integration needs.
```javascript theme={"system"} theme={"system"}
const paymentForm = new FlexPaymentForms({
nonce,
payload,
settings: {
display_result_screen: true,
show_close_button: true,
show_border: false,
show_operation_number: true
},
display_settings: {
methods: ["QR", "BANK_TRANSFER", "CARD"]
},
i18n: {
mode: "multi",
default_language: "es",
languages: ["es", "en"]
}
});
```
Add to HTML the element where Flex will generate their DOM.
```html theme={"system"} theme={"system"}
```
Fits the instance and delivers the functions that will process the response, monitoring and errors.
```javascript theme={"system"} theme={"system"}
paymentForm.init(
document.querySelector("#flex-container"),
responseCallback,
trackingCallback,
onErrorCallback
);
```
If you define `i18n.default_language`and uses one of the languages listed in `i18n.languages`.
`#flex-container` That's just an example. Can use another selector as long as the item exists before running `paymentForm.init(...)`.
Configure the visual experience and adapt Flex to your interface and mobile devices.