Skip to main content

Pay with Yape

This case allows users to make a payment using the Yape code. The user enters an OTP code generated from Yape's APP and this is validated in our checkout to complete the transaction and process the payment.

Objective​

You will learn how to:

  • Create the configuration object.
  • Initialize the payment form.
  • Display the Checkout.
  • Sample response.

1. Creating the configuration object​

const iziConfig = {
 config: {
   ...,
   action: 'pay',
   order: {
    ...,
    payMethod: 'YAPE_CODE',
   },
   billing:{
      firstName: 'Juan',
      lastName: 'Wick Quispe',
      email: 'jwickq@izi.com',
      phoneNumber: '958745896',
      street: 'Av. Jorge Chávez 275',
      city: 'Lima',
      state: 'Lima',
      country: 'PE',
      postalCode: '15038',
      documentType: 'DNI',
      document: '21458796',
   },
   shipping: {
      firstName: 'Juan Sh',
      lastName: 'Wick Quispe Sh',
      email: 'jwickqsh@izi.com',
      phoneNumber: '958745897',
      street: 'Av. Jorge Chávez 275',
      city: 'Lima',
      state: 'Lima',
      country: 'PE',
      postalCode: '15038',
      documentType: 'DNI',
      document: '21458798',
    }
   ...
 }
};

2. Instantiating the class​

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

3. Displaying the checkout​

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

try {
  checkout &&
    checkout.LoadForm({
      authorization: 'TU_TOKEN_SESSION',
      keyRSA: 'TU_KEY_RSA',
      callbackResponse: callbackResponsePayment,
    });
} catch (error) {
  console.log(error.message, error.Errors, error.date);
}
Important
  • If the merchant only has YAPE configured as a payment method and the amount exceeds the established limit, the checkout will not be shown.
  • If the merchant has several payment methods configured, including YAPE, and the amount exceeds the established limit, the payment slip will not be displayed.

4. Response​

At the end of the transaction, our checkout will send the response in JSON format to the merchant.

{
    "code": "00",
    "message": "Operación exitosa",
    "messageUser": "Operación exitosa",
    "messageUserEng": "Successful",
    "response": {
      "payMethod": "YAPE_CODE",
      "order": [
        {
          "payMethodAuthorization": "YAPE_CODE",
          "codeAuth": "000500",
          "currency": "PEN",
          "amount": "149.00",
          "installment": "00",
          "deferred": "0",
          "orderNumber": "1704995421",
          "stateMessage": "Autorizado",
          "dateTransaction": "20240111",
          "timeTransaction": "125141",
          "uniqueId": "0111175141811583",
          "referenceNumber": "1177350"
        }
      ],
      "card": {
        "brand": "VS",
        "pan": "449577******9759",
        "save": "false"
      },
      "billing": {
        "firstName": "Lucho",
        "lastName": "Torres",
        "email": "luchotorres@gmail.com",
        "phoneNumber": "989897960",
        "street": "Av. Jorge Chávez 275",
        "city": "Lima",
        "state": "Lima",
        "country": "PE",
        "postalCode": "15000",
        "documentType": "DNI",
        "document": "12345678",
        "companyName": ""
      },
      "merchant": {
        "merchantCode": "5599795",
        "facilitatorCode": ""
      },
      "token": {
        "merchantBuyerId": "GDTI4562_009",
        "cardToken": "",
        "alias": ""
      },
      "authentication": {
        "result": ""
      },
      "customFields": [
        {
          "name": "field1",
          "value": ""
        },
        {
          "name": "field2",
          "value": ""
        },
        {
          "name": "field3",
          "value": ""
        },
        {
          "name": "field4",
          "value": ""
        },
        {
          "name": "field5",
          "value": ""
        },
        {
          "name": "field6",
          "value": ""
        },
        {
          "name": "field7",
          "value": ""
        },
        {
          "name": "field8",
          "value": ""
        },
        {
          "name": "field9",
          "value": ""
        },
        {
          "name": "field10",
          "value": ""
        }
      ]
    },
    "payloadHttp": "{\"code\":\"00\",\"message\":\"Operación exitosa\",\"messageUser\":\"Operación exitosa\",\"messageUserEng\":\"Successful\",\"response\":{\"payMethod\":\"YAPE_CODE\",\"order\":[{\"payMethodAuthorization\":\"YAPE_CODE\",\"codeAuth\":\"000500\",\"currency\":\"PEN\",\"amount\":\"149.00\",\"installment\":\"00\",\"deferred\":\"0\",\"orderNumber\":\"1704995421\",\"stateMessage\":\"Autorizado\",\"dateTransaction\":\"20240111\",\"timeTransaction\":\"125141\",\"uniqueId\":\"0111175141811583\",\"referenceNumber\":\"1177350\"}],\"card\":{\"brand\":\"VS\",\"pan\":\"449577******9759\",\"save\":\"false\"},\"billing\":{\"firstName\":\"Lucho\",\"lastName\":\"Torres\",\"email\":\"luchotorres@gmail.com\",\"phoneNumber\":\"989897960\",\"street\":\"Av. Jorge Chávez 275\",\"city\":\"Lima\",\"state\":\"Lima\",\"country\":\"PE\",\"postalCode\":\"15000\",\"documentType\":\"DNI\",\"document\":\"12345678\",\"companyName\":\"\"},\"merchant\":{\"merchantCode\":\"5599795\",\"facilitatorCode\":\"\"},\"token\":{\"merchantBuyerId\":\"GDTI4562_009\",\"cardToken\":\"\",\"alias\":\"\"},\"authentication\":{\"result\":\"\"},\"customFields\":[{\"name\":\"field1\",\"value\":\"\"},{\"name\":\"field2\",\"value\":\"a\"},{\"name\":\"field3\",\"value\":\"\"},{\"name\":\"field4\",\"value\":\"\"},{\"name\":\"field5\",\"value\":\"\"},{\"name\":\"field6\",\"value\":\"\"},{\"name\":\"field7\",\"value\":\"\"},{\"name\":\"field8\",\"value\":\"\"},{\"name\":\"field9\",\"value\":\"\"},{\"name\":\"field10\",\"value\":\"\"}]},\"transactionId\":\"170499542026900\"}",
    "signature": "wXlqracZYHEtr0glhT8L9PxeSQjgupdiKJZ41zTnf0I=",
    "transactionId": "170499542026900"
  }
### Demo

Next, we invite you to explore our interactive demo.

Live editor
Result
Loading...