4. Results and cleanup

← Checkout Web overviewSTEP 04 / 05

When you call paymentForm.init(...), Flex It allows you to capture three callback functions. The most important result for front responseCallback(response).

Here. responseCallback(response) as the main entrance of the result at front. The JSON That you get there reuses the same structure of API of Authorisation - ecommerce for the method of payment chosen within Flex.

Callbacks available

responseCallback

It runs when the process gets to a business result and gives you the JSON response.

trackingCallback

It runs for every flow event, as a method change, clicks or user advance within the form.

Failed

It runs after a technical error occurs during the load or performance of the component.

Example of implementation

function responseCallback(response) {
    console.log("-------Respuesta-------");
    console.log({response});
}

function trackingCallback(trackdata) {
    console.log("-------Tracking de Eventos-------");
    console.log({trackdata});
}

function onErrorCallback(error) {
    console.log("-------Error en el proceso-------");
    console.log({error});
}

paymentForm.init(
    document.querySelector("#demo"),
    responseCallback,
    trackingCallback,
    onErrorCallback
);

How to interpret responseCallback

The field response.payment_method indicates what reference to PayIn you have to use to interpret the JSON response returned by Flex.

Do not use response.meta.status.code as an approved or refused payer. That code indicates only the result of the service processing or if the response was generated correctly. To validate the payment result, check response.transaction.state and confirms from backend with Consultation or Notificationswith the method of payment.

The object response following the contract of API from Authorisation with Card.If your flow uses Redirect or 3DS authentication outside the same screen, complete this reading with Considerations for Redirect methods.

The object response following the contract of API from Authorisation with Yape.Even if the result goes by responseCallback, also valid operative consistency from backend before confirming order.

The object response following the contract of API with Bank Transfer.That method may require later confirmation. Do not take the front as the only source of truth: get up at Consultation or Notifications.

The object response following the contract of API from Authorisation with QR.To generate QR or showing an initial response does not amount to a confirmed final payment. Use Consultation or Notifications To close up his business logic.

The object response following the contract of API from Authorisation with Cuotéalo.The final status with a redirection or monitoring flow confirms Consultation or Notifications.

The object response following the contract of API from Authorisation with PagoEfectivo.The generation of CIP or from the payment link doesn’t mean that the money’s been received. confirms the result with Consultation or Notifications.

trackingCallback and onErrorCallback for technical faults. No one replaces the business logic you have to build up about responseCallback and backend confirmation.

Life cycle of the instance

The following examples use unmountFlex() from the responsive example. Adapt cleanup to your presentation: embedded, popup or expanded.

paymentForm.terminate?.() complete the internal processes, list and resources that maintain the Flex. That operation is different from eliminating the form from DOM (flexContainer.innerHTML = "") and applying to any type of presentation.

The operator ?. run terminate() only when the method exists. That prevents an error if the loaded version of Flex Do not implement that method.

When to dismount according to presentation

Presentation	When to Unmount	Following visual action
Drink	When you hide the checkout, you change Section or navigate to another screen.	Withdraw or replace the constore where it was Flex.
Popup (modal)	When the buyer closes his pup or his flow ends.	Hide the overlay and return the focus to the main interface.
Expand	When you get a check out or leave an expanded vision.	Take the panel or restore the earlier Layout.

In all 3 cases, first process any outstanding result and then run unmountFlex() before updating the visual presentation.

Do not modify the internal styles of Flex. Execut unmountFlex() When you withdraw the form, regardless of whether it’s embedded, into a popup or an expanded view.

own result screen

When you set up settings.display_result_screen: false, Flex doesn’t have his final screen. Your application should get the response, evaluate the status of the transaction and display an own result screen.

Mount form

paymentForm.init(...) challenges Flex inside the container.

Receives result

Flex run responseCallback(response). Read the result from response.transaction.state and conduct related business validations.

Show your screen

Save the response at the status of your application and navigate or render the result screen from the merchant.

Unmount Flex

When the result has been processed, run terminate(), cleanes the container and updates the presentation drunk, popup or expanded.

const paymentForm = new FlexPaymentForms({
  nonce,
  payload,
  settings: {
    display_result_screen: false
  }
});

const flexContainer = document.querySelector("#flex-container");

paymentForm.init(
  flexContainer,
  (response) => {
    const transactionState = response.transaction?.state;

    // Procesa y conserva la respuesta antes de desmontar Flex.
    showMerchantResultScreen({ transactionState, response });
    unmountFlex();
  },
  (tracking) => {
    console.log("Evento de seguimiento", tracking);
  },
  (error) => {
    console.error("Error de Flex", error);
  }
);

