Skip to main content

Quickstart

This quickstart guide shows how to use the core Izipay SDKs to add a payment form to your JavaScript-based applications.

Objective​

You will learn how to:

  • Install the Izipay SDK
  • Initialize the payment form.
  • Display the Checkout.

Step 1: Install SDK​

Add the following script tag in the HEAD header of your HTML file.
<script src="https://sandbox-checkout.izipay.pe/payments/v1/js/index.js" defer></script>

Step 2: Initialize the SDK​

1. Configure the input parameters.​

const iziConfig = {
  config: {
    transactionId: '{TRANSACTION_ID}',
    action: 'pay',
    merchantCode: '{MERCHANT_CODE}',
    order: {
      orderNumber: '{ORDER_NUMBER}',
      currency: 'PEN',
      amount: '1.50',
      processType: 'AT',
      merchantBuyerId: '{MERCHANT_CODE}',
      dateTimeTransaction: '1670258741603000',
    },
    billing: {
      firstName: 'Luis',
      lastName: 'Quispe',
      email: 'luisquispetaquire@gmail.com',
      phoneNumber: '958745896',
      street: 'Av. Jorge Chávez 275',
      city: 'Lima',
      state: 'Lima',
      country: 'PE',
      postalCode: '15038',
      documentType: 'DNI',
      document: '21458796',
    },
    shipping:{
      firstName: 'Juan',
      lastName: 'Pérez',
      email: 'juanperez@gmail.com',
      phoneNumber: '989897960',
      street: 'Av. Jorge Chávez 275',
      city: 'Lima',
      state: 'Lima',
      country: 'PE',
      postalCode: '15000',
      documentType: 'DNI',
      document: '12345679'
    },
  },
};

2. Instantiating the class​

try {

  const checkout = new Izipay({ config: iziConfig });

} catch ({Errors, message, date}) {

    console.log({Errors, message, date});

}

Step 3: Show the Checkout.​

After creating the instance, with the data sent correctly in the configuration, you will be able to view the form by calling the LoadForm method which receives the following parameters.

ParametersDescriptionRequired
authorizationValue used to authenticate the system that wants to consume a PuntoWeb service. Can be generated by consuming the Session Token generation service.YES
RSA public keyYES
callbackResponseValue used to receive transaction responses.NO
Tip

Another way to read the transaction response is by accessing the global Class Izipay as follows: Izipay.prototype.Response 

const callbackResponsePayment = (response) => console.log(response);

try {
  checkout &&
    checkout.LoadForm({
      authorization: 'TU_TOKEN_SESSION',
      keyRSA: 'KEY_RSA',
      callbackResponse: callbackResponsePayment,
    });
} catch ({Errors, message, date}) {
  console.log({Errors, message, date});
}

Important​

  • The Session Token Api must be invoked from your Backend.

  • In the example provided in step 1, a Payment Form with default values will be displayed. know all the configuration parameters here.

  • You can use the events of our checkout for a more personalized flow.

  • You can view the errors in the catch section.

  • Download an example here

Last updated on