Saltar al contenido principal

Pagar con Yape

Esta casuística permite a los usuarios realizar un pago utilizando el código Yape. El usuario ingresa un código OTP generado desde la APP de Yape y este es validado en nuestro checkout para completar la transacción y procesar el pago.

Objetivo

Aprenderás a:

  • Crear el objeto de configuración
  • Inicializar el formulario de pago.
  • Mostrar el Checkout.
  • Ejemplo de respuesta.

1. Creando el objeto de configuración

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. Instanciando la clase

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

3. Mostrando el 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);
}
Importante
  • Si el comercio solo tiene configurado como método de pago YAPE y el monto excede el límite establecido, no se mostrará el checkout.
  • Si el comercio tiene configurado varios métodos de pago, entre ellos YAPE y el monto excede el límite establecido, no se mostrará la hoja de pago.

4. Respuesta

Al finalizar la transacción, nuestro checkout enviará al comercio la respuesta en formato JSON.

{
"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": "20.14",
"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": "TestOnce",
"lastName": "CaseOnce",
"email": "mgutierres@izipay.pe",
"phoneNumber": "963150123",
"street": "Jorge Chavez 256",
"city": "Lima",
"state": "Lima",
"country": "PE",
"postalCode": "15002",
"documentType": "DNI",
"document": "24010511",
"companyName": ""
},
"merchant": {
"merchantCode": "5599795",
"facilitatorCode": ""
},
"token": {
"merchantBuyerId": "GDTI4562_009",
"cardToken": "",
"alias": ""
},
"authentication": {
"result": ""
},
"customFields": [
"",
"",
"",
"",
"",
"",
"",
"",
"",
""
]
},
"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\":\"20.14\",\"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\":\"TestOnce\",\"lastName\":\"CaseOnce\",\"email\":\"mgutierres@izipay.pe\",\"phoneNumber\":\"963150123\",\"street\":\"Jorge Chavez 256\",\"city\":\"Lima\",\"state\":\"Lima\",\"country\":\"PE\",\"postalCode\":\"15002\",\"documentType\":\"DNI\",\"document\":\"24010511\",\"companyName\":\"\"},\"merchant\":{\"merchantCode\":\"5599795\",\"facilitatorCode\":\"\"},\"token\":{\"merchantBuyerId\":\"GDTI4562_009\",\"cardToken\":\"\",\"alias\":\"\"},\"authentication\":{\"result\":\"\"},\"customFields\":[\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\"]},\"transactionId\":\"170499542026900\"}",
"signature": "wXlqracZYHEtr0glhT8L9PxeSQjgupdiKJZ41zTnf0I=",
"transactionId": "170499542026900"
}

Demo

A continuación, te invitamos a explorar nuestra demo interactiva.

Editor en vivo
Resultado
Loading...