Don’t run terminate() before receiving and processing responseCallback(response). If you finish the instance earlier, you can stop the flow and lose the result that Flex He’s been put up.

Reusable cleaning

It encapsulates initiation and dismantling into an independent framework controller. You can use them from pure JavaScript or connect them to React’s life cycle, Vue, Angular or other technologies.

function createFlexController({
  container,
  configuration,
  onResult,
  onTracking,
  onError
}) {
  let instance = null;

  function mount() {
    // Evita conservar una instancia anterior al volver a abrir Flex.
    destroy();

    instance = new FlexPaymentForms(configuration);
    instance.init(container, onResult, onTracking, onError);
  }

  function destroy() {
    instance?.terminate?.();
    instance = null;
    container.replaceChildren();
  }

  return { mount, destroy };
}

const flexController = createFlexController({
  container: document.querySelector("#flex-container"),
  configuration: {
    nonce,
    payload,
    settings: {
      display_result_screen: false
    }
  },
  onResult: responseCallback,
  onTracking: trackingCallback,
  onError: onErrorCallback
});

// Abre o vuelve a crear el formulario.
flexController.mount();

// Finaliza la instancia al cerrar, navegar o retirar la presentación.
// flexController.destroy();

JavaScript

Execut destroy() before withdrawing the container from the page.

Implementation SPA

Connect destroy() to change of path or to dismount vision.

Dynamic presentation

Do so by hiding the embossed block, closing the Popup or getting an expanded view.

container.replaceChildren() an empty constore equivalent to container.innerHTML = ""without dependent on a specific framework.

terminate() does not return the payment response. The result always comes with the first call of paymentForm.init(...). Check. Capture callback functions to interpret and confirm the operation.

Management of closure with show_close_button

Figure settings.show_close_button: true to display the native clasp of Flex. That option works with embumbing, pounding and expanding presentations.

const paymentForm = new FlexPaymentForms({
  nonce,
  payload,
  settings: {
    show_close_button: true
  }
});

When the buyer presses the button, Flex send message cerro el carrito with onErrorCallback. Although using the error call, this message represents a voluntary action by the buyer and not a technical failure.

Show the button

Active show_close_button inside settings.

Play the event

Identifies the exact message cerro el carrito in onErrorCallback.

Close presentation

Execut onClose() for dismantling Flex and update the interface.

It implements an exclusive branch for voluntary closure and preserves other messages as technical errors:

function getFlexErrorMessage(error) {
  if (typeof error === "string") return error;
  return error?.message ?? "";
}

function onErrorCallback(error) {
  const errorMessage = getFlexErrorMessage(error).trim();

  if (errorMessage === "cerro el carrito") {
    onClose();
    return;
  }

  // Los demás mensajes se procesan como errores técnicos.
  handleFlexError(error);
}

function onClose() {
  unmountFlex();

  // Oculta el popup, retira el bloque embebido o contrae la vista expandida.
  hideFlexPresentation();
}

The closing flow is show_close_button → onErrorCallback → onClose() → unmountFlex(). hideFlexPresentation() represents the visual logic of your application: remove the embedded block, hide the popup or get an expanded view.

Execut onClose() only after complete message cerro el carrito. Any other value received at onErrorCallback have to continue to manage technical errors.

5. Testing and production

Review security, functional tests and production readiness.

Getting started

Integration

Migration

Payments

Callbacks available

responseCallback

trackingCallback

Failed

Example of implementation

How to interpret responseCallback

Life cycle of the instance

When to dismount according to presentation

own result screen

Reusable cleaning

JavaScript

Implementation SPA

Dynamic presentation

Management of closure with show_close_button

Show the button

Play the event

Close presentation

5. Testing and production

​Callbacks available

responseCallback

trackingCallback

Failed

​Example of implementation

​How to interpret responseCallback

​Life cycle of the instance

​When to dismount according to presentation

​own result screen

​Reusable cleaning

JavaScript

Implementation SPA

Dynamic presentation

​Management of closure with show_close_button

Show the button

Play the event

Close presentation

5. Testing and production

Callbacks available

Example of implementation

How to interpret responseCallback

Life cycle of the instance

When to dismount according to presentation

own result screen

Reusable cleaning

Management of closure with show_close_button