Khipu's Client for Web Integration

<div id="khipu-web-root"></div>

Input

Below are the parameters necessary to initialize the API.

Parameters

• modal : Boolean Determines if the payment process will be presented in a modal window.
  • true : Activates modal mode.
  • false : Deactivates modal mode.
• modalOptions : Configures the dimensions of the modal window when modal mode is activated.
  • maxWidth : The maximum width that the modal window can occupy.
  • maxHeight : The maximum height that the modal window can occupy.
• options :
  • style : The graphical style of Khipu Inside Web can be modified with the following parameters:
  • primaryColor : Main interface color.
  • skipExitPage : Boolean Controls whether to skip the exit page at the end of the payment process.
  • true : Skips the exit page.
  • false : Displays the exit page.

API Invocation

In the case of Khipu Web, the exit links and buttons are automatically configured with the URLs sent when creating the payment through our API. Special behaviors for modal configuration are also included.

Finally, with a unique payment identifier as explained in payment intent, a payment can be started using Khipu Inside Web.

const callback = (result) => {
  console.log(`calback invoked:`, result);
};

const options = {
  mountElement: document.getElementById('khenshin-web-root'), 
  modal: true, 
  modalOptions: {
    maxWidth: 450,
    maxHeight: 860,
},
  options: {
  style: {
    primaryColor: '#8347AD',
    fontFamily: 'Roboto',
    },
  skipExitPage: false, 
  },
}

const khipu = new Khipu();

khipu.startOperation('Identificador de pago', callback, options);

Output

Below are the parameters that the API will return at the end of the process.

Return

• operationId : String The unique identifier of the payment intent.
• exitTitle : String The title that will be displayed to the user on the exit screen, reflecting the outcome of the operation.
• exitMessage : String The message that will be displayed to the user, providing additional details about the outcome of the operation.
• exitUrl : String The URL to which the application will return at the end of the process.
• result : String The general outcome of the operation, possible values are:
  • OK : The payment was correctly authorized at the originating bank. The payment is being validated, and a notification will be sent by the server once it is validated.
  • ERROR : The payment was not authorized correctly; the exitMessage contains the reason to be delivered to the customer, and failureReason the type of error.
  • WARNING : The payment has not been completed but might still occur. For example, the originating bank had an error generating the payment receipt, but the money was sent, or more signatures are needed in a transfer involving multiple parties. Khipu has started the process of monitoring the destination account to validate the payment.
  • CONTINUE : The operation needs more steps to be completed. For example, payments at Corporate Banks that require more signatures.
• failureReason : String (Optional) Describes the reason for failure if the operation was not successful.
• continueUrl : String (Optional) Available only when the result is "CONTINUE", indicating the URL to follow to continue the operation.
• events : Array The steps taken to generate the payment, with their timestamps.

Close Payment Window

To close the payment window, for example, when capturing an exit message, simply call the method:

khipu.close();

Additionally, for the modal window case, this action will be handled internally via the links:

• Cancel payment and return : Available during the payment process. It triggers the errorHandler callback with a message type: OPERATION_FAILURE and failureReason : USER_CANCELED .
• Finish and return : Displayed at the end of the payment process. No further calls to callbacks are made, as a call to the successHandler is sent upon transaction completion.

Restart the Payment

If you wish to restart the current payment in case of an error or any other issue, you can use the method:

khipu.restart();