2. Integrate Flex

← Checkout Web overviewSTEP 02 / 05

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:

production
Production

    <!-- Estilos CSS -->
    <link
      rel="stylesheet"
      type="text/css"
      href="https://flex.dev.pay-me.cloud/main-flex-payment-forms.css"
    />

    <!-- Librería JS -->
    <script src="https://flex.dev.pay-me.cloud/flex-payment-forms.min.js"></script>

    <!-- Estilos CSS -->
    <link
      rel="stylesheet"
      type="text/css"
      href="https://flex.alignet.io/main-flex-payment-forms.css"
    />

    <!-- Librería JS -->
    <script src="https://flex.alignet.io/flex-payment-forms.min.js"></script>

CSS

Undetermined terms of the payment form. Include before closure <head>.

JS

Main library Alignet One Flex. Include after CSS at <head>.

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 - ecommercewith 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

Same base PayIn

Keep action, channel, merchant_code, merchant_operation_number, payment_method and payment_details.

Change Flex

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.

Retirement

Contains general information about the operation and links with payment_detailswhere 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

Item payment_details

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

Item payment_details

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

Item payment_details

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

Item payment_details

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

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 and payload of Construction of payload before we continue.

Building parameters

Expand every block to check the fields you can send to the builder.

Mandatory information

Field	Type	Description
`nonce`	Alphanumeric	Code encryption generated by backend API Nonce.
`payload`	Subject matter JSON	Details of purchase and buyer prepared at Construction of payload.

Settings

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.

Object display_sittings

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.

Subject matter

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

It creates an instance

Send the nonce, payload and the configuration that your integration needs.

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"]
  }
});

Create the container

Add to HTML the element where Flex will generate their DOM.

<div id="flex-container"></div>

Surrender form

Fits the instance and delivers the functions that will process the response, monitoring and errors.

paymentForm.init(
  document.querySelector("#flex-container"),
  responseCallback,
  trackingCallback,
  onErrorCallback
);

If you define i18n.default_languageand 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(...).

3. Customize the checkout

Configure the visual experience and adapt Flex to your interface and mobile devices.

Getting started

Integration

Migration

Payments

1. Load CSS and JavaScript

CSS

JS

2. Build the payment payload

What’s preserved and what’s changing

Same base PayIn

Change Flex

Payload structure

Full example

3. Mount the component

Building parameters

Initiate and mount Flex

3. Customize the checkout

​1. Load CSS and JavaScript

CSS

JS

​2. Build the payment payload

​What’s preserved and what’s changing

Same base PayIn

Change Flex

​Payload structure

​Full example

​3. Mount the component

​Building parameters

​Initiate and mount Flex

3. Customize the checkout

1. Load CSS and JavaScript

2. Build the payment payload

What’s preserved and what’s changing

Payload structure

Full example

3. Mount the component

Building parameters

Initiate and mount Flex