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 use Alignet One Flex, include the following code in your page’s HTML for the selected environment:

Preproduction
Production

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

    <!-- JavaScript library -->
    <script src="https://flex.dev.pay-me.cloud/flex-payment-forms.min.js"></script>

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

    <!-- JavaScript library -->
    <script src="https://flex.alignet.io/flex-payment-forms.min.js"></script>

CSS

Default payment-form styles. Include them before the closing </head> tag.

JS

Main Alignet One Flex library. Include it after the CSS in <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 Flex payload reuses the E-commerce authorization API structure with one difference: send payment_method at the root as an empty object {}, because the customer selects the method inside 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.

Root object

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	Yes
`channel`	Channel where transaction will be run	`ecommerce`	String	Yes
`merchant_code`	Merchant identifier	Alphanumeric Chain	String	Yes
`merchant_operation_number`	Operation order number	6 to 12 digits	String	Yes
`payment_method`	Subject matter reserved for Flex. To be sent empty	`{}`	Object	Yes
`payment_details`	Object with information about the transaction	Object	Object	Yes

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	Yes
`payment_details.currency`	Code ISO 4217 of the currency of the operation	`604`	String	Yes
`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	Yes
`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	Yes
`payment_details.billing.last_name`	Surname	String	Yes
`payment_details.billing.email`	Email	String	Yes
`payment_details.billing.phone`	Object with phone information	Object	Yes
`payment_details.billing.phone.country_code`	Telephone Country Code	String	Yes
`payment_details.billing.phone.subscriber`	Telephone number	String	Yes
`payment_details.billing.location`	Object with location information	Object	Yes
`payment_details.billing.location.line_1`	Section 1	String	Yes
`payment_details.billing.location.line_2`	Directorate 2	String	No
`payment_details.billing.location.city`	City	String	Yes
`payment_details.billing.location.state`	State	String	Yes
`payment_details.billing.location.country`	Country	String	Yes

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